前言：网上的优化方案

性能优化确实是个老掉牙的问题，但是看看网上的优化方案，我看了很多个，其实都大同小异：

• 网络方面的优化


• 浏览器方面的优化

一、网络方面

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 等等来优化我们的前端项目


• 当然啦，个人的经验也是非常重要的，毕竟代码是人写的，不是机器写的，平时我们得注意多积累经验

相关链接

【原】雅虎前端优化的35条军规