前端性能监控之Chrome调试(一)

avatar

Chrome DevTools

当谈到浏览器性能调试时，Chrome提供了一套强大的工具和指标，可以帮助开发人员分析和优化网页性能。本文将介绍一些常用的Chrome调试性能指标，并解释它们的含义和用法。

  1. 加载时间： 加载时间是衡量网页加载速度的重要指标。在Chrome的开发者工具中，可以通过Network面板查看每个资源的加载时间，包括HTML、CSS、JavaScript、图片等。要优化加载时间，可以使用压缩和合并文件、减少HTTP请求数量、使用浏览器缓存等技术手段。
  2. 渲染性能： 渲染性能指标反映了浏览器将网页内容渲染到屏幕上所需的时间。在Chrome的Performance面板中，可以查看渲染性能相关的数据，如帧率、主线程执行时间、布局和绘制时间等。通过分析这些数据，可以找出造成页面卡顿和渲染延迟的原因，并进行相应的优化。
  3. 内存使用： 内存使用是衡量网页性能和用户体验的关键因素之一。在Chrome的Memory面板中，可以监控网页的内存使用情况，包括堆内存、DOM节点、事件监听器等。通过检查内存使用情况，可以发现内存泄漏和不必要的对象创建等问题，并进行优化。
  4. JavaScript性能： JavaScript是网页中常用的脚本语言，对网页性能影响重大。在Chrome的Performance面板中，可以记录和分析JavaScript的执行情况，包括函数调用栈、CPU占用情况、事件处理等。通过分析JavaScript性能数据，可以找出性能瓶颈并进行优化，如避免频繁的DOM操作、减少不必要的计算等。
  5. 网络请求： 网络请求是网页加载过程中的关键环节，对性能有着直接影响。在Chrome的Network面板中，可以查看每个请求的详细信息，如请求类型、HTTP状态码、传输大小等。通过分析网络请求数据，可以找出慢速请求、多余请求和请求重定向等问题，并采取相应的优化措施。

总结起来，Chrome提供了丰富的调试工具和性能指标，帮助开发人员分析和优化网页性能。通过监控加载时间、渲染性能、内存使用、JavaScript性能和网络请求等指标，可以找出性能瓶颈并进行针对性的优化，从而提升网页的加载速度和用户体验。

如何利用各指标分析

关键事件

  1. FP（First Paint）首次绘制： FP指标表示浏览器首次将页面的任何像素绘制到屏幕上的时间点。它标志着页面开始加载并显示内容的阶段。通常情况下，FP时间越短，用户对页面加载速度的感知越好。开发人员可以通过优化资源加载和减少阻塞渲染的因素来改善FP指标。
  2. FCP（First Contentful Paint）首次有内容绘制： FCP指标表示浏览器首次绘制页面上第一个有意义的内容的时间点。这个内容可以是文本、图像或其他可被用户感知到的元素。通过优化关键资源的加载顺序和减少渲染阻塞，可以加速FCP时间，提高用户对页面加载速度的感知。
  3. FMP（First Meaningful Paint）首次有意义绘制： FMP指标表示浏览器首次绘制对用户有意义的内容的时间点。它反映了用户认为页面有用的元素首次出现的时间，如主要文本、主图像等。通过优化关键资源的加载和渲染顺序，以及减少不必要的资源请求，可以加快FMP时间，提升用户对页面加载速度的感知。
  4. LCP（Largest Contentful Paint）最大内容绘制： LCP指标表示浏览器在视口内最大的可见内容绘制完成的时间点。这可以是图片、视频或其他主要的视觉元素。LCP时间较短意味着页面能够更快地展示重要的内容给用户。优化关键资源的加载和渲染顺序，以及减少阻塞渲染的因素，可以改善LCP指标。

Chrome下如何查看各指标

  1. 打开Chrome浏览器并访问要检测的网页。
  2. 右键点击页面上任意位置，选择"检查"（或按下Ctrl+Shift+I）打开开发者工具。
  3. 在开发者工具中，点击顶部的"Performance"（性能）标签页。

  • 若要查看FP和FCP：

    • 在Performance面板上方的工具栏中，点击红色圆点的录制按钮开始记录性能。
    • 刷新页面，让记录开始。
    • 停止录制，再次点击录制按钮停止记录。
    • 在性能记录下方的时间轴上，可以看到不同的性能事件。FP和FCP事件将以不同颜色的线条表示，可以将鼠标悬停在相应的位置上查看具体时间。

  • 若要查看FMP和LCP：

    • 在Performance面板顶部的工具栏中，点击"Reload and profile"按钮，让开发者工具重新加载并开始记录。
    • 让页面加载完毕，性能记录会显示在时间轴上。
    • FMP和LCP事件将以不同颜色的线条表示，可以将鼠标悬停在相应的位置上查看具体时间。

