最大限度利用 JavaScript 和 Ajax性能

原文：http://www.ibm.com/developerworks/cn/web/wa-aj-jsajaxperf/

1，使用外部 JavaScript 文件。浏览器会缓存这些js文件。

2，如果用不到尽量不要使用js库或选择轻量级的js库。例如，YUI 库，可让您默认加载最小的空的框架，然后由您选择在此基础上加载哪些库。

3，脚本放置和加载。
   应该将 JavaScript 代码放在页面底部，如果可能，就在 </body> 标记之前。这样，web 页面其他部分（HTML、CSS、图片、Flash 内容等等）将会在脚本加载和执行前下载，从而会让用户觉得加载要快一些。
   如果您的 web 页面或应用程序需要很多 JavaScript，将所有代码放在一个单独文件中可能会造成下载和执行时长时间等待。这些情况下，最好将 JavaScript 代码分别放到多个文件中，当页面加载完成后在需要时动态加载。

4，最小化 Ajax 请求。一次请求尽可能多的信息，如分页数据和共数据量；

5，对一个元素应用多种样式
   document.getElementById("myField").style.backgroundColor = "#CCC";
   document.getElementById("myField").style.color = "#FF0000";
   document.getElementById("myField").style.fontWeight = "bold";
   应该用
   var myFileId = document.getElementById("myField");
   myFileId.style.backgroundColor = "#CCC";
   myFileId.style.color = "#FF0000";
   myFileId.style.fontWeight = "bold";

 

 

6，用 for 循环遍历数组
  
   for(var i=0; i < myArray.length; i++) {
       //do something
   }
   因为每次循环迭代时都要计算 myArray 数组的长度，应该用
   for(var i=0, arrayLength=myArray.length; i < arrayLength; i++) {
       //do something
  }
 
7，使用 DOM
完全遍历和操作 DOM 会给 web 应用程序造成很大性能负担。问题是，与 DOM 的交互必不可少，
能给应用程序带来快速响应和丰富接口。DOM 操作的一个特别问题是浏览器需要在屏幕上回流和
重绘（主要是重新呈现）元素。因此，减少代码中回流和重绘的次数就尤为重要。
var myField = document.getElementById("myField");
myField.style.cssText = "background-color: #CCC; color: #FF0000; font-weight: bold";
通过将样式修改合并起来，结果是只有一次回流和重绘，而且，响应速度和性能也得到提升。

其它：
LazyLoad 库 是一个小型（只有 1,541 字节）、独立的 JavaScript 库，可用来根据需要轻松加载 JavaScript 和 CSS 文件。
Firebug web 开发工具。
YUI Profiler 是一个用于 JavaScript 的简单的不可见的代码分析器。
YSlow 根据高性能 web 页面的规则分析 web 页面并给出提升页面性能的建议。
Fiddler 是一个记录计算机与 Internet 之间所有 HTTP(S) 流量的 Web Debugging Proxy。
用 YUI Compressor 缩减 JavaScript 代码。