提升网站速度：JavaScript异步加载策略解析

78 浏览量更新于2024-08-30 收藏 135KB PDF 举报

本文将深入探讨JavaScript的异步脚本加载技巧，帮助开发者提升网站性能和用户体验。首先，我们了解到传统 `<script>` 标签通常是阻塞型的，意味着浏览器在执行脚本前会暂停其他页面渲染，导致“白屏死机”现象。为了优化加载速度和避免这种问题，现代浏览器支持两种 `<script>` 类型：阻塞型和非阻塞型。 1. **阻塞型脚本的局限**：标准 `<script>` 标签在文档头部引入可能导致页面加载延迟，因为浏览器必须等待脚本下载和执行完毕后才能解析后续内容。这会导致用户在脚本加载期间只能看到标题，而页面主体内容则无法显示。解决方法是将这些对页面美观和功能至关重要的脚本移至`<body>`底部，利用`DOMContentLoaded`或`window.onload`等事件确保它们在DOM完全加载后执行。 2. **非阻塞型脚本的引入**：现代浏览器允许使用非阻塞型`<script async>`或`<script defer>`属性，它们允许浏览器同时下载和执行脚本，但不会阻止页面渲染。这意味着即使脚本还在下载过程中，用户可以看到部分内容，但可能会出现脚本执行顺序与预期不符的问题。使用`async`适合异步加载数据，而`defer`则保证脚本按定义的顺序执行，但两者都不会触发`readyState`事件。 3. **脚本分类与加载策略**：对于那些立即影响用户体验的脚本（如样式表、库和基础功能），推荐使用`<script async>`或`<script defer>`；而对于可延后加载的脚本（如模块化代码或第三方库），应放在页面底部或者使用异步加载技术（如AMD、CMD或fetch API）确保它们对页面加载的影响降到最低。 4. **优化建议**：在迁移脚本位置时，需要考虑脚本的重要性和依赖关系。对于依赖DOM的脚本，应确保它们在DOM可用时运行，以免出现未初始化元素。同时，使用模块化或按需加载的工具（如Webpack、Rollup等）可以进一步提高性能，避免不必要的脚本下载。理解并合理利用JavaScript的异步脚本加载机制是提升现代Web应用性能的关键。通过区分不同类型的`<script>`标签、合理安排脚本加载顺序，并结合适当的工具和技术，开发者可以显著改善用户的浏览体验，提高网站的加载速度。

跟我学习跟我学习javascript的异步脚本加载的异步脚本加载

跟我学习javascript的异步脚本加载，告诉大家如何使自己的站点更快捷，以及最简单的方法利用什么样的工具

达到预期效果，想一探究竟的朋友可以参考一下这篇文章。

先来看这行代码：

这有点儿……不怎么样。“这该放在哪儿？”开发人员会奇怪，“靠上点，放到<head>标签里？还是靠下点，放到<body>标签

里？”这两种做法都会让富脚本站点的下场很凄惨。<head>标签里的大脚本会滞压所有页面渲染工作，使得用户在脚本加载完

毕之前一直处于“白屏死机”状态。而<body>标签末尾的大脚本只会让用户看到毫无生命力的静态页面，原本应该进行客户端渲

染的地方却散布着不起作用的控件和空空如也的方框。

完美解决这个问题需要对脚本分而治之：那些负责让页面更好看、更好用的脚本应该立即加载，而那些可以待会儿再加载的脚

本稍后再加载。但是怎样才能既滞压这些脚本，又能保证它们在被调用时的可用性呢？

一、一、<script>标签的再认识标签的再认识

现代浏览器中的<script>标签分成了两种新类型：经典型和非阻塞型。接下来讨论如何运用这两种标签来尽快加载页面。

1、阻塞型脚本何去何从？、阻塞型脚本何去何从？

标准版本的<script>标签常常被称作阻塞型标签。这个词必须放在上下文中进行理解：现代浏览器看到阻塞型<script>标签

时，会跳过阻塞点继续读取文档及下载其他资源（脚本和样式表）。但直到脚本下载完毕并运行之后，浏览器才会评估阻塞点

之后的那些资源。因此，如果网页文档的<head>标签里有5 个阻塞型<script>标签，则在所有这5 个脚本均下载完毕并运行之

前，用户除了页面标题之外看不到任何东西。不仅如此，即便这些脚本运行了，它们也只能看到阻塞点之前的那部分文档。如

果想看到<body>标签中正等待加载的那些好东西，就必须给像document.onreadystatechange 这样的事件绑定一个事件处理

器。

基于上述原因，现在越来越流行把脚本放在页面<body>标签的尾部。这样，一方面用户可以更快地看到页面，另一方面脚本

也可以主动亲密接触DOM 而无需等待事件来触发自己。对大多数脚本而言，这次“搬家”是个巨大的进步。

但并非所有脚本都一样。在向下搬动脚本之前，请先问自己2 个问题。

该脚本是否有可能被<body>标签里的内联JavaScript 直接调用？答案可能一目了然，但仍值得核查一遍。

该脚本是否会影响已渲染页面的外观？Typekit 宿主字体就是一个例子。如果把Typekit 脚本放在文档末尾，那么页面文

本就会渲染两次，即读取文档时即刻渲染，脚本运行时再次渲染。

上述问题只要有一个答案是肯定的，那么该脚本就应该放在<head>标签中，否则就可以放在<body>标签中，文档形如：

<html>

<head>

</head>

<body>

</body>

</html>

这确实大大缩短了加载时间，但要注意一点，这可能让用户有机会在加载bodyScripts.js 之前与页面交互。

2、、脚本的提前加载与延迟运行脚本的提前加载与延迟运行

上面建议将大多数脚本放在<body>中，因为这样既能让用户更快地看到网页，又能避免操控DOM之前绑定“就绪”事件的开

销。但这种方式也有一个缺点，即浏览器在加载完整个文档之前无法加载这些脚本，这对那些通过慢速连接传送的大型文档来即浏览器在加载完整个文档之前无法加载这些脚本，这对那些通过慢速连接传送的大型文档来

说会是一大瓶颈。说会是一大瓶颈。

理想情况下，脚本的加载应该与文档的加载同时进行，并且不影响DOM 的渲染。这样，一旦文档就绪就可以运行脚本，因为

已经按照<script>标签的次序加载了相应脚本。

如果大家已经读到这里了，那么一定会迫不及待地想写一个自定义Ajax 脚本加载器以满足这样的需求！不过，大多数浏览器

都支持一个更为简单的解决方案。

添加defer（延迟）属性相当于对浏览器说：“请马上开始加载这个脚本吧，但是，请等到文档就绪且所有此前具有defer 属性

的脚本都结束运行之后再运行它。”在文档<head>标签里放入延迟脚本，既能带来脚本置于<body>标签时的全部好处，又能让

大文档的加载速度大幅提升！

下载后可阅读完整内容，剩余4页未读，立即下载

weixin_38506798

粉丝: 4
资源: 937

提升网站速度：JavaScript异步加载策略解析

async-loader:异步模块加载器

JavaScript-Async-ScriptLoader:这用于以整洁的方式加载多个 JS 文件

javascript异步加载

javascript loadScript异步加载脚本示例讲解

boothjs:最简单的异步脚本加载器

JavaScript异步加载浅析

使用jQuery异步加载 JavaScript脚本解决方案

JavaScript异步加载问题总结

Javascript 异步加载详解(浏览器在javascript的加载方式)

laad.js:非常简单的异步脚本加载 - laad.js

最新资源