同步加载与异步加载

最新推荐文章于 2024-09-03 13:48:14 发布

Mr_董

最新推荐文章于 2024-09-03 13:48:14 发布

阅读量2w

点赞数 3

分类专栏： javascript

本文链接：https://blog.csdn.net/donggx/article/details/53534101

版权

javascript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

这几天一直在忙项目上线的问题，碰到了好多问题,比如异步加载、事件冒泡、浏览器缓存。这篇文章主要是文件的同步加载和异步加载。

先说下我碰到的问题：项目要接入到支付宝城市服务中，但是安卓和ios设置支付宝的导航栏内容有差异。安卓和ios都是拿页面的title设置导航栏的内容，但是安卓支持用js动态的修改title，ios是在页面初始化时会默认拿title作为导航栏内容，初始化后用JS动态修改无效。支付宝提供了设置支付宝导航的jsAPI，需要加载两个文件，我之前是在项目中直接加载这连个文件，在调用它提供的方法，没问题完美设置。但是后来我感觉这样不好我不是每个输出的商户都需要设置，所以我用navigator.userAgent判断是不是在支付宝客户端打开，在动态添加这两个JS文件，在这就出现问题了，你动态添加完JS后，马上执行里面的方法有时会出现错误，说明你还没有加载成功时就执行了方法。

这里就是我们经常说的同步加载与异步加载：

1. 同步加载

我们平时最常使用的就是这种同步加载形式：

同步模式，又称阻塞模式，会阻止浏览器的后续处理，停止了后续的解析，因此停止了后续的文件加载（如图像）、渲染、代码执行。

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 = 'js/jQuery.js';
     var x = document.getElementsByTagName('script')[0];
     x.parentNode.insertBefore(s, x);
})();

jQuery方法

$("head").append(“jQuery.js”)

异步加载又叫非阻塞，浏览器在下载执行 js 同时，还会继续进行后续页面的处理。

这种方法是在页面中<script>标签内，用 js 创建一个 script 元素并插入到 document 中。这样就做到了非阻塞的下载 js 代码。

3. onload 时的异步加载

(function() {
     function async_load(){
         var s = document.createElement('script');
         s.type = 'text/javascript';
         s.async = true;
         s.src = 'js/jQuery.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);
})();