写给中高级前端关于性能优化的9大策略和6大指标 | 网易四年实践

Posted 2021-08-21 JowayYoung

前言

笔者近半年一直在参与项目重构，在重构过程中大量应用性能优化和设计模式两方面的知识。性能优化和设计模式两方面的知识不管在工作还是面试时都是高频应用场景，趁着这次参与大规模项目重构的机会，笔者认真梳理出一些常规且必用的性能优化建议，同时结合日常开发经验整理出笔者在网易四年来实践到的认为有用的所有性能优化建议，与大家一起分享分享！(由于篇幅有限，那设计模式在后面再专门出一篇文章呗)

可能有些性能优化建议已被大家熟知，不过也不影响这次分享，当然笔者也将一些平时可能不会注意的细节罗列出来。

平时大家认为性能优化是一种无序的应用场景，但在笔者看来它是一种有序的应用场景且很多性能优化都是互相铺垫甚至一带一路。从过程趋势来看，性能优化可分为网络层面和渲染层面；从结果趋势来看，性能优化可分为时间层面和体积层面。简单来说就是要在访问网站时使其快准狠地立马呈现在用户眼前。

所有的性能优化都围绕着两大层面两小层面实现，核心层面是网络层面和渲染层面，辅助层面是时间层面和体积层面，而辅助层面则充满在核心层面里。于是笔者通过本文整理出关于前端性能优化的九大策略和六大指标。当然这些策略和指标都是笔者自己定义，方便通过某种方式为性能优化做一些规范。

因此在工作或面试时结合这些特征就能完美地诠释性能优化所延伸出来的知识了。前方高能，不看也得收藏，走起！！！

所有代码示例为了凸显主题，只展示核心配置代码，其他配置并未补上，请自行脑补

九大策略

网络层面

网络层面的性能优化，无疑是如何让资源体积更小加载更快，因此笔者从以下四方面做出建议。

• 构建策略：基于构建工具(Webpack/Rollup/Parcel/Esbuild/Vite/Gulp)
• 图像策略：基于图像类型(JPG/PNG/SVG/WebP/Base64)
• 分发策略：基于内容分发网络(CDN)
• 缓存策略：基于浏览器缓存(强缓存/协商缓存)

上述四方面都是一步接着一步完成，充满在整个项目流程里。构建策略和图像策略处于开发阶段，分发策略和缓存策略处于生产阶段，因此在每个阶段都可检查是否按顺序接入上述策略。通过这种方式就能最大限度增加性能优化应用场景。

构建策略

该策略主要围绕webpack做相关处理，同时也是接入最普遍的性能优化策略。其他构建工具的处理也是大同小异，可能只是配置上不一致。说到webpack的性能优化，无疑是从时间层面和体积层面入手。

笔者发现目前webpack v5整体兼容性还不是特别好，某些功能配合第三方工具可能出现问题，故暂未升级到v5，继续使用v4作为生产工具，故以下配置均基于v4，但总体与v5的配置出入不大

笔者对两层面分别做出6个性能优化建议总共12个性能优化建议，为了方便记忆均使用四字词语概括，方便大家消化。⏱表示减少打包时间，