前端性能优化常用总结

网络方面

web应用，总有一部分时间浪费在网络连接和资源下载上。往往建立一次网络连接是需要花费时间成本的，而浏览器同一时间发送的网络请求的数目总是有限的，所以，这个层面上的优化可以从减少请求数目开始

减少请求数目

1. 合并js文件
2. 合并css文件
3. 使用css sprite
4. 对于一些小的图片使用base64来表示

前两个可以通过webpack这种打包工具来进行打包，精灵图有专门的制作工具。webpack也有将图片转为base64的插件。

减少资源体积

1. html文件压缩
2. js文件压缩
3. css文件压缩
4. 图片压缩

优化缓存

1. DNS缓存
2. CDN部署和缓存
3. http缓存

由于浏览器会在DNS解析步骤中消耗一定的时间，所以对于一些高访问量都网站来说，做好DNS的缓存工作，会一定程度上提高网站效率。

CDN作为静态资源文件分发的网络，本身就已经提升了网站静态资源获取的速度，加快了网站的加载速度。

http缓存：给资源设定缓存时间，防止在有效的缓存时间内对资源进行重复下载，从而提升

渲染和DOM操作方面

优化网页渲染

1. css文件放在头部，js文件放在尾部或者是异步加载
2. 尽量避免内联样式。

css文件放在头部加载，可以保证在解析DOM的同时，解析css文件。因为CSS会阻塞整个DOM的渲染，但是不会阻塞DOM的解析。所以将css文件放在头部进行解析，可以加快网页的构建速度。假设将其放在尾部，那时DOM树几乎构建，这时就得等到CSSOM树构建完成，才能够继续下面的步骤。

js放在尾部：js文件不同，将js文件放在尾部或者异步加载的原因是JS（外链或内联）会阻塞后续DOM的解析，后续DOM的渲染也将被阻塞，而且一旦js中遇到DOM元素的操作，很可能会影响。

DOM操作的优化

1. 尽量避免重排和重绘。
2. 使用事件代理
3. 函数防抖和函数节流

数据方面

图片加载处理

1. 图片懒加载
2. 图片预加载