前端面试手册

分别从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不稳定的连接