前端JS异步加载解析

前端网站开发兼职 前端开发外包兼职网站 网站前端web开发综合实训

一:同步加载
<script src=”http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js”></script>
<script src=”http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js”></script>
同步模式,是一种阻塞模式,会阻止浏览器的后续处理,停止后续的解析,只有在当前加载完成,才能进行下一步操作,但这样容易造成页面堵塞。

二:异步加载
异步加载又叫非阻塞加载,浏览器在下载执行js的同时,还会继续进行后续页面的处理。主要有三种方式。
方法一:Script DOM Element
(function(){
var scri = document.createElement(“script”);
scri.type = “text/javasctipt”;
scri.async = true;
scri.src = “http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js>
var x = document.getElementsByTagName(“head”)[0];
x.insertBefore(scri, x.firstChild);
})();
<async>属性是HTML5中新增的异步支持。此方法被称为Script DOM Element 方法。
但是这种加载方式执行完之前会阻止onload事件的触发,而现在很多页面的代码都在onload时还执行额外的渲染工作,所以还是会阻塞部分页面的初始化处理。
方法二:onload时的异步加载
(function(){
if(window.attachEvent){
window.attachEvent(“onload”, asyncLoad);
}else{
window.addEventListener(“load”,asyncLoad);
}

        function asyncLoad(){
            var scri=document.createElement("script");
            scri.type="text/javascript";
            scri.src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js";
            scri.async=true;
            var s=document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(scri,s);
            console.log(s.parentNode);
        }

    })();

这种方法只是把插入script的方法放在一个函数里面,然后放在window的onload方法里面执行,这样就解决了阻塞onload事件触发的问题。
注:DOMContentLoaded与load的区别。前者是在document已经解析完成,页面中的dom元素可用,但是页面中的图片,视频,音频等资源未加载完,作用同jQuery中的ready事件;后者的区别在于页面所有资源全部加载完毕。

方法三:XMLHttpRequest
通过XMLHttpRequest来获取javascript,然后创建一个script元素插入到DOM结构中。ajax请求成功后设置script.text为请求成功后返回的responseText。
//获取XMLHttpRequest对象,考虑兼容性。

    var xmlHttp;
    try{
        xmlHttp = new XMLHttpRequest();
    }catch{
       xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
//采用Http请求get方式;open()方法的第三个参数表示采用异步(true)还是同步(false)处理
xmlHttp.open("GET", "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js", true);
xmlHttp.send(); 
xmlHttp.onreadystatechange = function(){
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
        var script = document.createElement("script");
        script.text = xmlHttp.responseText;
        document.getElementsByTagName("head")[0].appendChild(script);
    }
}       

三、HTML5新属性:async和defer属性
<script type=”text/javascript” defer></script>
<script type=”text/javascript” async></script>
区别:
defer属性IE4.0就出现。defer属声明脚本中将不会有document.write和dom修改。浏览器会并行下载其他有defer属性的script。而不会阻塞页面后续处理。注:所有的defer脚本必须保证按顺序执行的。
async属性是HTML5新属性。脚本将在下载后尽快执行,作用同defer,但是不能保证脚本按顺序执行。他们将在onload事件之前完成。

前端开发能独立开发网站吗 科诺教育网站前端开发 网站前端开发教程书籍

» 本文来自:前端开发者 » 《前端JS异步加载解析》
» 本文链接地址:https://www.rokub.com/5793.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!