【性能优化】性能检测

相关文章

性能检测

一、如何性能检测

检测系统的性能问题通常需要进行系统性能分析和性能测试，以找出系统中的瓶颈和性能瓶颈。以下是一些常用的方法和工具

性能分析工具

使用浏览器的开发者工具进行性能分析，例如 Chrome 的开发者工具中的 Performance 面板可以记录和分析页面的性能数据，包括 CPU 使用率、内存占用、网络请求等。
使用操作系统的性能分析工具，例如 Windows 的任务管理器和性能监视器、Linux 的 top、htop、vmstat 等工具，可以监控系统的 CPU 使用率、内存占用、磁盘 IO、网络流量等指标。

性能测试工具

使用专业的性能测试工具对系统进行性能测试，例如 Apache JMeter、LoadRunner、Gatling 等，可以模拟多用户并发访问场景，测试系统的并发处理能力和性能稳定性。
使用 Web 性能测试工具对网页进行性能测试，例如 Google PageSpeed Insights、WebPageTest 等，可以分析网页的加载速度、渲染性能、优化建议等。

日志分析

分析系统的日志文件，查找异常和错误信息，了解系统运行状况和性能表现，例如查看应用程序的日志、服务器的访问日志、数据库的慢查询日志等。

代码审查

对系统的代码进行审查，查找可能存在的性能问题和优化建议，例如检查是否存在大量的循环嵌套、不必要的重复代码、低效的算法等。

监控系统：

部署监控系统对系统的关键指标进行实时监控，及时发现性能问题和异常情况，例如使用 Prometheus、Grafana 等监控系统。

二、性能分析工具：Performance

本文将聚焦于大家常用的性能分析工具 Performance，探讨性能问题的发现与解决。

Networks 指标

用于跟踪页面的网络请求和资源加载情况。它提供了有关页面加载过程中发起的网络请求的详细信息，包括请求的类型、请求的大小、响应时间、下载时间等。

Frames 指标

用于跟踪页面的渲染帧数和性能。它提供了有关页面渲染的详细信息，包括每秒渲染的帧数（FPS，Frames Per Second）以及每帧的渲染时间（Frame Time）。

红色区域内的绿条就是每一帧，可以发现有的很宽有的很窄，绿条之间的间隔就是浏览器的空闲时间。

空闲帧

耗时帧

Timings 指标

用于跟踪页面加载过程中各个阶段的时间信息，也称为导航时序（Navigation Timing）。这些阶段包括 DNS 查询、TCP 连接、SSL 握手、请求响应等等。

Main 指标

用于跟踪网页主线程的运行情况。主线程是浏览器用来处理 JavaScript 代码执行、DOM 操作、样式计算、布局和绘制等任务的线程。浏览器的主线程是单线程的，因此所有的 JavaScript 代码都在主线程上执行，包括事件处理、定时器、异步请求等。

常见的主线程性能指标包括

主线程运行时间（Main Thread Execution Time）：浏览器执行 JavaScript 代码和处理页面渲染的时间。
任务队列长度（Task Queue Length）：主线程中待执行任务的数量，包括事件回调、定时器回调、网络请求响应等。
事件处理时间（Event Handling Time）：处理用户交互事件（如点击、滚动等）的时间。
布局和绘制时间（Layout and Paint Time）：计算页面布局和绘制页面的时间，包括样式计算、布局计算和绘制操作。

重绘和重排

我们展开其中几个看

发现了这些都是因为重绘和重排导致的任务。

长任务

也发现了，有些Task右上角有一个红色的三角形，说明是个Long Task

长任务（Long Tasks）是指在浏览器的主线程上执行时间超过一定阈值（通常为50毫秒）的任务。这些任务可能包括 JavaScript 执行、样式计算、布局、绘制等操作，它们会阻塞主线程，导致页面响应迟缓、卡顿甚至挂起。在实际开发中，长任务可能由于以下原因导致：

复杂的 JavaScript 代码：执行复杂的 JavaScript 代码，例如大量的计算、循环或递归操作，会消耗大量的时间，导致长任务的发生。
大规模的 DOM 操作：对大量或复杂的 DOM 元素进行操作，例如添加、删除、修改元素的样式或结构，可能触发页面的重新布局和重绘，导致长任务的发生。
网络请求和资源加载：加载大量的资源文件，如图片、样式表、脚本等，可能导致网络请求的并发处理能力不足，从而出现长时间的网络请求任务。
第三方脚本和插件：引入第三方脚本或插件，可能存在性能问题或资源泄漏，导致长任务的发生。

长任务的发生会影响页面的用户体验和性能表现，因此在开发过程中需要注意避免长任务的发生，采取相应的优化措施。常见的优化方法包括：

分解任务：将长任务拆分成多个小任务，通过异步执行或分批处理的方式降低单个任务的执行时间。
优化代码：对复杂的 JavaScript 代码进行优化，减少不必要的计算和循环，提高代码的执行效率。
优化 DOM 操作：减少对 DOM 的操作次数和范围，尽量避免触发页面的重新布局和重绘。
延迟加载资源：将不必要立即加载的资源延迟加载或异步加载，减少页面加载时长任务的发生。
使用 Web Workers：将耗时的任务移至 Web Workers 中执行，避免阻塞主线程的执行。

更多 Long Task 知识单独写一篇文章介绍。

三、Performance API

实际上在浏览器端的全局对象 window 上有一个名为 performance 的属性，它是一个用于支持 IE9 以上及 webkit 内核浏览器中用于记录页面加载和解析过程中关键时间点的机制，其兼容性在 caniuse 中的表现如下：

下面就简单介绍一下和 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 = connectEnd - connectStart

// 页面重定向时间
Redirect = redirectEnd - redirectStart

// 首字节到底时间
TTFB = responseStart - navigationStart

// 首次渲染时间
FP = responseStart - navigationStart

// DOM 解析时间
DOM = domComplete - responseEnd

// 首屏时间
LCP = loadEventEnd - navigationStart