前言前端性能优化是一个听起来很崇高的词，也确实是，因为它要求性能高，范围大。输出了大量优质内容，供大家参考。笔者最近也在学习和了解这方面的内容。以下内容如有理解不当之处，欢迎在评论区指正！！！前端性能优化的内容将分为两部分。本来打算一篇完结的，结果发现前置知识部分已经占了3000+字，所以这篇文章主要讲解一些必要的前置内容。下一篇：如何做前端性能优化（下）——黄龙优化前端性能到底是什么？其实前端性能优化的核心是两点：保证资源的加载速度更快：实现的越快，渲染的速度也就越快，view就会显示的越快。保证更快的视图渲染/交互速度：用户与页面进行交互，前提是页面要被渲染二是页面需要尽快反馈，目的是保证良好的体验用户，这些核心内容可以从以下陈词滥调的问题中扩展出来。从输入URL到页面加载之间发生了什么？相信到现在为止，大家对这个问题的回答可以说是滔滔不绝（如果不是请无视）！但是，每个人回答的方向和侧重点应该是不同的。比如之前在B站听到过冬大佬对这个问题的看法和分析角度，比较深入，比较广泛。这里简单总结一下核心内容：进行DNS解析，建立TCP连接，客户端发送HTTP请求，服务端响应HTTP资源浏览器，获取响应内容，对以上任意一点进行解析和渲染，其中可以无限扩展和延伸，但是点击这就是现在真正需要的。性能指标RAIL模型Google提出了RAIL模型用于前端页面性能的评估。核心内容如下：ResponseResponseAnimationAnimationIdleIdleLoadLoadingGeneralperformanceindicatorsPerformanceindicators其实有很多内容，这里我们参考比较常用的Type:FirstPaint(FP)经过渲染过程确认当前响应资源要被渲染，渲染过程会先创建一个空白页面。通常，这个创建空白页面的时间点被称为FirstPaint，简称FP所谓的白屏时间实际上是指从创建这个空白页面到浏览器开始渲染非空白内容的时间，比如第一次内容绘制（FirstContentfulPaint，FCP）当用户看到页面上正在绘制一些“内容”元素时，比如页面背景发生变化时。时间点与白屏不同。可以是文字的第一次绘制，也可以是SVG的第一次出现，也可以是Canvas的第一次绘制，也就是页面上绘制第一个像素的时候，这个时间点叫做FirstContentPaint，简称FCPFirstScreenTime/LargestContentfulPaint(LCP)LCP是一种新的性能指标。LCP侧重于用户体验性能指标。与现有指标相比，更容易理解和推理。当第一屏的内容全部绘制完成时，这个时间点称为LargestContentPaint，简称LCP。最大内容的绘制要在2.5s内完成。FirstInputDelay(FirstInputDelay,FID)FID是在用户第一次在页面上进行交互时（点击链接，点击按钮，或者自定义的基于js的事件），第一次输入延迟应该是在浏览器实际开始处理事件后的100毫秒内完成CumulativeLayoutShift(CLS)CLS用于衡量视觉稳定性，以提供良好的用户体验Cumulativelayoutshift应保持在0.1或更小TimetoFirstByte(TTFB)指浏览器开始接收服务器响应数据的时间（后台处理时间+重定向时间）是反映服务器响应速度的重要指标。如果TTFB时间超过500ms，用户在打开网页时会有明显的等待感。一些门槛，那么接下来的问题就是我们如何获取一个网站的具体性能指标数据呢？为了使用工具或API很方便。当然，你可以自定义页面性能指标的计算方式。比如有的通过计算当前页面DOM的节点总数和嵌套层数来计算一个网站的得分等，这里不再赘述Performancepanel（谷歌）的具体参数介绍，可以看大鲨鱼@LX的文章，写的很详细。这里只是一些核心要点。FlamegraphNetworksindicators可以通过Networksindicators查看对应服务器加载的资源的相关信息：可以移动鼠标或者点击特定的请求查看加载时间和加载速度，如下：mousemove:mouseclick:Framesindicators可以通过Framesindicators查看渲染页面每一帧时CPU消耗的时间和Duration持续时间等信息，如下图：图1：图2：Timingsindicators通过Timingsindicators，你可以查看上面列出的一些性能指标的值，如下：首次绘制（FirstPaint，FP）首次内容绘制（FirstContentfulPaint，FCP）首次屏幕时间/最大内容绘制（LargestContentfulPaint，LCP）HTML文档完全加载和解析的时候(DOMContentLoaded,DCL)主指标主指标包含加载过程三个阶段：导航阶段主要是进行ss响应头的数据，在退出旧页面前进行一些清理操作；解析HTML文件阶段主要是解析HTML数据，解析CSS数据，执行JavaScript生成DOM和CSSOM生成位图阶段主要是合并生成的DOM和CSSOM，包括布局（Layout）等一系列操作、分层、绘图和合成。Lighthouse面板（谷歌）最大的优点就是各种数据信息非常齐全，但这也是它最大的缺点，就是数据信息非常庞大，需要自己过滤。对于不熟悉的开发者来说，还是需要一定的学习成本的。相反，灯塔面板中的信息比较简洁。除了测试结果，还会提供相应的改进方案。这真是考虑周全。主要测试五个方面：Performance（性能）Accessibility（可访问性）Bestpractice（最佳实践）SEO（搜索引擎优化）ProgressiveWebApp（渐进式网络应用）可以通过Analyzepageload按钮开始检测页面应用，这里是掘金首页示例：下面是Performance性能示例，简单看一下包含的具体内容。限于篇幅，其他内容可自行测试阅读。性能表现（类推）从性能指标的数据来看，只有累积布局偏移（CumulativeLayoutShift，CLS）符合要求，其他指标呈现黄色和红色，说明还有提升的空间，尤其是第一个屏幕时间为2.9秒，已经超过了相应的阈值2.5秒。性能指标数据如下图所示：甚至提供了相应的诊断结果，例如提到的图片没有对应的宽高：使用NodeCLI甚至支持在Node环境下运行，如果有兴趣，自己去npm查看文档就可以了，这里就不过多介绍了。性能指标数据采集上面的性能指标工具已经足够强大，覆盖信息也很全面，但是如果我们需要采集和上报页面性能指标数据呢？第一条经验法则必须通过绩效指标工具收集。一旦你要检测性能指标数据，就意味着一个来自不同客户端统计结果的集合（除非你愿意一个一个的手动记录和收集数据，呸，你愿不愿意做你的leader），最理想的方式当然是自动收集和报告，也就是说这应该是代码的工作！！！既然有这样的需求，就一定有相应的解决方案，请继续往下看！PerformanceAPI实际上在浏览器端的全局对象窗口中有一个名为performance的属性。它是一种用于支持IE9及以上和webkit核心浏览器的机制，用于记录页面加载和解析过程中的关键时间点。caniuse中compatibility的表现如下：这里简单介绍一下window.performance相关的一些核心属性和方法。performance.timing属性performance.timing属性提供了很多关键的时间信息，我们可以简单的通过这些时间节点计算出需要的性能指标数据（不一定准确），计算方法如下：const{domainLookupStart,domainLookupEnd,navigationStart,loadEventEnd,responseStart,responseEnd,connectStart,connectEnd,redirectStart,redirectEnd,domContentLoadedEventEnd,domComplete,}=performance.timing//DNS查询时间DNS=domainLookupEnd-domainLookupStart//TCP连接建立时间TCP=connect/pageredirectEnd/connectTimeRedirect=redirectEnd-redirectStart//首字节结束时间TTFB=responseStart-navigationStart//首次渲染时间FP=responseStart-navigationStart//DOM解析时间DOM=domComplete-responseEnd//首屏时间LCP=loadEventEnd-navigationStartperformance.getEntries()方法performance.getEntries()方法可以获得所有资源请求的时间数据，如下：点击查看具体资源信息，其他属性与上述内容重复，计算方法不再另行介绍，如下：performance.now()方法performance.now()方法可以准确计算执行程序的时间，它会以微秒（百万分之一秒）为单位返回时间，也就是比较准确，这也是它和Date.now()不同的地方：Date.now()返回的是数字ofmillisecondssinceJanuary1,197000:00:00(UTC)tothecurrenttime表示Date.now()取决于系统的当前时间，可以认为是修改的，所以它的毫秒不是精确的pperformance.now()的时间以恒定速率递增，不受系统时间影响//Date.now()leta=2,b=3;constbegin=Date.now();console.log('a+b=',a+b);console.log('time=',Date.now()-begin);//2//performance.now()leta=2,b=3;constbegin=performance.now();console.log('a+b=',a+b);console.log('time=',performance.now()-开始);//0.10000002384185791WebVitalsweb-vitals库是Google推出的一个小型（约1.5K）模块化库，用于衡量真实用户的所有WebVitals相关指标。重要的核心指标如下（一张图胜过千言万语）：接下来我们使用npxcreate-react-appmy-react-app创建一个react项目，然后观察它的项目结构：显眼的reportWebVitals.js？进入文件查看后，你会发现我们需要的核心性能指标都在里面：最终前端性能优化这个内容是我之前一直打算写的。毕竟，缺乏知识。到现在为止，也算是边学习边输出。下一篇文章会总结一些性能优化的解决方案！！！如果以上内容对你有帮助，就来一键三连，需要光的力量！！！
