性能优化是在面试中被问到的最多的题目了，这部分需要候选人有足够的深度和广度才能回答的比较全面，性能优化由以下几个方面展开：
1、HTML方向
1、减少HTTP请求
2、减少DOM元素的熟练
3、减少DNS查询
4、避免重定向
5、让AJAX可缓存
6、延迟加载组件
7、预加载组件
8、跨域分离组件
9、减少使用ifarme
10、杜绝404
1、减少HTTP请求
- 1、合并文件，将所有的脚本或者是CSS放在同一个文件中，减少请求数量
- 2、雪碧图：将多张图片合成单张图片
- 3、将图片转化成Base64格式 减少页面的HTTP请求数是个起点，这是提升站点首次访问速度的重要指导原则。
2、减少DOM元素的数量
- 1、采用虚拟DOM，避免多次的重排和重绘
- 2、利用语义化标签
- 3、按需加载，减少不必要的渲染
- 4、能利用伪元素实现效果就减少使用Dom
3、减少DNS查找
在DNS查找完成之前，浏览器无法从主机名下载任何东西。
减少不同主机名的数量同时也减少了页面能够并行下载的组件数量，避免DNS查找削减了响应时间，而减少并行下载数量却增加了响应时间
4、避免重定向
重定向会拖慢用户体验，在用户和HTML文档之间插入重定向会延迟页面上的所有东西，页面无法渲染，组件也无法开始下载，直到HTML文档被送达浏览器。 虽然说重定向会减少开发人员的开发复杂度，但是却降低了用户体验度。
5、预加载组件
通过预加载组件可以充分利用浏览器空闲的时间来请求将来会用到的组件（图片，样式和脚本）。用户访问下一页的时候，大部分组件都已经在缓存里了，所以在用户看来页面会加载得更快。
预加载组件的类型：
* 1、无条件预加载，尽快开始加载一些组件
* 2、条件性预加载，根据用户操作猜测用户将要跳转到哪里并据此预加载
* 3、提前预加载，在推出新设计之前预加载
6、减少使用ifarme
1、它是非语义化的
2、会阻塞页面的加载
3、代价高昂，即使是空白的ifarme也是如此
7、禁止404请求
HTTP请求代价高昂，完全没有必要用一个HTTP请求去获取一个无用的响应（比如404 Not Found），只会拖慢用户体验而没有任何好处。
2、CSS方向
1、避免用CSS表达式
2、尽量少使用import
3、避免使用滤镜
4、把样式放在顶部
5、把CSS放在外部
6、压缩CSS
1、减少用import
import是css提供的语法规则，而link是html标签
import引用的CSS会在页面加载完成之后被加载，而link会和页面同时加载
import的兼容性没有link完善
在js中使用dom去改变样式的时候，import不能被dom控制
2、将CSS放在头部
样式表放到文档的HEAD部分能让页面看起来加载地更快。这是因为把样式表放在head里能让页面逐步渲染。
3、JS部分
1、去除重复脚本
2、把脚本放在底部
3、把脚本放在外部
4、压缩脚本
1、去除重复脚本
重复脚本会创建不必要的HTTP请求，执行无用的JavaScript代码，而影响页面性能
2、把脚本放在底部
脚本会阻塞并行下载，HTTP/1.1官方文档建议浏览器每个主机名下并行下载的组件数不要超过两个，如果图片来自多个主机名，并行下载的数量就可以超过两个。如果脚本正在下载，浏览器就不开始任何其它下载任务，即使是在不同主机名下的。 所以最好把js放在底部。
3、把脚本放在外部
用外部文件可以让页面更快，因为JavaScript和CSS文件会被缓存在浏览器。 如果放在HTML文件中，虽然减少了HTTP请求，但是增大了文档的大小，其次，如果JavaScript和CSS在外部文件中，并且已经被浏览器缓存起来了，那么我们就成功地把HTML文档变小了，而且还没有增加HTTP请求数。
4、压缩脚本
压缩具体来说就是从代码中去除不必要的字符以减少大小，从而提升加载速度。代码最小化就是去掉所有注释和不必要的空白字符（空格，换行和tab）。
4、图片
1、优化图片
2、优化CSS Sprite
3、减少在HTML中缩放图片
1、优化图片
尝试把GIF格式转换成PNG格式，看看是否节省空间
2、优化CSS Sprite
对移动端友好
5、Cookie
1、保证cookie尽可能少
2、把组件放在不包含cookie的作用域下
1、保证cookie尽可能少
HTTP头中cookie信息在web服务器和浏览器之间交换。重要的是保证cookie尽可能的小，以最小化对用户响应时间的影响。
- 1、清除不必要的cookie
- 2、保证cookie尽可能小，以最小化对用户响应时间的影响
- 3、注意给cookie设置合适的域级别，以免影响其它子域
- 4、设置合适的有效期，更早的有效期或者none可以更快的删除cookie，提高用户响应时间
6、移动端
1、保证所有的组件都效于25K
2、把组件打包到一个文档里面
7、服务器
1、避免图片SRC属性为空
2、缩短HTTP请求和响应的时间
3、对AJAX使用GET请求
4、尽早清空缓存区
5、使用CDN
6、自己添加HTTP请求头
