高性能JavaScript--加载和执行(简要学习笔记一)

1.多数浏览器使用单一进程来处理用户界面刷新和JavaScript脚本的执行。所以同一时刻只能做同一件事。JavaScript执行过程耗时越久，浏览器等待相应的时间就越长。

2.<script>标签用来加载出现在<head>中的外链JavaScript文件，紧挨着<link>标签用来加载外部css文件或者其他页面元素。理论上来说，把与样式和行为有关的脚本放在一起，并先加载他们，这样有助于确保页面的渲染和交互的正确性。但这样会带来严重的性能问题。

3.由于脚本阻塞页面其他资源的下载，建议将所有的<script>标签放到<body>标签的底部。

4.多个<script>外链脚本的下载会带来HTTP请求的性能开销。所以下载单个100KB的文件将比下载4个25KB的文件快。也即减少页面中外链的数量将会改善性能。

5.无阻塞脚本的秘诀在于，在页面完成加载后才加载javascript。意味着在window对象的load事件触发后在下载脚本。

6.方法一:defer属性（IE中）

属性规定是否对脚本执行进行延迟，直到页面加载为止。

该属性指明元素含有的脚本不会修改DOM。

<html>
<body>
 
<script type="text/javascript" defer="defer">
alert(document.getElementById("p1").firstChild.nodeValue);
</script>
 
<p>上面的脚本会从下面的段落中请求信息。通常，这是做不到的，因为在段落加载之前，脚本已经运行过了。</p>
 
<p id="p1">hello zqz!</p>
 
<p>然而，defer 属性规定了脚本必须在页面加载完毕后执行。这样，脚本就可以从段落中请求数据了。</p>
 
<p><b>注释：</b>该属性只能在 Internet Explorer 中运行。</p>
 
</body>
</html>

方法二：html5中新增加的方法async="true"(IE9中可以)

async 属性规定一旦脚本可用，则会异步执行。

注释：async 属性仅适用于外部脚本（只有在使用 src 属性时）。

<!DOCTYPE html>
<html>
<body>
<p id="p1">Hello ZQZ!</p>
<script type="text/javascript" src="/example/html5/demo_async.js" async="async"></script>
</body>
</html>

方法三：动态加载脚本

动态加载脚本节点下载文件时，返回的代码通常会立即执行。

书上说在火狐，谷歌等浏览器上可以使用<script>元素接收完成时触发的一个load事件来监听脚本加载完成时的状态。

<script>

    var script=document.createElement("script");
    script.type="text/javascript";

    script.load=function(){

        alert("接收外部script完成！");
    };

    script.src="scprit1.js";
    document.getElementsByTagName("head")[0].appendChild(script);


</script>

可在我测试后，无论是在哪个浏览器都没有效果，不知道是为什么！求知道的博友们留言给我。谢谢！

而IE中有另外一种实现方式，他会触发一个readystatechange事件。可以用来监听script的加载完成。<script>元素提供一个readyState属性。

该属性有5种取值：

"uninitialized"　　//初始状态

"loading"　　//开始下载

"loaded"　　　//下载完成　

"interactive"　　//数据完成下载但尚不可用

"complete"　　//所有数据已准备就绪

然后在微软的相关文档中表明，在<script>生命周期中，并非每个取值都会用到。所以最靠谱的就是检查“loaded”跟"complete"。

var script=document.createElement("script");
    script.type="text/javascript";

    
    script.onreadystatechange=function(){
        //alert("0")
        if(script.readyState=="loaded" || script.readyState=="complete"){

            script.onreadystatechange=null;   //删除事件处理器，避免处理两次 
            alert("外部js接收完成");
        }

    };

    script.src="scprit1.js";
    document.getElementsByTagName("head")[0].appendChild(script);

该书中还有一个封装好的标准及IE特有的实现方法：

function loadscript(url,callback){
    var script=document.createelement("script");
    script.type="text/javascript";
    if(script.readystate){//ie
        script.onreadystatechange=function(){
            if(script.readystate=="loaded"||script.readystate== “complete"){
                script.onreadystatechange=null;
                callback();
            }
        };
    }else{//其它浏览器
        script.onload=function(){
            callback();
            };
        }
        script.src=url;
        document.getelementsbytagname("head")[0].appendchild(script);
    }

使用方法:

loadScript("scprit1.js",function(){

　　alert("外部js加载完成！")　　

})

posted on 2015-09-12 13:46 qize 阅读(1248) 评论(0) 编辑收藏举报

刷新页面返回顶部

高性能JavaScript--加载和执行(简要学习笔记一)

导航

公告