性能优化是前端领域永恒的热门话题。本系列文章将分为三个章节：监控、加载性能优化、运行时性能优化。从实际的角度，我们会详细分享，如果你要优化，你必须有指标。有了监控，才能客观系统地分析性能瓶颈，验证优化结果等。那么我们就从如何全面监控和优化方法论说起。前端性能又分为加载性能和运行时性能。我们可以从一个经典的面试问题开始：用户输入url并按下Enter键看到页面后发生了什么？DNS解析：将域名解析成ip地址，建立TCP连接，发送http请求，服务器解析http请求并返回结果，浏览器解析并返回结果，我们需要做的就是记录这些过程的耗时：现代浏览器为我们提供了性能对象，方便地提取这些数据。兼容性就在这里。计时对象详细记录了每个节点的时间戳。减去相关时间节点即可得到相应进程的耗时。作为开发，我们通常比较关注从服务器读取的时间，所以以fetchStart为起点。下面是一些常用的时间计算：const{fetchStart,domainLookupStart,domainLookupEnd,domInteractive,domContentLoadedEventStart}=performance.timing//DNS查找时间domainLookupEnd-domainLookupStart//白屏时间domInteractive-fetchStart//首屏时间domContentLoadedEventStart-fetch以上计算时间多用于SSR渲染，但现在前端还有相当一部分SPA结构，是通过JS在客户端渲染的。为了更好的满足监控指标与用户体验的契合。Google提出了FP/FCP/FMP/TTI等指标来帮助我们统计相关数据。我们经常使用以下两个FCP（FirstContentfulPaint）来第一次绘制任何文本、图像、非空白画布或SVG。这是用户第一次看到有意义的内容的时间。通常这个时间可以看作是白屏的持续时间。获取APIwindow.performance.getEntriesByType('paint')TTI(TimeToIntercative)Intercative（可用时间），用于标记应用程序已经执行视觉渲染并能够可靠地响应用户输入的时间点。我们通常使用这个值作为页面的首屏时间。浏览器并没有直接提供api来获取。但是谷歌提供了github.com/GoogleChrom…来获取它。运行时性能测量大多数企业不需要运行时监控。但是一些重业务场景，比如文本编辑器、在线课堂、画板等。Tonka对用户体验的危害极大，用户更不能接受。对于这类业务，我们可以在开发测试场景时使用chrome的性能工具来测试、检测、定位性能卡顿。但是我们还是需要用户测试的监控来掌握业务线的实际运行情况。requestAnimationFrame通常用于实现动画。但在这里我们也可以将其用作帧率监视器。简单思路如下：consteveryFrameCostTime=[]lettimestamp=Date.now()functiondetect(){constnow=Date.now()constcost=now-timestamptimestamp=noweveryFrameCostTime.push(cost)requestAnimationFrame(detect)}当cost连续多次高于特定阈值时，可视为页面卡顿。这个要看具体的业务场景。这也有局限性。由于幸存者偏差，当页面冻结时，监控代码本身不起作用。数据发送常见的数据发送方式通常是向服务器发送img请求，然后将数据拼接成url参数发送过来。现代浏览器也提供了navigator.sendBeacon(url,data)方法来发送数据。在unload场景下，它甚至不会阻塞下一页的加载。为了保证基础库的健壮性和不影响自身页面的性能。我们要做好聚合和节流。数据发送策略和存储当用户基数太大，或者统计不需要那么大的数据量时，可以随机控制数据发送来决定是否发送数据。或者将埋藏的数据加密存储在本地，用户在需要时主动发送给开发者，以排查问题，减轻数据服务器的压力。小辈们。帮助了很多人学习和成长。我意识到有很多经验和知识值得和大家分享，我们也可以通过我们的能力和经验来解答大家在IT学习中的很多困惑，所以在繁忙的工作状态下，我仍然坚持整理和分享各种东西。我可以免费分享最近的前端面试题，包括HTML、CSS、JavaScript、服务器端和网络、Vue、浏览器、数据结构和算法等等，还在整理和更新中。希望大家都能找到自己喜欢的工作。有需要的朋友点此免费获取题目+解析PDF。篇幅有限，仅展示部分截图：点此免费获取标题+解析PDF。
