相对与HTML,CSS，javascript是最影响浏览器性能的，因为浏览器在遇到《script》标签时，必须等待js代码下载和执行完毕后再执行后面的内容，因此当页面中js文件过多时，网站访问速度明显下降。然而，现在的web应用用到js只会越来越多，那么我们如何有效组织js代码来提高网站的性能呢？通过相关资料，我总结了以下需要注意的几点。

1、将script标签置于网页底部，一般置于标签之前。这样用户不必等待js加载并执行完成后就可以完整的浏览整个网页。

2、将多个js文件合并到一个url中加载，以减少http请求。对于此点，可阅读 http://dancewithnet.com/2010/06/08/minify-js-and-css-files-in-server/

3、通过js动态创建《script》标签动态加载js文件，以达到无阻赛的加载脚本，可以写一个函数来做这个工作

1 function loadScript(url,callback){

2      var script=document.createElement("script");

3      script.type="text/javascript";

4      if(script.readyState){

5           //ie 浏览器

6           script.onreadystatechange=function(){

7                if(script.readyState=="loaded" ||        script.readyState=="complete"){

8                     script.onreadystatechange=null;

9                     callback();

10                }

11           }

12      }else{

13           script.οnlοad=function(){

14                callback();

15           }

16      }

17      script.src=url;

18      document.getElementByTagName("head")[0].appendChild(script);

19 }

以上这种方式是一种跨浏览器的非常易用的方法，也可以通过XMLHttpRequest脚本注入的方式，但此方式有跨域的限制，所以推荐上面的方式。

互联网上有很多这样的js库，供我们下载使用：

Lazyload类库，下载地址：http://github.com/rgrove/lazyload/

使用方法

PHP1.CN | 中国最专业的PHP中文社区 | json解析格式化 | PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具

Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有 京ICP备19059560号-4