提升JavaScript的加载与执行效率

1.为了避免页面加载时的停顿甚至空白页的出现，JS 脚本应尽量放置在页面底部.2.改善页面的阻塞情况，应尽可能的减少页面中<script>标签的出现次数，这同时也是考虑到HTTP 请求会带来额外的性能开销，也就是说应减少页面中外链脚本的数量。可以把相关JS文件合并，通过相关工具实现。 解决页面阻塞情况，提供如下解决方案：1. 延迟的脚本HTML4 为<script>标签定义了一个defer 属性，它能使这段代码延迟执行，然而该属性只有IE4+ 和Firefox 3.5+ 支持。声明了defer 属性的<script>会在DOM加载完成，window.onload 事件触发前被解析执行：2. 动态脚本元素这是最通用的解决方案，通过DOM 动态地创建<script>元素并插入到文档中，文件在该元素被添加到页面时开始下载，这样 无论在何时启动下载，文件的下载和执行过程不会阻塞页面其他进程。不过要注意使用这种方式加载的代码会立刻执行，这样需清楚的了解各文件的作用以及合理的执行顺序，此时跟踪并确保脚本下载完成并准备就绪是很有必要的，非IE浏览器会在<script>元素接收完成时触发一个load 事件，而IE 下则会触发一个readystatechange 事件并通过readyState 属性加以判断便可。以下是兼容地动态加载一个JS 脚本的函数：

function

load_script(url, callback) {

var
[code]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);

}

3. XMLHttpRequest 脚本注入即通过AJAX 方式加载，不过这种方式无法实现跨域加载，不适用于大型网站。