JavaScript加载和执行

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>无标题文档</title>
 6 <script>
 7     window.onload =function(){
 8         var a=6;
 9         document.getElementById("header").innerHTML="hello";
10         }
11 </script>
12 </head>
13 <body>
14     <h1 id="header">zzzzz</h1>
15     <script>
16         alert(a);
17     </script>
18 </body>
19 </html>

以上代码脚本放在<head></head>里，需要下载脚本花时间，代码执行花时间，如果脚本很多或者执行时间长，有些阻塞页面渲染，导致用户访问页面会先出现空白文档；

ReferenceError: a is not defined

如果没有window.onload，也会出错，因为页面还没加载完，比如没有<h1>也就取不到，根本改变不了innerHTML；当然了定义的a 是可以访问到的；

如果是下面这种形式，<script>放在底部

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
        var a=6;        
</script>
</head>
<body>
    <h1 id="header">zzzzz</h1>
    <script>
        alert(a);
        document.getElementById("header").innerHTML="hello";
    </script>
</body>
</html>

这时候，页面先是出现zzzzz，之后弹出a的值，然后zzzzz的值改变hello；

2.组织脚本

　　考虑到HTTP请求会带来额外的性能开销，因此下载单个100kb的文件将比下载4个25kb的文件更快！减少页面中外链脚本文件的数量将会改善性能！网络上有工具可以合并<script>。

3.无阻塞脚本

　　就是页面加载完成后加载JavaScript代码。可以用defer属性或者HTML5的async属性，区别在于执行实际，async是加载完成后自动执行，defer等待页面完成后执行；defer现在被很多浏览器支持

4.动态脚本

　　无论在合适启动下载，文件的下载和执行过程不会阻塞页面其他进程；

<script>
    function loaScript(url,callBack){
        var script = document.createElement("script");
        script.type = "text/javascript";
        if(script.readyState){
            script.onreadystatechange = function(){
                if(script.readyState == "loaded" || script.readyState == "complete"){
                    scriot.onreadystatechange = null;
                    callBack();
                }
            };

        }else{
            script.onload = function(){
                callBack();
            }
        }
        script.src = null;
        document.getElementsByTagName("head")[0].appendChild(script);
    }
//如果你有多个外链脚本，如下调用
loadScript("file1.js",function(){
    loadScriot("file2.js",function(){
            loadScriot("file3.js",function(){
                loadScriot("file4.js",function(){
                    alert("all file are loaded!")
                })    
            })    
        });
    })
</script>

5.XMLHttpRequest脚本注入。(优点：可以下载JavaScript代码但不立即执行)（缺点：JavaScript文件必须与所请求页面处于相同的域，意味着不能从CDN下载）

<script>
        var xhr = new XMLHttpRequest();
        xhr.open("GET","file1.js",true);
        xhr.onreadystatechange = function(){
            if(xhr.readyState==4){
                    if(xhr.status>=200&&xhr.status<300||xhr.status==304){
                            var script = document.createElement("script");
                            script.type = "text/javascript";
                            script.text = xhr.responseText;
                            document.body.appendChild(script);
                        }
                
                }
            };
        xhr.send(null);
    </script>

posted @ 2016-03-08 16:12 短短几年当校长 Views(175) Comments(0) 收藏举报

刷新页面返回顶部

短短几年当校长

JavaScript加载和执行

公告