＆ensp;＆ensp;＆ensp;＆ensp;具有良好用户体验的网页是必须为前端开发学生做的事情。开始使用第一个屏幕。我们将介绍一些网络性能指标，以及如何计算和测量这些指标，以通过不断地优化网页。监视和优化这些性能数据以改善用户体验。
＆ensp;＆ensp;＆ensp;＆ensp;首先，让我们查看一组API，导航正时API提供用于测量网站性能的数据指标。使用这组API比我们传统的基本手段相比，可以获得更多有用和准确的数据，并可以制作更多的数据统计信息。导航正时API的兼容性也很好。它与我们当前常用的浏览器兼容，包括烦人的IE9+.complete兼容表，请参见链接：
当我们的资源启动访问（avarigationStart）时，完成加载过程（loadeventend）的资源将通过该过程：
以下图片将是对此过程的标准描述，也是对前端经典面试问题的标准答案。你知道?
＆ensp;＆ensp;＆ensp;＆ensp;以上是W3C导航时间第一版的处理模型（1级）。从当前的浏览器窗口卸载旧页面到新页面，整个过程分为9个阶段：
＆ensp;＆ensp;＆ensp;＆ensp;截至2012年底，1级的规格已经使用了将近10年，并且已经完成了其历史使命。今年3月20日（2022年3月10日）正式进入Lelevel2的CustomDraft，与Level1相比，Level2更准确。
Level2处理模型如下：
Level2将整个过程分为11个阶段，每个阶段的详细信息：
1NavigationStart表示，上一个文档末尾的UNIX时间戳已卸载。如果没有文档，则此值将等于FetchStart.2unloadeVentStart代表上一个网页（与当前页面相同的域）卸载的时间戳。如果没有以前的网页卸载或上一个网页的不同域和当前页面，则该值为0.3unloadeVentendEnd返回到上面的页面卸载时间绑定并恢复返回。第一个http重定向时间。有一个跳跃的重定向和相同域名重新介绍的重定向，否则值为0.5 redirectend，当完成完成时的最后一个http重定向时间。相同的域名，否则该值为0.6FetchStart浏览器，以准备使用HTTP请求来获取文档的时间，该文档在选中本地cache.7domainlookupstartdomainlookupendns域名域名查询开始/结束时间。如果本地缓存（即没有DNS查询）或持久连接，则等于FetchStart.8ConnectStarthttp（TCP）启动/重新建立连接时间。如果它是一个长时间的连接，则9ConnectEndHTTP（TCP）等效于fetchstart值。10secureconnectionstarthttps连接开始。如果不是安全的连接，则值为0.11 requeststtttp请求真实文档的开始时间（完成），包括从局部读取缓存。12RSponsEttTTP开始接收响应时间（获取第一个字节），包括阅读，13ResponsendHTTP从局部区域进行缓存，响应了接收的完整时间（获取最后一个字节），包括本地阅读cache.14domloading开始分析呈现DOM树的时间。此时， 文档。DreadyState开始加载并抛出ReadyStateChange相关事件。15DomlnterActive为了完成对DOM树的分析时间，文档。Dready.DreadyState将变为Internet，并抛出了ReadyStateChange相关的事件。请注意，仅是对DOM树的分析。目前，尚未启动网页上的资源。16domComcontentLoadEdeDeventantArtdom之后，在网页中加载资源的时间是在投掷DomContentLoaded Event之前发生的。17DomcontentLoadEdeDeventEnddomAnalitymon完成，webpage中的资源加载时间（例如JS脚本负载执行）18domCompleteDOM树分析已完成，并且资源已准备就绪。Document .. ReadyState变得完整，并抛出ReadyStateChange相关的事件。19 LoadeVentStartload事件已发送到文档，即负载回调函数开始执行的时间。20loadeLoadeDendEndload事件的时间已完成。
＆ensp;＆ensp;＆ensp;＆ensp;当您在计算机中运行此代码时，您会发现输出实际上是负面的，因为本地服务的访问速度很快，因此整个页面的加载加载时间几乎为0。我们可以在内部保存JavaScript脚本您的浏览器书签。找到网站并等待负载后，单击书签以输出控制台正常页面的普通页面。
＆ensp;＆ensp;＆ensp;＆ensp;以下是我们通过上述脚本获得的6789毫秒。那么此数据是否正确？
下图的右下角的时间是我们计算的浏览器开发人员工具的数据：
＆ensp;＆ensp;＆ensp;＆ensp;我们可以根据先前的资源加载流程图加载任何有意义的时间，例如资源请求的时间消耗。您可以使用domcomplete减去domloading。
＆ensp;＆ensp;＆ensp;＆ensp;我们之前使用的API提供的数据是所有毫秒级别，并且获得了API废弃的识别。该对象提供纳米级别的数据统计信息。让我们一起实现以下代码。
＆ensp;＆ensp;＆ensp;＆ensp;我们运行上述代码以在控制台中获取以下数组。数组的第一种类型是导航，这意味着我们输入由URL通过浏览器的地址栏打开的页面。它可以通过单击链接，表单提交，脚本初始化，但不包括刷新页面，撤退等等。更多类型的描述，请参见MDN。
＆ensp;＆ensp;＆ensp;＆ensp;上图中的名称属性需要在此处解释。您可以看到数据的第一项表示资源请求的地址。另外两个是performancentry对象上的特殊徽标。
＆ensp;＆ensp;＆ensp;＆ensp;我们还可以通过指定EntryType获取相应的信息。以下代码只会获得两个元素：第一绘画和先进paint：
＆ensp;＆ensp;＆ensp;＆ensp;当我们在上一篇中输出表演的对象时，我们已经看到了非第一绘画和先进绘画的名称。这两个是典型的前端性能指标，我们有几个表格：
首次绘制的fpfirst Paint是指从请求网站开始到屏幕的浏览器时间，以渲染第一个Pixel.fcpfirst content -forts Fundful Paint，第一个内容绘图，是指浏览器的时间渲染时间第一个内容。该内容可以是文本，图片，背景图片，非蓝色帆布，SVG等在fiewport.fmpfirst有意义的油漆中，首次有效地绘制的是指网页渲染的第一个密钥内容的时间。从FCP差异，fmp是指第一个有意义的内容绘图。例如，示例。博客网站引用文本。视频网站的关键内容是指视频播放器。电子商务网站的关键内容是指产品列表或产品详细信息。由于复杂的计算，因此获得的结果不是很准确，并且FMP在Lighthouse中被LCP替换为Lighthouse6.0.DCLDOMCONTENTENDENTENSENTENDENSTENTENDENDENSENTENDENDENDENDENDENDENDENDENDENDENDENDENDENDENDENDENDENDENDENDENDENDENDENDENDENDENDENDENDENDENDENDENDENDENS in DOM in DOM IN IN IN IN IN IN IN IN完成分析后，网页加载并触发此事件，但不包括样式，图像等。lload指的是在完成所有，样式，图像和其他内容的所有加载后触发此事件。下面的图是捕获的数据。控制台的性能选项卡：
＆ensp;＆ensp;＆ensp;＆ensp;上述性能指标都有问题，也就是说，我们只能在on载方式之前获取性能数据，并且将无法获得更改的数据。因此，在HTML5中，html5，performanceObserver对象，新添加到我们可以使用观察者的模式在每次更改后获取数据。
下面的信息输出是相应的FP和FCP信息：
下面的信息输出包含此脚本加载的性能信息：
下面的信息输出包含在此处执行时的耗时：
＆ensp;＆ensp;＆ensp;＆ensp;W3C标准仅是推荐的标准，并且没有执行能力。但是，网络标准领域的所有浏览器制造商都非常重视推荐的标准并积极响应，但并非所有标准都可以适应。- 末端开发人员，我们还必须注意这些API当前所在的阶段，兼容性以及我们在使用一些新API时是否可以运行到生产环境。标准：
＆ensp;＆ensp;＆ensp;＆ensp;公众应讨论和修订标准的制定，以讨论最终工作的形成。规格处于稳定状态，可以执行实验实施。经过连续的验证和恢复，它将进入推荐建议的阶段。W3C成员将审查此标准。由候选标准召集，更认真地将直接退回原始草稿阶段或彻底删除。审查后，W3C董事将宣布该规范将是W3C推荐标准。
＆ensp;＆ensp;＆ensp;＆ensp;在本文中，我们介绍了与网页性能相关的几个指标，还介绍了API和使用方法从毫秒到纳米秒。浏览器提供的性能功能，Chrome浏览器还内置在Lighthouse功能中以为我们的Web得分性能。我们通常可以完全应用这两个工具，因此，当我们需要自定义一些私人性能监控平台时，API可以发挥更大的功能。
＆ensp;＆ensp;＆ensp;＆ensp;突出显示技术交易合规前端团队（GFE）。团队的平均年龄为27岁。丹尼尔斯（Daniels）在各自的领域被深深地耕种，并且还有刚刚毕业的小牛。技术驱动产品的目的是降落并创建完整的前端技术系统。
版权属于作者。对于业务重印，请与作者联系以获得授权。请指示非商业重印的来源。
原始：https：//juejin.cn/post/7098593440027377695