解释 JavaScript 中的性能测试工具 (如 Lighthouse, WebPageTest) 如何评估网页性能并提供优化建议。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

JavaScript 性能测试：让你的网页飞起来！ (讲座模式)

大家好！我是今天的主讲人，江湖人称“代码老中医”。今天咱们不聊八卦，只聊正事儿：如何让你的 JavaScript 网页跑得更快、更溜、更丝滑！

咱们都知道，现在用户耐心值比金鱼还低。网页慢个一秒，用户可能就跑到竞争对手那里去了。所以，网页性能优化那是相当重要的。别怕，今天我就教大家几招，用好 JavaScript 性能测试工具，让你的网页起飞！

第一部分：性能测试工具大点兵

先来认识一下咱们的“体检医生”—— 性能测试工具。它们能帮你诊断网页的“健康状况”，找出瓶颈所在。

Lighthouse (Chrome DevTools 内置)

Lighthouse 是 Google Chrome 开发者工具自带的神器！它能模拟真实用户访问，评估网页的性能、可访问性、最佳实践和 SEO。它会给你的网页打分，并提供详细的优化建议。
- 特点: 易用、报告全面、自动生成、无需安装。
- 使用方法: 打开 Chrome 开发者工具 (F12)，选择 “Lighthouse” 面板，配置好选项 (设备类型、类别等)，点击 “Generate report”。
WebPageTest

WebPageTest 是一个强大的在线工具，能模拟不同网络环境和设备，测试你的网页性能。它提供非常详细的瀑布图、首字节时间 (TTFB)、页面加载时间等指标。
- 特点: 多种测试环境、详细的性能指标、瀑布图分析、免费使用。
- 使用方法: 访问 https://www.webpagetest.org/，输入网址，选择测试地点、浏览器、连接速度等，点击 “Start Test”。
PageSpeed Insights

PageSpeed Insights 也是 Google 提供的工具，它会分析你的网页，并给出优化建议。它和 Lighthouse 类似，但更侧重于移动端性能。
- 特点: 移动端优化、简单易用、评分系统。
- 使用方法: 访问 https://developers.google.com/speed/pagespeed/insights/，输入网址，点击 “Analyze”。
Chrome DevTools Performance 面板

Chrome DevTools 的 Performance 面板可以让你深入了解网页的运行时性能。你可以录制一段时间的网页活动，然后分析 CPU 使用情况、内存占用、渲染时间等。
- 特点: 实时监控、详细的运行时数据、火焰图分析、定位性能瓶颈。
- 使用方法: 打开 Chrome 开发者工具 (F12)，选择 “Performance” 面板，点击 “Record” 开始录制，操作网页，点击 “Stop” 停止录制。

第二部分：性能指标解读：听懂医生的“诊断报告”

光有工具还不行，得看得懂它们给出的“诊断报告”。下面是一些常见的性能指标：

指标名称	含义	重要性	优化方向
First Contentful Paint (FCP)	浏览器首次渲染任何文本、图像、非白色画布或 SVG 的时间。	高	优化关键渲染路径，减少阻塞渲染的资源，使用 CDN，优化图片。
Largest Contentful Paint (LCP)	浏览器首次渲染最大内容元素的时间。	高	优化 LCP 元素加载速度，优化图片、视频，使用 CDN，优化服务器响应时间。
First Input Delay (FID)	用户首次与页面交互（例如点击链接、点击按钮）到浏览器响应交互之间的时间。	高	减少主线程工作量，避免长任务，优化 JavaScript 执行时间。
Cumulative Layout Shift (CLS)	页面上意外的布局移动的程度。	高	为图片、视频等元素设置尺寸，避免动态插入内容，预留足够的空间。
Time to First Byte (TTFB)	浏览器收到服务器响应的第一个字节的时间。	中	优化服务器配置，使用 CDN，优化数据库查询，减少服务器端渲染。
Speed Index	页面可见内容显示的快慢指标。	中	优化关键渲染路径，减少阻塞渲染的资源，优化图片，使用 CDN。
Total Blocking Time (TBT)	页面从 FCP 到可交互期间，被阻塞的时间总和。	中	减少主线程工作量，避免长任务，优化 JavaScript 执行时间。

记住： 这些指标不是孤立的，它们之间相互影响。优化一个指标可能会影响其他指标。

第三部分：性能优化实战：老中医的“独门秘方”

有了工具，看懂了报告，接下来就是真正的“治病救人”了！下面分享一些常用的 JavaScript 性能优化技巧：

减少 HTTP 请求：

合并文件： 将多个 JavaScript 或 CSS 文件合并成一个文件，减少 HTTP 请求次数。

<!-- 优化前 -->
<script src="script1.js"></script>
<script src="script2.js"></script>
<script src="script3.js"></script>

<!-- 优化后 -->
<script src="bundle.js"></script>  <!-- 包含 script1.js, script2.js, script3.js -->

可以使用 Webpack, Parcel, Rollup 等打包工具来实现。

使用 CSS Sprites： 将多个小图片合并成一张大图，减少图片请求次数。

使用 Data URI： 将小图片直接嵌入到 CSS 或 HTML 中，避免额外的 HTTP 请求。

.icon {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w+r8z4FmZmYAAAAASUVORK5CYII=");
}

