前端面试手册
分别从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在浏览器和服务器间来回传递，大小有限制
- 自定义属性data-*
H5新特性，用于存储页面或应用程序的私有定制数据
可用dataset来统一获取和遍历，传统的getAttribute也能获取
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
- AMD和CMD
JS模块化编程规范，AMD 是提前执行，CMD 是延迟执行
模块化是通过立即执行函数来进行的
- VUE组件通信
路由参数、storage、父传子props&子传父emit、vuex
综合
- 正则表达式
通常被用来检索、替换那些符合某个模式(规则)的文本
| 元字符 | 类型 | 说明 |
|---|---|---|
| \ | 特殊 | 转义符号，或将下一个字符标记为特殊字符（如\d） |
| | | 特殊 | 分支条件，类似条件选择把不同规则分隔开 |
| () | 特殊 | 分组 |
| [] | 特殊 | 限定字符，如[abc] |
| [^] | 特殊 | 负值字符串，如[^abc]除abc以外的任何字符 |
| {} | 特殊 | 限定次数 |
| ^ | 位置 | 匹配字符串的开始 |
| $ | 位置 | 匹配字符串的结束 |
| \b | 位置 | 单词的开头或结尾，也就是单词的分界处 |
| * | 量词 | 重复零次或更多次（任意次） |
| + | 量词 | 重复一次或更多次（至少出现一次） |
| ? | 量词 | 重复零次或一次（最多出现一次） |
| {n} | 量词 | 重复n次，n为数字 |
| {n,} | 量词 | 重复n次到无数次 |
| {n,m} | 量词 | 重复n次到m次 |
| . | 匹配 | 匹配除换行符以外的任意字符 |
| \d | 匹配 | 匹配一个数字字符，等价于[0-9] |
| \w | 匹配 | 匹配字母或数字或下划线或汉字，只考虑英文情况下等价于[a-zA-Z0-9_] |
| \s | 匹配 | 匹配任意的空白符 |
- 前端性能优化
加载：合并请求、缓存资源、外部文件、文件压缩、按需加载
图片：压缩、代替（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不稳定的连接
