前端项目如何性能优化
前言：网上的优化方案
性能优化确实是个老掉牙的问题，但是看看网上的优化方案，我看了很多个，其实都大同小异：
- 网络方面的优化
- 浏览器方面的优化
一、网络方面
1.1 优化请求
使用http2、CDN做全局负载均衡、CDN缓存、域名分片、http缓存、SSG ...
1.2 减少 http 报文大小或者次数
资源合并、雪碧图、字体图标合并、gzip/br压缩、代码压缩、减少头信息、减少Cookie、图片采用低量数据的jpg/webp、去除元数据 ...
二、浏览器方面
2.1 提升浏览器编译器速度：
- 比如对html、css、js等文件进行压缩，js 代码预解析
- 减少文件（这里不是指的压缩）大小，比如懒加载、按需引入、按需加载
- 采用SSR ，将文件解析的一部分责任交给服务器去做
- ...
2.2 减少浏览器渲染引擎的压力：
- CSS放上面、JS放下面（原因在我这篇文章，css在下面会触发Layout，js上面会拖累首次绘制）
- 避免长时间连续操作 dom （会频繁触发Layout），可以采取时间切片的方式缓解
- 动画能用CSS就不用JS（某些浏览器比如谷歌，会有 GPU 加速）
- 渲染引擎和 js 引擎是同一个主线程，避免 js 长时间占用线程，通常而言不能超过 1/60 秒（大部分屏幕绘制帧率是60帧）
- ...
2.3 减少浏览器内存
- 事件委托
- 手动的垃圾回收。
- ...
三、其他优化
其实上述的都是部署后产品模式下的性能提升，是已经定型了的优化。
对于我们前端开发者来说，除了上述的优化方案，我们还可以从开发的角度，在编写代码的时候来优化前端项目：
- 使用好的前端项目调试工具，比如谷歌自带的控制台，它的 performance 是个好帮手；或者谷歌自家出的插件 Lighthouse （要FQ安装），也是不错的。它们都能对前端项目进行客观的评价，从而让我们根据评价进行相应的优化
- 使用好的打包工具或者框架，比如 webpack、gulp 等等来优化我们的前端项目
- 当然啦，个人的经验也是非常重要的，毕竟代码是人写的，不是机器写的，平时我们得注意多积累经验
