前端面试手册

分别从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

---

综合

---

• 前端性能优化

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

• 构建工具和原理

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

• 安卓和IOS浏览器兼容

IOS定位fixed，图片加载失败

• HTTP请求

GET、POST、PUT、DELETE、HEAD、OPTIONS

• TCP和UDP

TCP稳定可靠的链接，经过三次握手四次释放，UDP不稳定的链接