一文解答Web性能优化

无论是前端还是后端，性能优化其实是每一个开发都无法避开的大山。另一方面，这种开放式的提问深受面试官的青睐，能够快速地区分求职者的水平。

 

前言

 

网上的答案层出不穷，似乎都只是简单罗列了几个具体的方案，却没有系统的归纳。为了能够系统地归纳这个问题，我问了几个前端大佬，反复斟酌了一下他们的答案。

 

总的来说，我认为web性能优化的方向可以归纳为两个：1、优化资源加载的时间；2、优化代码层级的性能。

 

资源加载优化

我们都知道在浏览器打开一个页面的时候，需要加载各种不同的静态资源，这个时候如果加载的时间太长，就会给用户带来极差的冲浪体验。

 

既然要提高资源加载的效率，那解决的方案自然就是优化资源体积、减少对资源的请求数和提高响应速度。

 

1、优化资源体积

1）压缩

 

我们可以通过webpack的插件压缩代码文件大小，比如CssMinimizerWebpackPlugin、HtmlMinimizerWebpackPlugin等。

 

图片也可以通过降低图片质量、iconfont图标取代图片图标和采用更小体积的文件格式来达到减小体积的目标。

 

另外，服务配置中开启Gzip，压缩传输时的资源大小。

 

2）按需引入

除了压缩文件，还可以通过webpack地Tree shaking，按需引入代码，也能够有效地减少代码包的大小。

 

方法肯定不止上面这些，这里就不一一列举。

 

2、减少请求频率
1）合并CSS、JS文件，减少连接数。

 

2）合理地使用缓存，有些资源更新的频率比较低，可以通过缓存有效缓解请求压力。

 

3）使用懒加载，避免一次性加载所有的资源。

 

3、提高请求效率

1）使用CDN（内容分发网络）

 

简单来说就是在多个地方部署服务器，让用户从最近的服务器获取资源。

 

2）使用HTTP2

 

相较于HTTP1,HTTP2的解析速度更快，多路复用的特性使得它仅仅用一个TCP连接就可以传输所有的数据，使得请求的效率大大提升。

 

代码层级的优化

代码层级的优化，也可以叫做运行时性能优化，这更多的是在我们写代码时要注意的点。

 

1）尽量规避不必要的重排和重绘

 

因为JS引擎线程和GUI渲染线程两者只能有一个在工作，所以重排和重绘是极其消耗性能的，所以尽可能地要避免这两个操作。

 

常见的例子就是Vue和React的虚拟dom。

 

还有个比较容易忽略的场景，就是当父组件更新时，子组件也会跟着更新，这样就导致了多余的渲染，在React中，useMemo和useCallback搭配使用，能有效解决该问题。

 

2）防抖和节流

 

这就很基本了，举个例子吧，比如一般搜索框都会有模糊搜索的功能，大量的change事件会导致超高频率的http请求。

 

方法肯定还有很多，我一时也想不起来了。毕竟能力和见识都还很有限，大家可以在评论区补充一下。

 

写在最后

突然想着这样去归纳，是因为觉得每次被问起这个问题的时候，脑子里都是一片浑浊，想到什么说什么。但是分成两个方向去思考后，觉得清晰了不少，相信这么说也能够令面试官信服。