前言无论是前端还是后端，性能优化其实都是每一个开发都绕不开的一座大山。另一方面，这种开放式问题受到面试官的青睐，可以快速区分求职者的水平。网上的答案层出不穷，似乎只是罗列了几个具体的解决方案，却没有系统的归纳。为了能够系统地总结这个问题，我问了几个前端大佬，反复思考他们的答案。总的来说，我认为web性能优化的方向可以归纳为两个：1、优化资源加载时间；2.优化代码级性能。资源加载优化我们都知道，浏览器打开一个页面时，需要加载各种静态资源。如果此时加载时间过长，会给用户带来非常差的上网体验。既然要提高资源加载效率，解决方案自然是优化资源量，减少资源请求次数，提高响应速度。1.优化资源体积1）压缩我们可以通过webpack插件压缩代码文件大小，比如CssMinimizerWebpackPlugin、HtmlMinimizerWebpackPlugin等。图片也可以通过降低图片质量、将图片图标替换为iconfont图标、采用较小的文件格式。另外，在服务配置中开启Gzip，压缩传输时的资源大小。2）按需导入除了压缩文件，还可以通过Webpack的Treeshaking按需导入代码，同样可以有效降低代码包的大小。方法肯定比上面的多，这里就不一一列举了。2、降低请求频率1）合并CSS和JS文件，减少连接数。2）合理使用缓存。有些资源更新频率较低，通过缓存可以有效缓解请求压力。3）使用延迟加载来避免一次加载所有资源。3、提高请求效率1）使用CDN（ContentDistributionNetwork）简单来说就是在多个地方部署服务器，让用户就近获取资源。2）与HTTP1相比，使用HTTP2，HTTP2的解析速度更快，多路复用的特性使得只用一个TCP连接就可以传输所有的数据，大大提高了请求的效率。代码级优化代码级优化也可以称为运行时性能优化，这是我们写代码时比较需要注意的一个点。1）尽量避免不必要的重排和重绘，因为JS引擎线程和GUI渲染线程只有一个可以工作，所以重排和重绘是非常耗性能的，所以尽量避免这两个操作。一个常见的例子是Vue和React的虚拟dom。还有一个场景很容易被忽略，就是父组件更新时，子组件也会更新，从而导致冗余渲染。在React中，useMemo和useCallback可以有效解决这个问题。2）防抖和节流是很基础的。比如一般的搜索框都会有模糊搜索功能，大量的变化事件会导致超高频的http请求。肯定还有很多办法，一时想不出来。毕竟能力和见识还是很有限的，大家可以在评论区补充一下。写到最后，突然想到这样总结，因为感觉每次被问到这个问题，脑子里都是浑浊的，想到什么就说什么。但是经过两个方向的思考，感觉清晰了很多，相信这样说也能说服面试官。
