JS同步、异步、延迟加载的方法_js同步返回值不要then资源-CSDN文库

66 浏览量 2021-01-21 12:09:01 上传评论收藏 74KB PDF 举报

资源推荐

资源详情

资源评论

JS同步、异步、延迟加载的方法同步、异步、延迟加载的方法

本文讲述了JS同步、异步、延迟加载的方法。分享给大家供大家参考，具体如下：

一：同步加载一：同步加载

我们平时使用的最多的一种方式。

<script src="http://yourdomain.com/script.js"></script>

同步模式，又称阻塞模式，会阻止浏览器的后续处理，停止后续的解析，只有当当前加载完成，才能进行下一步操作。所以默

认同步执行才是安全的。但这样如果js中有输出document内容、修改dom、重定向等行为，就会造成页面堵塞。所以一般建

议把<script>标签放在<body>结尾处，这样尽可能减少页面阻塞。

二：异步加载二：异步加载

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

方法一：也叫Script DOM Element

(function(){

var scriptEle = document.createElement("script");

scriptEle.type = "text/javasctipt";

scriptEle.async = true;

scriptEle.src = "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js";

var x = document.getElementsByTagName("head")[0];

x.insertBefore(scriptEle, x.firstChild);

})();

<async>属性是HTML5中新增的异步支持。此方法被称为Script DOM Element 方法。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);

})();

但是这种加载方式执行完之前会阻止onload事件的触发，而现在很多页面的代码都在onload时还执行额外的渲染工作，所以还

是会阻塞部分页面的初始化处理。

方法二：onload时的异步加载

(function(){

if(window.attachEvent){

window.attachEvent("load", asyncLoad);

}else{

window.addEventListener("load", asyncLoad);

}

var asyncLoad = 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);

}

)();

这种方法只是把插入script的方法放在一个函数里面，然后放在window的onload方法里面执行，这样就解决了阻塞onload事件

触发的问题。

注:DOMContentLoaded与load的区别。前者是在document已经解析完成，页面中的dom元素可用，但是页面中的图片，视

频，音频等资源未加载完，作用同jQuery中的ready事件；后者的区别在于页面所有资源全部加载完毕。

方法三：其他方法

由于JavaScript的动态性，还有很多异步加载方法： XHR Injection、 XHR Eval、 Script In Iframe、 Script defer属性、

本内容试读结束，登录后可阅读更多

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

内容反馈

weixin_38606870

粉丝: 1
资源: 922

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip