前端性能优化是每一个前端开发工程师不可或缺的能力，无论是在面试还是在实际开发过程中。这篇文章总结了我多年开发经验中对前端性能优化的理解。希望对大家有所帮助。因为涉及到很多优化方向，一些细节我就不细说了。如果你有兴趣，你可以了解更多。我不会说太多，正文开始。重要性良好的前端项目性能非常重要，尤其是对于ToC用户而言。良好的用户体验可以极大地提高业务转化率，所以业绩好坏关系到业务收入。对于一家商业公司来说，只要是跟钱有关的事情，都是极其敏感和重要的。衡量方法2020年，谷歌提出了CoreWebVitals，新一代的网络性能体验指标，包括三大指标：LCP、FID、CLS。LargestContentfulPaint(LCP)：衡量加载体验：为了提供良好的用户体验，LCP应在页面首次开始加载后的2.5秒内发生。FirstInputDelay(FID)：测量交互性。为了提供良好的用户体验，页面的FID应小于100毫秒。CumulativeLayoutShift(CLS)：测量视觉稳定性。为了提供良好的用户体验，页面的CLS应保持小于0.1。对于这些指标，可以直接使用浏览器开发工具中的Lighthouse来判断是否达标。这种方式得出的结论快速直观，不侵入原网站，不影响真实用户的性能。但也有缺点。不支持复杂的业务逻辑场景，监控数据量太小，无法还原大部分真实用户的使用情况。因此，大多数企业为了获得真实全面的数据，都会开发一套监控方案，或者使用第三方监控平台，这会对网站的性能造成一定的影响，但可以通过更全面的性能数据进行优化分析。.性能优化方向是基于以上三个体验指标。我们可以从页面加载的生命周期、页面加载前的预处理、加载过程、页面渲染、用户界面交互等阶段进行优化。下面会针对不同的阶段每个阶段进行优化，大家可以根据自己项目的情况选择优化。加载前的预处理使用dns-prefetch和preconnect减少DNS解析，建立TCP连接并进行TLS握手时间，dns-prefetch：告诉浏览器对指定域名进行DNS解析。后续请求域名资源时，可以节省DNS解析时间。preconnect：告诉浏览器与指定域名的服务器建立连接。后续请求域名资源时，可以直接使用已经建立的连接，节省DNS+TCP+TLS的时间使用preload/prefetch让浏览器提前加载需要的资源。Preload可以指示在页面加载后立即需要哪些资源。浏览服务器在主要渲染机制介入之前预加载。这种机制可以让资源更早地加载和可用，并且不太可能阻塞页面的初始渲染，从而提高性能；prefetch利用浏览器空闲时间下载或预取用户近期可能访问的文档。切记preload和prefetch不要混用，它们适用于不同的场景，比如对同一个资源同时使用preload和prefetch会造成不必要的二次下载。加载时1.尽可能减少资源的大小。尽量不重复业务代码本身，提高组件的使用，提示代码的复用率。不仅是JS，CSS样式也是压缩静态资源的。一般脚手架都会默认Processing，自建项目可以查看html中是否有DOM层级的压缩。控制不要太深，减少不必要的DOM使用，充分利用伪元素和CSS检查项目的依赖包是否有重复引用，不同的依赖包可能引用同一个不同版本的包，这可以通过webpack-bundle-analyzer插件进行分析查看，查看UI组件库或者其他库。使用babel-plugin-import插件加载按需组件。使用AsyncComponent只加载首屏组件动态导入一个比较大的第三方模块，import('/modules/echart.js).then((module)=>{})，但是不要滥用，使用它结合实际场景减少第三方库体积，如Moment.js/lodash等，使用轻量级替代方案或自己重新实现对于首审二次开通要求较高，可以拆分首屏请求接口，快速响应首屏需要的字段等数据异步加载使用treeshaking。当我们在项目中引入其他模块时，它会自动抖出我们不用的代码，或者永远不会执行的代码。会在Uglify阶段检测，不打包进bundleHTTPheader精简内部cookies，去除不必要的cookies，将静态资源部署为独立域名，避免请求携带cookiesHTTPheaders启用gzip压缩，可以大大减少量通过网络传输的数据HTTPheadersenablekeep-alive将HTTP升级到2.0，2.0的header压缩减少了数据传输量，可以节省消息header占用的网络流量，并且具有多路复用的优点。2.尽可能减少资源数量。请求太多，需要将一些资源组合在一起，减少请求的数量。但是，在合并的过程中，需要在量与量之间取得平衡。越少越好，最大音量可以控制在一定范围内进行合并。部分体积小的JS/CSS可以内联到HTML中。减少请求次数减少预检请求OPTIONS的发起。可以在服务器上设置Access-Control-Max-Age字段或者发起一个简单的请求来取消无效的请求。表单提交点击频繁，切换路由时有未完成的请求。这些会产生无效的请求，对服务器和用户体验都不利。缓存策略启用http强缓存和协商缓存，针对不同类型的资源使用不同的缓存策略静态资源启用CDN服务对于不经常变化的数据，包括外部的JS/CSS资源可以被前端浏览器缓存以减少请求，但是这样的缓存需要清除和更新。3.其他资源优化webp图片的使用，针对支持的设备使用webp图片裁剪，并做好相应的使用场景项目中裁剪的大图不要打包，上传到单独的静态资源服务器或者CDN压缩图片上传前切记不要使用原图来设置图片标签的大小，防止图片加载时页面布局抖动，影响CLS索引如果图片的值超出屏幕，开启懒加载。对于项目中大量的小图标，可以使用iconfont字体方案。使用第三方字体库时，尽量按需生成文字。加载字体时，页面上的文字会出现一定程度的闪烁和抖动。使用preload在进入需要使用的页面之前提前加载。页面渲染时开启骨架屏，提升用户体验，避免加载渲染时的白屏阶段。对于滚动到大量列表，尽可能使用虚拟列表。使用CSS3动画和requestAnimationFrame监听帧变化以在正确的时间渲染合理使用CSS，避免通配符，最大化样式继承，使用更少的标签选择器，减少深度嵌套等用户界面交互，减少页面重排、重绘、防抖和throttling合理使用requestAnimationFrame动画代替setTimeout开启GPU加速。以下属性（CSS3转换、CSS33D转换、不透明度、画布、webGL、视频）可用于CSS以触发GPU渲染并减少JavaScript脚本执行时间。耗时任务放在WebWorkers中执行未来一定时间内需要动画的元素，并标记为will-change，让渲染引擎为这个元素生成一个单独的层，最后这个文章优化前端性能列出了很多方向，还有很多其他的东西没有涉及，比如小程序，Vue/React框架中的特殊其他优化，app原生能力优化。上面对优化方向的描述比较简洁。对具体的实际操作和原理感兴趣的同学可以多学习。面对这么多优化方向，该如何选择。没有所谓的绝对优化。需要结合当前项目的应用场景和整个项目的性能分析，找出某个方向的不足，进行有针对性的优化，选择合适的方案。希望大家能够找到适合自己的优化方向，对项目进行适当的优化。如果您看完这篇文章觉得有用，记得点赞支持哦。说不定哪天会用到~关注前端开发，分享前端相关技术干货，公众号：南城大学前端（ID：nanchengfe）指的是新一代WebPerformance体验指数前端性能优化请求优化
