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 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 方式加载,不过这种方式无法实现跨域加载,不适用于大型网站。