介绍
这篇文章给大家介绍怎么在JavaScript中实现同步,异步,延迟加载,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
<强>一:同步加载
我们平时使用的最多的一种方式。
<代码> & lt;脚本https://www.yisu.com/zixun/src=" http://yourdomain.com/script.js ">
同步模式,又称阻塞模式,会阻止浏览器的后续处理,停止后续的解析,只有当当前加载完成,才能进行下一步操作,所以默认同步执行才是安全的。但这样如果js中有输出文档内容,修改dom,重定向等行为,就会造成页面堵塞,所以一般建议把& lt; script>标签放在& lt; body>结尾处,这样尽可能减少页面阻塞。
<强>二:异步加载
异步加载又叫非阻塞加载,浏览器在下载执行js的同时,还会继续进行后续页面的处理。主要有三种方式。
方法一:也叫脚本dom元素
(函数(){
,var scriptEle =, document.createElement (“script");=,scriptEle.type “文本/javasctipt";=,scriptEle.async 真实;=,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),,
之前,})(); & lt; async>属性是HTML5中新增的异步支持。此方法被称为脚本DOM元素方法.Google分析和Google +徽章都使用了这种异步加载代码。
(函数(){;
,var ga =, document.createElement(& # 39;脚本# 39;),,=,ga.type & # 39; text/javascript # 39;,,=,ga.async ,真的,,
,ga.src =, (& # 39; https: & # 39;,==, document.location.protocol ?, & # 39; https://ssl& # 39;,:, & # 39; http://www& # 39;), +, & # 39;.google-analytics.com/ga.js& # 39;,,
,var s =, document.getElementsByTagName(& # 39;脚本# 39;)[0];,
,s.parentNode.insertBefore (,,),,
})(); 但是这种加载方式执行完之前会阻止onload事件的触发,而现在很多页面的代码都在onload时还执行额外的渲染工作,所以还是会阻塞部分页面的初始化处理。
方法二:onload时的异步加载
(函数(){
,如果(window.attachEvent) {
,window.attachEvent (“load", asyncLoad);
,其他}{
,window.addEventListener (“load", asyncLoad);
,}
,var asyncLoad =,函数(){
,var ga =, document.createElement(& # 39;脚本# 39;),,=,ga.type & # 39; text/javascript # 39;,,=,ga.async ,真的,,
,ga.src =, (& # 39; https: & # 39;,==, document.location.protocol ?, & # 39; https://ssl& # 39;,:, & # 39; http://www& # 39;), +, & # 39;.google-analytics.com/ga.js& # 39;,,
,var s =, document.getElementsByTagName(& # 39;脚本# 39;)[0];,
,s.parentNode.insertBefore (ga, s);
,}
)(); 这种方法只是把插入脚本的方法放在一个函数里面,然后放在窗口的onload方法里面执行,这样就解决了阻塞onload事件触发的问题。
注:DOMContentLoaded与内负载的区别。前者是在文档已经解析完成,页面中dom的元素可用,但是页面中的图片,视频,音频等资源未加载完,作用同jQuery中准备好了的事件;后者的区别在于页面所有资源全部加载完毕。
方法三:其他方法
由于JavaScript的动态性,还有很多异步加载方法:XHR注入,XHR Eval,在Iframe脚本,脚本推迟属性,文档。写(脚本标记)。
XHR注入(XHR注入):通过XMLHttpRequest来获取javascript,然后创建一个脚本元素插入到DOM结构中. ajax请求成功后设置脚本。文本为请求成功后返回的responseText。
,//获取XMLHttpRequest对象,考虑兼容性。
,var getXmlHttp =,函数(){
,var obj;
,if (window.XMLHttpRequest)
时间=obj 才能;new XMLHttpRequest ();
其他的,
时间=obj 才能;new ActiveXObject (“Microsoft.XMLHTTP");
,return obj;
,};
,//采用Http请求得到方式;开放()方法的第三个参数表示采用异步(真正的)还是同步(false)处理
,var xmlHttp =, getXmlHttp ();
,xmlHttp.open (“GET",,“http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js",,真的);
,xmlHttp.send (),,=,xmlHttp.onreadystatechange 函数(){
,if (xmlHttp.readyState ==, 4,,,, xmlHttp.status ==, 200) {
var 才能;script =, document.createElement (“script");
时间=script.text 才能;xmlHttp.responseText;
document.getElementsByTagName才能(“head") [0] .appendChild(脚本);
,}
以前,}
