必须了解 JavaScript 概念才能加快网页速度

虽然现在我们大多数人都编写 React 或其他高级 TypeScript 代码，但有时您仍然必须冒险进入浏览器中 F12 控制台和 JavaScript 运行时的黑暗区域。

在本文中，我将介绍一些您需要了解的关键概念，这些概念可以而且很可能帮助您构建更快的页面。

1) ?事件循环

JavaScript 是单线程的，这意味着该语言本身一次只能执行一项任务。为了解决这个限制，浏览器提供了“事件循环”机制。

例如，当您使用“setInterval”函数时，浏览器会在后台维护一个计时器，当间隔到期时，回调函数就会被推送到事件循环中。

同时，任何不使用异步浏览器 API 的 JavaScript 代码只会从上到下依次执行。当主线程没有做任何工作时，浏览器就会从事件循环中提取任务并运行它。

2) ?后台工作者

当处理需要很长时间执行的密集操作时，比如 500ms ，你绝对不希望在主线程上运行它，因为它会让 UI 变得迟缓。

这就是网络工作者派上用场的地方； Web Worker 在与主浏览器线程不同的线程上运行，因此此处运行的任务不会影响您的页面加载速度。

一个好的用例是：当您拥有复杂图表的时间序列数据时，其中包含数千条要解析和计算的记录。您可以只显示加载程序并在 Web Worker 中进行图表计算，然后在准备就绪后更新 DOM。

3) ⏸️ 推迟非必需品

由于 JavaScript 是单线程的，因此您应该尽可能延迟以释放主线程。因此，最好的起点是核心网络生命力，这是重要的 SEO 指标，可帮助您识别可能延迟的缓慢代码。

然后您可以使用事件监听器，例如滚动、加载、DOMContentLoaded 等...来延迟代码的执行。

通常，这用于延迟页面跟踪、加载折叠下方的小部件、加载图表以及进行主折叠下方的其他 API 调用。

示例：

document.addEventListener('DOMContentLoaded',function() {
 // Slow code here.
});

ℹ️ DOMContentLoaded：将等待首先解析整个 HTML 文档，包括非异步 JS 脚本，但不等待图像、CSS 文件、iframe 等外部资源。 “load”事件类似，只是它等待所有内容加载，包括 CSS、iframe 和图像。

另一个方便的 Web API 是 Intersection Observer。这允许您根据元素的可见性触发代码，这对于在用户滚动经过某个 DOM 元素时最大限度地减少 API 调用非常有用（想想无限分页）。

4) ?️ 离屏画布

与 Web Worker 类似，您可以使用称为“OffscreenCanvas”的浏览器 API 将与画布相关的密集操作作为后台任务推送到自己的线程上。

这对于实时可视化、图像处理、游戏、视频编辑等很有用......

5) ⏳ 在浏览器不忙时运行任务

与事件循环非常相似，除了使用“requestIdleCallback”运行的任务具有非常低的优先级，因此仅在浏览器空闲时运行。

这非常适合运行非关键任务，例如 PWA 中离线访问的日志记录和缓存。

？ MDN Web 文档 [额外 - 有用的资源]

https://developer.mozilla.org/en-US/
我知道你可能会使用克劳德或一些法学硕士来做这件事，但人工智能幻觉是一个问题，有时会给你错误的信息，所以拥有一份你可以信任的可靠的书面参考指南总是好的。

MDN 是开源的，由 Mozilla 管理，毫无疑问，它是学习不同 JavaScript、CSS 和 HTML 浏览器 API 的最佳 Web 资源。在我的职业生涯中，我经常使用这个方法，并且至今仍然如此。

PS：有关更深入的 Web 开发、AI、Linux 教程和指南，您可以查看我的博客：KevinCoder

以上是必须了解 JavaScript 概念才能加快网页速度的详细内容。更多信息请关注PHP中文网其他相关文章！