image.png

白屏和首屏对应哪个指标

白屏和首屏对应的指标是FP（First Paint）和FCP（First Contentful Paint）。

白屏时间指的是浏览器首次开始绘制页面的时间点，即FP。在这个时间点之前，页面是空白的，用户看不到任何内容。因此，FP可以用来衡量页面白屏时间的长短。较短的FP时间表示页面加载速度快，用户能够更快地看到页面的第一帧内容。

首屏时间指的是浏览器首次绘制页面上第一个有意义的内容的时间点，即FCP。这个内容可以是文本、图像或其他可被用户感知到的元素。首屏时间可以用来衡量在页面加载过程中，用户首次看到有意义的内容所需的时间。较短的FCP时间意味着页面能够更快地展示给用户有意义的内容。

总结起来，白屏时间对应FP指标，衡量页面加载开始到第一个像素绘制的时间；而首屏时间对应FCP指标，衡量页面加载开始到第一个有意义内容绘制的时间。优化FP和FCP时间可以减少白屏时间和首屏加载时间，提升用户体验和页面加载速度。

如何计算各指标

计算FP（First Paint）、FCP（First Contentful Paint）、FMP（First Meaningful Paint）和LCP（Largest Contentful Paint）需要使用Performance API中的performance.timing属性和performance.getEntriesByType方法。

  1. 计算FP： 使用performance.timing.responseStart - performance.timing.navigationStart可以得到FP的时间差。
  2. 计算FCP： 使用performance.timing.domInteractive - performance.timing.navigationStart可以得到FCP的时间差。
  3. 计算FMP： FMP是一个复杂的指标，通常由具体的性能监测工具或浏览器插件来计算。其中一种方法是通过监测页面上有意义的元素是否完全加载，比如关键文本、主要图片等。当这些元素都加载完成并显示在用户视图中时，记录下此时的时间点作为FMP。
  4. 计算LCP： 使用performance.getEntriesByType('largest-contentful-paint')方法可以获取到一个包含最大内容元素的数组。通过遍历数组，找到最后一个绘制完成并显示在用户视图中的元素的时间戳即可得到LCP。

需要注意的是，这些指标的计算方法可能会因浏览器的不同而有所差异，而且它们只能作为参考，因为实际的渲染时间受多种因素的影响。因此，在实际应用中，建议使用专业的性能监测工具来获取更准确的数据。

DOMContentLoaded和load事件

早期更多关注的是，DOMContentLoaded和load事件，分别代表DOM构造完成和首屏资源加载完成。

  • load（Onload Event），它代表页面中依赖的所有资源加载完的事件。
  • DCL（DOMContentLoaded），DOM解析完毕。

FCP和load事件

Onload事件是当整个网页及其所有相关资源（包括样式表、图像、脚本等）都已经加载完毕后触发的事件。这意味着网页的所有内容都已经准备好了，用户可以与页面进行交互了。window.onload注册的回调就会在load事件触发时候被调用。

根据浏览器加载页面的流程，FCP事件会在Onload事件之前触发。当浏览器接收到HTML文件并开始解析时，它将尽快开始渲染内容，一旦浏览器解析到第一个需要渲染的元素，FCP事件就会被触发。而Onload事件则需要等到整个页面以及相关资源都加载完成后才会触发。

由于网页中的各种因素（如网络速度、服务器响应等）的影响，实际的FCP和Onload事件触发时间可能会有所不同。但从原理上讲，FCP事件会在Onload事件之前触发。

DCL和load的先后顺序

DCL事件表示当初始的HTML文档被完全加载和解析完成时触发。也就是说，当DOM树构建完成并且所有的CSS和JavaScript文件都被下载和解析完成后，DCL事件就会被触发。在DCL事件触发之前，页面的结构和内容已经可以被访问和操作，但是页面可能还没有完全渲染完成。

load事件则表示整个页面（包括所有资源如样式表、图像、脚本等）都已经加载完毕并且页面已经完全渲染完成后触发。load事件的触发标志着页面已经可以进行交互了。

根据浏览器加载页面的流程，DCL事件会在load事件之前触发。当浏览器开始解析HTML文件时，它会逐步构建DOM树，并在解析到外部CSS和JavaScript文件时开始下载和解析这些文件。一旦DOM树构建完成并且所有的CSS和JavaScript文件都被下载和解析完成，DCL事件就会被触发。而load事件则需要等到整个页面及其相关资源都加载完成并且页面完全渲染完成后才会触发。

可以通过注册回调监听该事件

  document.addeventListener('DOMContentLoaded', function() {}, false);

document.onload和document.body.onload也是这个事件的回调。

avatar
文章
阅读
粉丝