优化图片：
- 压缩图片： 使用工具 (如 TinyPNG, ImageOptim) 压缩图片，减小文件大小。
- 使用 WebP 格式： WebP 是一种现代图片格式，比 JPEG 和 PNG 具有更好的压缩率。
```
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Image">
</picture>
```
- 使用响应式图片： 根据设备屏幕大小加载不同尺寸的图片。
```
<img srcset="image-small.jpg 480w, image-medium.jpg 800w, image-large.jpg 1200w"
     sizes="(max-width: 480px) 100vw, (max-width: 800px) 50vw, 33.3vw"
     src="image-large.jpg" alt="Image">
```
- 懒加载图片： 在图片进入可视区域时才加载，避免一次性加载所有图片。
```
<img src="placeholder.jpg" data-src="image.jpg" loading="lazy" alt="Image">
```
  或者使用 Intersection Observer API 手动实现懒加载。

优化 JavaScript 代码：

代码压缩： 使用工具 (如 UglifyJS, Terser) 压缩 JavaScript 代码，减小文件大小。
代码分割： 将 JavaScript 代码分割成多个小文件，按需加载。
```
// 动态导入
import('./module.js').then(module => {
  module.doSomething();
});
```
可以使用 Webpack, Parcel, Rollup 等打包工具来实现代码分割。

避免长任务： 将耗时的 JavaScript 操作分割成多个小任务，避免阻塞主线程。

// 使用 requestAnimationFrame
function longTask() {
  // 执行一部分任务
  // ...

  requestAnimationFrame(longTask); // 递归调用
}

requestAnimationFrame(longTask); // 启动任务

或者使用 setTimeout 或 setInterval，但 requestAnimationFrame 性能更好。

使用 Web Workers： 将耗时的 JavaScript 操作放到 Web Workers 中执行，避免阻塞主线程。

// 主线程
const worker = new Worker('worker.js');
worker.postMessage({ data: 'some data' });
worker.onmessage = function(event) {
  console.log('Received data from worker:', event.data);
};

// worker.js
self.onmessage = function(event) {
  const data = event.data.data;
  // 执行耗时操作
  const result = doSomeHeavyLifting(data);
  self.postMessage({ result: result });
};

避免内存泄漏： 及时释放不再使用的对象，避免内存泄漏。

// 移除事件监听器
element.removeEventListener('click', handleClick);

// 解除循环引用
obj1.prop = null;
obj2.prop = null;

使用事件委托： 将事件监听器绑定到父元素，减少事件监听器的数量。

<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<script>
document.getElementById('myList').addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    console.log('Clicked on list item:', event.target.textContent);
  }
});
</script>

减少 DOM 操作： 尽量减少 DOM 操作，因为 DOM 操作的代价很高。

// 优化前
for (let i = 0; i < 1000; i++) {
  const element = document.createElement('div');
  element.textContent = 'Item ' + i;
  document.body.appendChild(element);
}

// 优化后
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
  const element = document.createElement('div');
  element.textContent = 'Item ' + i;
  fragment.appendChild(element);
}
document.body.appendChild(fragment);

优化 CSS：
- 避免使用复杂的 CSS 选择器： 复杂的 CSS 选择器会降低渲染速度。
- 避免使用 @import： @import 会阻塞页面的渲染。
- 将 CSS 放在 <head> 中： 这样可以避免页面闪烁。
利用浏览器缓存：
- 设置 Cache-Control 和 Expires 头： 告诉浏览器缓存静态资源。
- 使用 CDN： 将静态资源放到 CDN 上，利用 CDN 的缓存和加速功能。
服务器端优化：
- 使用 Gzip 压缩： 压缩服务器响应，减小传输大小。
- 优化数据库查询： 减少数据库查询次数，优化查询语句。
- 使用缓存： 缓存常用的数据，减少数据库查询。

第四部分：持续监控与改进：保持网页的“健康”

性能优化不是一蹴而就的，需要持续监控和改进。

定期使用性能测试工具： 定期使用 Lighthouse, WebPageTest 等工具，监控网页性能。
设置性能预算： 为关键指标设置性能预算，例如 FCP < 1s, LCP < 2.5s。
使用监控工具： 使用 New Relic, Datadog 等监控工具，实时监控网页性能。
关注用户反馈： 关注用户反馈，了解用户在使用过程中遇到的性能问题。

第五部分：一些额外的“药方”

使用 Service Workers： Service Workers 可以缓存静态资源，实现离线访问，提高网页加载速度。
预加载关键资源： 使用 <link rel="preload"> 预加载关键资源，提高加载速度。
使用 HTTP/2 或 HTTP/3： HTTP/2 和 HTTP/3 具有多路复用、头部压缩等特性，可以提高网页加载速度。
代码审查： 定期进行代码审查，发现潜在的性能问题。

总结：

JavaScript 性能优化是一个持续的过程，需要不断学习和实践。希望今天的分享能帮助大家更好地优化 JavaScript 网页，提升用户体验！记住，没有最快的网页，只有更快的网页！

最后，祝大家的网页都能像火箭一样飞起来！下次再见！

JavaScript 性能测试：让你的网页飞起来！ (讲座模式)

发表回复 取消回复

发表回复取消回复