|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "49b58721a71cfda824e2f3e1f46908c6",
|
|
|
"translation_date": "2025-08-29T14:44:32+00:00",
|
|
|
"source_file": "5-browser-extension/3-background-tasks-and-performance/README.md",
|
|
|
"language_code": "zh"
|
|
|
}
|
|
|
-->
|
|
|
# 浏览器扩展项目第三部分：了解后台任务和性能
|
|
|
|
|
|
## 课前测验
|
|
|
|
|
|
[课前测验](https://ff-quizzes.netlify.app/web/quiz/27)
|
|
|
|
|
|
### 简介
|
|
|
|
|
|
在本模块的前两节课中，你学习了如何构建一个表单以及用于显示从 API 获取的数据的区域。这是一种非常标准的创建网页内容的方法。你甚至学会了如何异步获取数据。你的浏览器扩展几乎已经完成了。
|
|
|
|
|
|
现在需要管理一些后台任务，包括刷新扩展图标的颜色，因此这是一个很好的时机来讨论浏览器如何管理这类任务。在构建网页资源时，我们可以从性能的角度来思考这些浏览器任务。
|
|
|
|
|
|
## 网页性能基础
|
|
|
|
|
|
> “网站性能主要涉及两件事：页面加载速度和页面代码运行速度。” —— [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
|
|
|
|
|
|
如何让你的网站在各种设备、各种用户和各种情况下都能快速运行，这个话题自然非常广泛。以下是一些在构建标准网页项目或浏览器扩展时需要注意的要点。
|
|
|
|
|
|
确保网站高效运行的第一步是收集其性能数据。首选工具是网页浏览器的开发者工具。在 Edge 浏览器中，你可以点击“设置和更多”按钮（浏览器右上角的三点图标），然后导航到“更多工具 > 开发者工具”，并打开“性能”选项卡。你也可以使用快捷键 `Ctrl` + `Shift` + `I`（Windows）或 `Option` + `Command` + `I`（Mac）来打开开发者工具。
|
|
|
|
|
|
“性能”选项卡包含一个分析工具。打开一个网站（例如 [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)），点击“记录”按钮，然后刷新网站。随时停止记录，你将能够看到生成的“脚本”、“渲染”和“绘制”网站的例程：
|
|
|
|
|
|
|
|
|
|
|
|
✅ 查看 [Microsoft 文档](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) 中关于 Edge 性能面板的内容。
|
|
|
|
|
|
> 提示：为了获得网站启动时间的准确读数，请清除浏览器缓存。
|
|
|
|
|
|
选择分析时间线中的元素，放大页面加载时发生的事件。
|
|
|
|
|
|
通过选择分析时间线的一部分并查看摘要面板，可以获取页面性能的快照：
|
|
|
|
|
|
|
|
|
|
|
|
检查事件日志面板，查看是否有任何事件耗时超过 15 毫秒：
|
|
|
|
|
|
|
|
|
|
|
|
✅ 熟悉你的分析工具！在本网站上打开开发者工具，看看是否有任何瓶颈。加载最慢的资源是什么？最快的又是什么？
|
|
|
|
|
|
## 性能分析检查
|
|
|
|
|
|
通常来说，每个网页开发者在构建网站时都应该注意一些“问题区域”，以避免在部署到生产环境时出现意外。
|
|
|
|
|
|
**资源大小**：近年来，网页变得“更重”，因此也更慢。这种重量的一部分与图片的使用有关。
|
|
|
|
|
|
✅ 浏览 [互联网档案馆](https://httparchive.org/reports/page-weight)，查看页面重量的历史变化及更多信息。
|
|
|
|
|
|
一个好的做法是确保图片经过优化，并以适合用户的大小和分辨率进行交付。
|
|
|
|
|
|
**DOM 遍历**：浏览器需要根据你编写的代码构建其文档对象模型，因此为了良好的页面性能，应该尽量减少标签的使用，仅使用和样式化页面所需的内容。例如，与页面相关的多余 CSS 可以进行优化；仅需在某个页面使用的样式不需要包含在主样式表中。
|
|
|
|
|
|
**JavaScript**：每个 JavaScript 开发者都应该注意“渲染阻塞”脚本，这些脚本必须在浏览器遍历和绘制 DOM 之前加载。考虑在内联脚本中使用 `defer`（如在 Terrarium 模块中所做）。
|
|
|
|
|
|
✅ 在 [网站速度测试网站](https://www.webpagetest.org/) 上尝试一些网站，了解常见的性能检查方法。
|
|
|
|
|
|
现在你已经了解了浏览器如何渲染你发送的资源，让我们看看完成扩展所需的最后几步：
|
|
|
|
|
|
### 创建一个计算颜色的函数
|
|
|
|
|
|
在 `/src/index.js` 中，在你设置的一系列 `const` 变量之后，添加一个名为 `calculateColor()` 的函数，以便访问 DOM：
|
|
|
|
|
|
```JavaScript
|
|
|
function calculateColor(value) {
|
|
|
let co2Scale = [0, 150, 600, 750, 800];
|
|
|
let colors = ['#2AA364', '#F5EB4D', '#9E4229', '#381D02', '#381D02'];
|
|
|
|
|
|
let closestNum = co2Scale.sort((a, b) => {
|
|
|
return Math.abs(a - value) - Math.abs(b - value);
|
|
|
})[0];
|
|
|
console.log(value + ' is closest to ' + closestNum);
|
|
|
let num = (element) => element > closestNum;
|
|
|
let scaleIndex = co2Scale.findIndex(num);
|
|
|
|
|
|
let closestColor = colors[scaleIndex];
|
|
|
console.log(scaleIndex, closestColor);
|
|
|
|
|
|
chrome.runtime.sendMessage({ action: 'updateIcon', value: { color: closestColor } });
|
|
|
}
|
|
|
```
|
|
|
|
|
|
这里发生了什么？你传入一个值（来自上节课完成的 API 调用中的碳强度），然后计算其值与颜色数组中索引的接近程度。接着，你将最接近的颜色值发送到 chrome runtime。
|
|
|
|
|
|
chrome.runtime 有一个 [API](https://developer.chrome.com/extensions/runtime)，可以处理各种后台任务，而你的扩展正在利用它：
|
|
|
|
|
|
> “使用 chrome.runtime API 来检索后台页面、返回清单的详细信息，并监听和响应应用或扩展生命周期中的事件。你还可以使用此 API 将 URL 的相对路径转换为完全限定的 URL。”
|
|
|
|
|
|
✅ 如果你正在为 Edge 开发此浏览器扩展，可能会惊讶于你正在使用 chrome API。较新的 Edge 浏览器版本运行在 Chromium 浏览器引擎上，因此你可以利用这些工具。
|
|
|
|
|
|
> 注意，如果你想分析浏览器扩展，请从扩展本身内部启动开发者工具，因为它是一个独立的浏览器实例。
|
|
|
|
|
|
### 设置默认图标颜色
|
|
|
|
|
|
现在，在 `init()` 函数中，通过调用 chrome 的 `updateIcon` 操作，将图标初始设置为通用的绿色：
|
|
|
|
|
|
```JavaScript
|
|
|
chrome.runtime.sendMessage({
|
|
|
action: 'updateIcon',
|
|
|
value: {
|
|
|
color: 'green',
|
|
|
},
|
|
|
});
|
|
|
```
|
|
|
|
|
|
### 调用函数并执行调用
|
|
|
|
|
|
接下来，通过将你刚刚创建的函数添加到 C02Signal API 返回的 promise 中来调用它：
|
|
|
|
|
|
```JavaScript
|
|
|
//let CO2...
|
|
|
calculateColor(CO2);
|
|
|
```
|
|
|
|
|
|
最后，在 `/dist/background.js` 中，为这些后台操作调用添加监听器：
|
|
|
|
|
|
```JavaScript
|
|
|
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
|
|
|
if (msg.action === 'updateIcon') {
|
|
|
chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) });
|
|
|
}
|
|
|
});
|
|
|
//borrowed from energy lollipop extension, nice feature!
|
|
|
function drawIcon(value) {
|
|
|
let canvas = document.createElement('canvas');
|
|
|
let context = canvas.getContext('2d');
|
|
|
|
|
|
context.beginPath();
|
|
|
context.fillStyle = value.color;
|
|
|
context.arc(100, 100, 50, 0, 2 * Math.PI);
|
|
|
context.fill();
|
|
|
|
|
|
return context.getImageData(50, 50, 100, 100);
|
|
|
}
|
|
|
```
|
|
|
|
|
|
在这段代码中，你为任何发送到后台任务管理器的消息添加了一个监听器。如果消息名为“updateIcon”，则运行接下来的代码，使用 Canvas API 绘制适当颜色的图标。
|
|
|
|
|
|
✅ 你将在 [太空游戏课程](../../6-space-game/2-drawing-to-canvas/README.md) 中学习更多关于 Canvas API 的内容。
|
|
|
|
|
|
现在，重新构建你的扩展（`npm run build`），刷新并启动你的扩展，观察颜色变化。是时候去跑个腿或洗碗了吗？现在你知道了！
|
|
|
|
|
|
恭喜你，你已经构建了一个实用的浏览器扩展，并进一步了解了浏览器的工作原理以及如何分析其性能。
|
|
|
|
|
|
---
|
|
|
|
|
|
## 🚀 挑战
|
|
|
|
|
|
调查一些长期存在的开源网站，并根据其 GitHub 历史记录，看看它们是否在性能方面进行了优化。如果有，优化的最常见痛点是什么？
|
|
|
|
|
|
## 课后测验
|
|
|
|
|
|
[课后测验](https://ff-quizzes.netlify.app/web/quiz/28)
|
|
|
|
|
|
## 复习与自学
|
|
|
|
|
|
考虑订阅一个 [性能新闻简报](https://perf.email)。
|
|
|
|
|
|
通过浏览器的开发者工具中的性能选项卡，调查浏览器评估网页性能的一些方法。你发现了哪些主要差异？
|
|
|
|
|
|
## 作业
|
|
|
|
|
|
[分析一个网站的性能](assignment.md)
|
|
|
|
|
|
---
|
|
|
|
|
|
**免责声明**：
|
|
|
本文档使用AI翻译服务[Co-op Translator](https://github.com/Azure/co-op-translator)进行翻译。尽管我们努力确保准确性，但请注意，自动翻译可能包含错误或不准确之处。应以原始语言的文档作为权威来源。对于关键信息，建议使用专业人工翻译。因使用本翻译而引起的任何误解或误读，我们概不负责。 |
