JavaScript与网页性能

Posted on 2012-03-28 22:22 匆匆阅读(429) 评论(0) 编辑收藏举报

JavaScript的加载和运行，对网页的性能有至关重要的作用。通常我们会采取以下方式来优化脚本：
1、将脚本放在页面底部。
JavaScript有阻塞的特征，当JavaScript运行时其他的事情不能被浏览器处理。大部分老版本浏览器是不允许JavaScript并行下载的。虽然IE8，Firefox3.5，Safari4，Chrome2允许并行下载JavaScript文件，但仍然要阻塞其他资源的下载过程，例如图片。即使脚本之间的下载过程互不阻塞，页面仍然要等待所有JavaScript代码下载并执行完成后才能继续渲染。因此，将<script>标签放在尽可能接近<body>标签底部的位置，可以减少对整个页面下载的影响。
2、减少<script>标签数。
每当页面解析碰到一个<script>标签时，紧接着有一段时间用于代码执行。最小这些延迟时间可以改善页面的整体性能。
3、尽量减少引用外部脚本文件的数量和体积。
可以将多个JavaScript脚本压缩合并，以减少HTTP请求数。

以上只是提高性能的第一步，当我们的JavaScript变得很大，产生一次HTTP请求，也有可能会锁定浏览器一大段时间。为了避开这种情况，我们可以逐步向页面添加JavaScript。这意味着等页面加载完之后，再下载源码。以下方法可以解决：
1、延期脚本Deferred Scripts(defer属性只被IE4+、Firefox3.5+支持，不是一个很理想的跨浏览器解决方案)。一个带有defer属性的<script>标签可以放在文档的任何位置。对应的文件将在<script>被解析时启动下载，但代码不会被执行，直到DOM加载完(在onload事件之前执行)
例如：<script type="text/javascript" src="util.js" defer></script>
2、动态脚本元素,DOM允许使用JavaScript动态创建HTML的几乎全部文档内容。因此，<script>元素也可以非常容易地通过标准的DOM函数来创建。这样做的好处是，无论在何处启动下载，文件的下载和运行都不会阻塞其他页面处理过程。

<script type="text/javascript">
    var JsLoader = {
        load: function (url, callback) {
            var script = document.createElement("script");
            script.setAttribute("charset", "utf-8");
            script.setAttribute("type", "text/javascript");
            script.setAttribute("src", url);
            document.getElementsByTagName("head")[0].appendChild(script);
            if (Browser.ie) {
                script.onreadystatechange = function () {
                    if (this.readyState == "loaded" || this.readyState == "complete") {
                        script.onreadystatechange = null; 
                        callback();
                    }
                };
            } else if (Browser.mozilla) {
                script.onload = function () {
                    callback();
                };
            } else {
                callback();
            }
        }
    };
    JsLoader.load("http://weyoo.cn/js/util.js", function () {
        JsLoader.load("http://weyoo.cn/js/jquery-1.7.1.min.js", function () {
            JsLoader.load("http://weyoo.cn/js/baseModel.js", function () {
                JsLoader.load("http://weyoo.cn/js/commonToolFn.js", function () {
                    alert("串联保证加载顺序哦");
                });
            });
        });
    });
</script>