最大限度利用 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";
应该用
varmyFileId=document.getElementById("myField");
myFileId.style.backgroundColor="#CCC";
myFileId.style.color="#FF0000";
myFileId.style.fontWeight = "bold";6,用 for 循环遍历数组
for(vari=0;i<myArray.length;i++){
//dosomething
}
因为每次循环迭代时都要计算myArray数组的长度,应该用
for(vari=0,arrayLength=myArray.length;i<arrayLength;i++){
//dosomething
}
7,使用DOM
完全遍历和操作DOM会给web应用程序造成很大性能负担。问题是,与DOM的交互必不可少,
能给应用程序带来快速响应和丰富接口。DOM操作的一个特别问题是浏览器需要在屏幕上回流和
重绘(主要是重新呈现)元素。因此,减少代码中回流和重绘的次数就尤为重要。
varmyField=document.getElementById("myField");
myField.style.cssText="background-color:#CCC;color:#FF0000;font-weight:bold";
通过将样式修改合并起来,结果是只有一次回流和重绘,而且,响应速度和性能也得到提升。
其它:
LazyLoad库是一个小型(只有1,541字节)、独立的JavaScript库,可用来根据需要轻松加载JavaScript和CSS文件。
Firebugweb开发工具。
YUIProfiler是一个用于JavaScript的简单的不可见的代码分析器。
YSlow根据高性能web页面的规则分析web页面并给出提升页面性能的建议。
Fiddler是一个记录计算机与Internet之间所有HTTP(S)流量的WebDebuggingProxy。
用YUICompressor缩减JavaScript代码。