加载模式

1.同步加载

默认的是同步加载,又称阻塞加载,加载的时候会阻止浏览器的后续处理,停止后续文件的解析和执行,如图像的渲染等等。采用同步加载是因为加载的Js文件中有对DOM的操作,重定向,输出DOM等行为,此时同步加载时安全的。把js文件放在body标签结束之前,是Js在页面最后加载,就是为了尽量减少页面阻塞,优先显示页面结构。

2.异步加载

异步加载是非阻塞加载,浏览器在加载Js的同时,还会进行后续页面的处理。通过查询资料,大概整理了异步加载有以下几种实现方式。

(1)script标签的async属性

<script src=""  async></script>

async属性表示后续文档的加载和渲染与js脚本的加载和执行是并行的,但是async只适用于外部脚本(有src属性是使用),是html5中的新属性

(2)script标签的defer属性

<script src="" defer></script>

defer属性表示加载文档的过程和js脚本的加载时并行执行的,但是js脚本的执行是在文档所有元素解析完成之后,defer规定的是js脚本执行的异步,只有IE浏览器支持

(3)动态创建script标签插入DOM结构

<script>
(function(){
    var s = document.createElement('script');
    s.type = '';
    s.src = "http://code.jquery.com/jquery-1.7.2.min.js";
    var tmp = document.getElementsByTagName('script')[0];
     tmp.parentNode.insertBefore(s, tmp);
})();
</script>

(4)ajax请求:通过XMLHttpRequest来获取js,然后创建一个script元素插入DOM,ajax请求成功后设置script.text为请求成功返回的responseText。

var getXmlHttp=function(){
        var obj;
        if(window.XMLHttpRequest){
            obj=new XMLHttpRequest();
        }else{
            obj=new ActiveXObject("Microsoft.XMLHTTP");
        }
        return obj;
}
var xmlHttp=getXmlHttp();
//采用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);
    }
}

3.延迟加载

延迟加载是将js切分成许多模块,页面初始化的时候只加载需要立即执行的Js,然后其他的延迟到第一次需要使用的时候再加载,类似于图片的延迟加载

4.预加载 

预加载是一种浏览器机制,使用浏览器空闲时间预先加载/下载用户接下来可能会访问的页面或者资源 放在缓存中,用户访问时直接从缓存中提存

-----------------目前了解的就这些,待补充

posted @ 2017-03-06 14:13  爱吃柚子的笨姑娘  阅读(258)  评论(0编辑  收藏  举报