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>
3、XMLHttpRequest Script Injection XHR脚本注入