近期对前端性能优化的总结

前端性能优化不管是在面试中还是在实际开发过程中，都是每一个前端开发工程师都必不可少的能力。本文总结本人多年开发经验中对前端性能优化的理解，希望对大家有所帮助，因涉及的优化方向较多，针对某些细节不再详细说明，大家有兴趣的可深入了解，话不多说，正文开始。
,一个好的前端项目性能非常重要，特别是面向ToC的用户，好的用户体验可以极大的提高业务转化率，从而性能的好坏关乎到业务的营收。对于一个商业性公司只要是和钱相关，都是极其敏感且重要的。
,2020年 Google 提出了新一代 Web 性能体验指标 Core Web Vitals，其中包括了 LCP、FID、CLS 三大指标。,,针对这些指标直接可以通过浏览器开发工具中的Lighthouse得出是否达到标准。通过这样的方式得出的结论快速直观，对原本网站无侵入，不影响真实用户的性能。但是也有缺点，不支持复杂的业务逻辑场景，监测的数据量太小，不能还原大部分真实用户的使用情况。
,所以为了得到真实且全面的数据，大部分的公司都会开发一套监测方案，或者使用第三方监测平台，这样会对网站有一定的性能影响，但是可通过更全面的性能数据分析可优化的方向。
,基于上面的三个体验指标，我们可以从页面加载的生命周期进行优化，页面加载前的预处理，加载过程中，页面渲染时，用户界面交互等几个阶段，下面将针对不同的阶段进行优化，大家可根据自己项目的情况针对性的选择优化。
,使用 dns-prefetch、preconnect 减少DNS解析，建立TCP连接以及执行TLS握手时间，dns-prefetch: 告知浏览器对指定域名进行DNS解析。当后续请求该域名资源时可省掉DNS解析的时间。preconnect: 告知浏览器与指定域名的服务器建立连接。当后续请求该域名资源时，可直接使用已建立好的连接，省掉了 DNS+TCP+TLS 的时间,使用 preload/prefetch 让浏览器提前加载需要的资源，preload可以指明哪些资源是在页面加载完成后即刻需要的，浏览器在主渲染机制介入前就进行预加载，这一机制使得资源可以更早的得到加载并可用，且更不易阻塞页面的初步渲染，进而提升性能；prefetch其利用浏览器空闲时间来下载或预取用户在不久的将来可能访问的文档。切记不要将 preload 和 prefetch 进行混用，它们适用于不同的场景，如对同一个资源同时使用 preload 和 prefetch 会造成不必要的二次下载。,1. 尽可能的减小资源的大小,2. 尽可能的减少资源的次数,开启http强缓存与协商缓存，对于不同类型的资源使用不同的缓存策略,静态资源开启CDN服务
,对于不常变化的数据包括外部JS/CSS资源，可进行前端浏览器缓存，减少请求，但此类缓存需设定好清除及更新的机制
,3. 其他资源优化,开启骨架屏，提升用户体验，避免加载到渲染过程中都是白屏阶段
,对于大量列表的滚到使用虚拟列表
,尽量多使用CSS3动画
,使用 requestAnimationFrame 监听帧变化，使得在正确的时间进行渲染
,合理使用CSS，避免通配符，最大化样式继承，少用标签选择器，减少过深嵌套等
,本文对前端性能优化的方向列举了不少，除此之外也还有很多是没有涉及到的，比如小程序内，Vue/React框架中特殊的其他优化，配合App原生能力优化等。以上优化方向的说明就较为简洁，具体的实操及原理有兴趣的同学可以多研究，面对这么多的方向优化，究竟如何选择呢。
,没有所谓的绝对优化，都需要结合当前项目的应用场景及对项目全量的性能分析，找到某个方向的不足，针对性的优化，选择合适的方案。希望大家都能找到自己合适的优化方向，把项目优化的妥妥的。