前端面试手册

分别从HTML、CSS、JavaScript、综合四个方面总结,后续持续更新


HTML部分


  • Doctype的作用?

文档声明,不存在或格式不正确会导致文档以兼容模式呈现
标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行
兼容模式页面以宽松的向后兼容的方式显示
HTML5不基于SGML,因此不需要对DTD进行引用

  • 行内、块级、 空(void)元素

行内:a b span img input select strong
块级:div ul ol li dl dt dd h1-6 p
空: br hr img input link meta

  • 导入样式link和@import的区别

作用范围、加载时机、兼容性三方面不同

  • CSS和JS的放置位置

CSS放在head防止页面回流和重绘,JS放body末尾防止页面阻塞

  • 标签语义化

用正确的标签做正确的事情,便于对浏览器、搜索引擎解析

  • HTML5的离线储存

localStorage 长期存储数据,浏览器关闭后数据不丢失
sessionStorage 数据在浏览器关闭后自动删除
cookie在浏览器和服务器间来回传递,大小有限制


CSS部分


  • 盒模型

内容(content)、填充(padding)、边界(margin)、 边框(border)
两种:标准|IE(宽高含边框),box-sizing:content-box|border-box

  • 选择符

ID、类、标签、属性、伪类、后代、子类、相邻、通配
important 》ID》Class》Tag

  • 浮动和定位

浮动脱离标准文档流,造成父元素塌陷
清除浮动:overflow,clear,height
定位:relation,absolute,fixed,static(inherit)

  • 垂直居中布局

表格法table-cell,弹性布局flex,绝对定位margin,相对定位translate

  • 渐进增强和优雅降级

针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
开始就构建完整的功能,然后再针对低版本浏览器进行兼容。

  • CSS3新特性

圆角、阴影、文字特效、线性渐变、变换、高级选择器、多背景、RGBA


JS部分


  • Undefined和null的区别

Undefined未赋值,Null尚未存在的对象
用typeof来判断五种原始类型:String、Number、Boolean、Undefined、Null,用instanceof来判断继承关系

  • 相等和全等的区别

相等默认进行隐式转换,全等不会

  • 字符串的常用方法

charAt 返回指定位置
concat 连接
indexOf 检索
replace 替换
slice 提取
split 分割
substr 提取
toLowerCase 转小写
toUpperCase 转大写

  • 数组的常用方法

concat 连接
join 拼接
pop 删除尾
push 添加尾
shift 删除头
unshift 添加头
reverse倒叙
sort 排序
slice 截取
splice 替换

  • 数组去重

基础循环法、排序相邻法、对象属性法、下标查询法(indexOf)

  • 排序算法

冒泡:相邻比较后,逐个冒泡
选择:查找最小值后,逐个交换
插入:逐个对比后,再插入

  • new操作符

创建一个空对象,并且 this 变量引用该对象,同时还继承了该函数的原型
属性和方法被加入到 this 引用的对象中
新创建的对象由 this 所引用,并且最后隐式的返回 this

  • 作用域、闭包和this

全局作用域和函数作用域,内部可访问外部,外部不能访问内部
在函数A内部定义函数B并作为返回值,当B在A之外被执行时就会形成闭包
this一般情况下指全局对象。 当作为方法调用,那么this就是指这个对象

  • apply和call

在特定的作用域中调用,等于设置函数体内this对象的值,以扩充函数赖以运行的作用域
接收参数的方式不同

  • JS框架和原理

React单向数据,Vue结合angular和react的优点,组件化、指令、双向绑定
vue采用数据劫持结合发布订阅模式,通过Object.defineProperty()劫持各个属性的setter
、getter,在数据变动时发布消息给订阅者,触发相应的监听回调。
VUE生命周期:Created创建,Mounted编译,Update更新,Destory销毁

  • AJAX原理

通过XmlHttpRequest对象向服务器发异步请求,获得数据后操作DOM更新页面
Open》onreadystatechange》send

  • 跨域和JsonP原理

浏览器同源策略,同协议|域名|端口,解决方案:后端代理|设置CORS头|Jsonp等
JSONP是通过动态创建script实现的,本质不属于AJAX技术。

  • DOM操作

创建:createElement,增删改:innerHTML,
查找:getElementById/getElementsByName/getElementsByTagName

  • CMD、AMD和模块化

AMD 是提前执行,CMD 是延迟执行
模块化是通过立即执行函数来进行的

  • VUE组件通信

路由参数、storage、父传子props&子传父emit、vuex


综合


  • 前端性能优化

加载:合并请求、缓存资源、外部文件、文件压缩、按需加载
图片:压缩、代替(css3、SVG、Iconfont)、webp、png8、base64
样式:头部引入、避免内联、避免重设图片大小、优化选择符
脚本:减少重绘和回流、缓存dom和length、事件代理、ID选择
渲染:优化DOM结构、CSS3动画触发GPU

  • 构建工具和原理

gulp基于流的自动化构建工具,Webpack基于模块的自动化打包工具

  • 安卓和IOS浏览器兼容

IOS定位fixed,图片加载失败

  • HTTP请求

GET、POST、PUT、DELETE、HEAD、OPTIONS

  • TCP和UDP

TCP稳定可靠的连接,通过三次握手四次释放,UDP不稳定的连接

posted @ 2018-12-26 12:21  小古哥  阅读(577)  评论(0编辑  收藏  举报