前端性能优化总结

一、感知方面的优化

打开一个页面加载时间很长可以通过一些方式让用户感觉没这么慢。
1、添加loading的gif图片提示加载中。
2、骨架屏，使用一张gif图片来替代加载中的状态，当加载成功后隐藏图片。

二、HTML优化

1、压缩HTML代码，删除不必要的注释。
2、使用语义化标签，例如header、main、footer、aside、nav等。
3、减少dom的数量和层级，减少重拍重绘，网页绘因为元素的尺寸、布局、显示和隐藏而重新布局就叫做重拍，会引起浏览器重新加载dom树，元素的外观发生变化就叫做重绘。
4、减少HTTP请求次数，将多个css文件和javascript文件合并为一个文件，使用浏览器缓存。

三、javascript优化

1、减少dom的访问，使用js直接访问dom并修改会造成页面的重绘和重排。
2、根据业务场景使用防抖和节流。
3、大量长列表数据使用虚拟列表加载，防止页面卡顿。

四、css优化

1、减少css选择器嵌套，css文件压缩。
2、删除不必要的单位和0.

五、图片资源优化

1、使用雪碧图加载小图标，雪碧图只会使图片加载一次，如果使用多个图标，会导致多次请求资源加载。
2、图片懒加载，只有图片移动到可视区域时，再进行加载，加载的过程可以添加一个loading效果。
3、简单的icon可以使用svg或者字体图标，就和设置字体一样，可以直接修改font-size和color。

六、构建工具优化（webpack）

1、缩小css文件，使用css-minimizer-webpack-plugin插件可以压缩和去重css代码文件。
2、压缩javascript文件，使用terser-webpack-plugin插件可以压缩和去重javascript代码文件。
3、使用tree-shaking去除无用代码，减少代码体积。
4、使用 webpack-bundle-analyzer 来查看打包后的 bundle 文件的体积，然后进行相应的体积优化。
5、使用GZip压缩代码。
6、一些带三方库文件可以使用cnd加载，引入UI组件库时使用按需加载。

七、浏览器缓存策略

使用强缓存和协商缓存。

八、服务器和资源加载优化

1、静态资源采用cnd加载，减少代码体积。
2、使用服务端渲染。