建立一个美丽的，功能丰富的网站比以往任何时候都容易。不久前，您还需要启动一个文本编辑器，手工编写大量的HTML、CSS和JavaScript。现在，您可以使用WYSIWYG工具和第三方库，使开发更加简单。另一方面，你很难看到你网站上的所有内容，而性能却可以受苦吧好消息是，现代web浏览器公开了许多性能数据，这些数据可以帮助您了解web页面的性能。随着Browser Insights今天的发布，我们可以从web浏览器的角度分析性能以及最终用户的实际体验。在这篇文章中，我们将深入探讨如何考虑性能和如何利用web中的计时api浏览器。怎么做web浏览器测量性能在过去，开发人员评测性能的唯一方法是拦截请求并测量从页面加载开始到加载事件结束的时间。今天，我们可以使用现代浏览器支持的webapi。这是名为performanceapi的web标准的一部分。performanceapi由一组单独的API组成，其中包括：导航计时（用于与页面和导航相关的计时信息）、资源计时（用于有关加载应用程序资源的计时数据）、绘制计时（在页面构造期间提供有关绘制操作的计时信息）博客文章，我们将主要关注导航时机API.内部Performance API可查看Performance API收集的内容，您可以在Chrome浏览器中打开开发工具，在控制台选项卡中键入'performance'（或键入性能.时间若要直接访问PerformanceTimeing属性），请尝试通过单击标签前的箭头展开性能对象，然后再次展开"计时"。这称为PerformanceTiming，它包括与当前页面加载相关的所有计时，作为UNIX epoch时间戳（毫秒）。显示的计时属性与加载顺序不符。为了更好地理解，让我们看看W3C.Image提供的插图https://www.w3.org/TR/navigation-timing/As从图中我们可以看到，从左到右的顺序，每个元素（以上面的框表示）表示页面加载的导航流。每个元素从起点到终点都有一个属性（有些元素有多个属性！）这样我们就可以测量每个元素的运行时间。例如，要获取请求时间，您可以在控制台中输入如下所示的命令，该命令显示为60毫秒。怎么了Cloudflare使用性能数据一旦您的网站通过Cloudflare代理并且启用了Browser Insights，我们将编写JavaScript信标并将其注入到网页中。我们的beacon从性能API收集指标发送到我们的边缘，在那里它可以用来了解你的网站在哪里减速或有任何网络问题。报告的数据显示在速度页面上的Cloudflare仪表板中，显示为每个计时的平均值度量：度量我们浮出水面是：DNS（domainLookupEnd-domainLookupStart）：DNS查询需要多长时间。如果重新使用连接或内容存储在本地缓存（内存或磁盘）中，则此值可能显示为零。如果是HTTPS，则此过程包括TLS协商时间。请求（responseStart-requestStart）：发出HTTP请求到接收回应。回应（responseEnd-responseStart）：接收到的响应的第一个字节和最后一个字节之间经过的时间。您可以将其视为资源下载时间。处理（domComplete-domLoading）：呈现页面所用的时间。如果这个数字很大，您可以优化文档体系结构、资源大小，或者在"速度"页面下配置设置，例如自动缩小源代码。使用domInteractive、domContentLoadedEventStart、domContentLoadedEventEnd和domComplete，可以进一步深入了解此文档过程。我们计划稍后对此提供更详细的分析加载Event（loadEventEnd-loadEventStart）：当浏览器加载完它的文档和资源时，它会触发一个"load"事件。如果您有额外的功能或负载的任何逻辑，这个持续时间可能会对您有所帮助事件。总计时间：显示在图表。如果如果您在堆积折线图中看到任何尖峰或异常形式的直线，您可以开始调查每个元素，看看是什么导致了问题。有关如何使用浏览器洞察的更多信息，请参阅我们的公告博客波斯特。什么在这篇博客文章中，我们关注的是导航计时API，因为它是我们第一个版本的浏览器洞察的核心。在不久的将来，我们计划合并来自其他一些api的度量。例如，我们可以通过查看单个资源负载并指出需要更长时间的资源来分解一些较长的时间。除此之外，我们还计划跟踪JavaScript错误，提供一种度量a/B性能的方法，根据度量设置监视/警报，等等。所以请继续关注！