理解JavaScript异步加载：同步与非阻塞模式详解
148 浏览量
更新于2024-08-28
收藏 99KB PDF 举报
本文将深入探讨JavaScript中的同步加载与异步加载机制，这两种不同的执行模式对网页性能和用户体验有着显著的影响。首先，同步加载（如<script src="..."></script>）采用阻塞模式，当脚本执行时，浏览器会暂停解析后续内容，直至脚本完成，这可能导致页面加载延迟，影响首屏渲染速度。由于JavaScript可能会操作DOM或影响页面结构，因此默认同步执行可以确保安全。
为了优化用户体验，以前的推荐做法是将同步脚本放置在<body>标签的底部，以便在脚本加载前先展示页面主体内容，减少用户等待时间。这种方式遵循的是瀑布模型，即按顺序执行任务。
然而，现代Web开发中更倾向于使用异步加载，尤其是通过`<script async>`属性。异步加载允许浏览器在下载和执行脚本的同时，继续渲染和处理其他HTML元素，遵循并发模型，提高页面响应速度。以下是一个常见的异步加载实现方式，通过JavaScript动态创建`<script>`元素，并使用`insertBefore()`方法将其插入到文档中：
```javascript
(function() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.async = true;
script.src = 'http://yourdomain.com/script.js';
var scriptTag = document.getElementsByTagName('script')[0];
scriptTag.parentNode.insertBefore(script, scriptTag);
})();
```
在这个例子中，`async`属性的使用意味着浏览器不会等待脚本加载完毕再继续解析DOM，这在处理大量依赖的库或API请求时尤其有用。此外，将脚本封装在匿名函数中，并立即执行是为了避免全局变量污染，这是一个常见的最佳实践，如在Google Analytics和Google+的徽章加载中可以看到。
总结来说，了解和掌握JavaScript的同步和异步加载策略对于提升网站性能至关重要。开发者应根据项目需求选择适当的加载方式，平衡页面加载速度和功能实现，以提供流畅的用户体验。同时，随着HTML5的更新，异步加载技术如`async`属性的引入，使得开发者有了更多工具来优化现代Web应用的性能。
Javascript 异步加载详解异步加载详解(浏览器在浏览器在javascript的加载方式的加载方式)
一、同步加载与异步加载的形式一、同步加载与异步加载的形式
1. 同步加载
我们平时最常使用的就是这种同步加载形式：
<script src=”http://yourdomain.com/script.js”></script>
同步模式，又称阻塞模式，会阻止浏览器的后续处理，停止了后续的解析，因此停止了后续的文件加载（如图像）、渲染、代
码执行。
js 之所以要同步执行，是因为 js 中可能有输出 document 内容、修改dom、重定向等行为，所以默认同步执行才是安全的。
以前的一般建议是把<script>放在页面末尾</body>之前，这样尽可能减少这种阻塞行为，而先让页面展示出来。
简单说：加载的网络 timeline 是瀑布模型，而异步加载的 timeline 是并发模型。
2. 常见异步加载（Script DOM Element）
代码如下:
(function() {
var s = document.createElement(‘script’);
s.type = ‘text/javascript’;
s.async = true;
s.src = ‘http://yourdomain.com/script.js’;
var x = document.getElementsByTagName(‘script’)[0];
x.parentNode.insertBefore(s, x);
})();
异步加载又叫非阻塞，浏览器在下载执行 js 同时，还会继续进行后续页面的处理。
这种方法是在页面中<script>标签内，用 js 创建一个 script 元素并插入到 document 中。这样就做到了非阻塞的下载 js 代码。
async属性是HTML5中新增的异步支持，见后文解释，加上好（不加也不影响）。
此方法被称为 Script DOM Element 法，不要求 js 同源。
将js代码包裹在匿名函数中并立即执行的方式是为了保护变量名泄露到外部可见，这是很常见的方式，尤其是在 js 库中被普遍
使用。
例如 Google Analytics 和 Google+ Badge 都使用了这种异步加载代码：
代码如下:
(function() {
var ga = document.createElement(‘script’);
ga.type = ‘text/javascript’; ga.async = true;
ga.src = (‘https:’ == document.location.protocol ? ‘https://ssl’ : ‘http://www’) + ‘.google-analytics.com/ga.js’;
var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(ga, s);
})();
(function()
{var po = document.createElement(“script”);
po.type = “text/javascript”; po.async = true;po.src = “https://apis.google.com/js/plusone.js”;
var s = document.getElementsByTagName(“script”)[0];
s.parentNode.insertBefore(po, s);
})();
但是，这种加载方式在加载执行完之前会阻止 onload 事件的触发，而现在很多页面的代码都在 onload 时还要执行额外的渲染
工作等，所以还是会阻塞部分页面的初始化处理。
3. onload 时的异步加载
代码如下:
(function() {
function async_load(){
var s = document.createElement(‘script’);
s.type = ‘text/javascript’;
s.async = true;
s.src = ‘http://yourdomain.com/script.js’;
var x = document.getElementsByTagName(‘script’)[0];
x.parentNode.insertBefore(s, x);
}
if (window.attachEvent)
window.attachEvent(‘onload’, async_load);
else
window.addEventListener(‘load’, async_load, false);
})();
这和前面的方式差不多，但关键是它不是立即开始异步加载 js ，而是在 onload 时才开始异步加载。这样就解决了阻塞 onload
事件触发的问题。
补充：DOMContentLoaded 与 OnLoad 事件
DOMContentLoaded : 页面(document)已经解析完成，页面中的dom元素已经可用。但是页面中引用的图片、subframe可能
下载后可阅读完整内容，剩余3页未读，立即下载
565 浏览量
379 浏览量
122 浏览量
284 浏览量
265 浏览量
点击了解资源详情
点击了解资源详情
102 浏览量
105 浏览量
weixin_38652270
- 粉丝: 3
- 资源: 893
我的内容管理
展开
