JavaScript 加载优化

最新推荐文章于 2022-07-20 16:44:41 发布

melin1204

最新推荐文章于 2022-07-20 16:44:41 发布

阅读量110

点赞数

分类专栏： AJAX 文章标签： JavaScript Firefox Chrome IE YUI ViewUI

本文链接：https://blog.csdn.net/melin1204/article/details/83641465

版权

AJAX 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1：HTML4 建议把 <script> tag放在head部分，页面加载时，首先从下到下处理页面元素。遇到<script> tag，如果src属性，首先下载js文件，下载完以后，再执行该文件中的js。此过程会阻塞页面后面元素的处理，导致在这过程中页面显示为空白。在早期的浏览器只支持单线程的下载。现在，Internet Explorer 8, Firefox 3.5, Safari 4, and Chrome 2支持多线程并行下载js文件，如果有多个 <script> tag，加快了下载速度，但仍然会阻塞页面的展现。所以建议把<script> tag放在<body> tag底部。如下方式：

<html>
<head>
   <title>Script Example</title>
   <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <p>Hello world!</p>
   <script type="text/javascript" src="file1.js"></script>
   <script type="text/javascript" src="file2.js"></script>
   <script type="text/javascript" src="file3.js"></script>
</body>
</html>

2：合并js文件，减少文件下载数量。即使http1.1的持久化连接，每个http请求仍然会有一个RTT延时，所以一个100k文件要比4个25k文件下载速度快。

3：Internet Explorer 4+ and Firefox 3.5+ <script> tag支持defer，文件下载完毕以后不会立即执行js，直到整个页面document创建完毕以后，才开始执行。

<html>
<head>
    <title>Script Defer Example</title>
</head>
<body>
    <script defer>
        alert("defer");
    </script>
    <script>
        alert("script");
    </script>
    <script>
        window.onload = function(){
            alert("load");
        };
    </script>
</body>
</html>

4：动态创建script 节点，会立即下载js文件并执行，这样会有一个问题，如果动态创建多个节点，有引用关系。由于无法保证加载执行的顺序，可能会导致文件执行错误。解决方法如下：

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 {  //Others
        script.onload = function(){
            callback();
        };
    }
    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
}

使用方式：

loadScript("file1.js", function(){
    loadScript("file2.js", function(){
        loadScript("file3.js", function(){
            alert("All files are loaded!");
        });
    });
});

4：比较流行的非阻塞加载模式：
YUI3：http://developer.yahoo.com/yui/3/
LazyLoad：http://github.com/rgrove/lazyload/
LABjs：http://labjs.com/