WEB开发性能优化总结

一、减少字节数

(1) 减少js代码量

• 使用jquery本身就减少了代码量；
• 减少换行符、空格等多余字符，精简注释；
• 将多个页面共有的js脚本提出独立文件;
• 代码书写方面：可以用逗号隔开一次定义多个本地变量，这样可以节省一些字节；
• 更好的利用链 例如：$(“#id_div”).bind(“click”,function(){;}).css('border', '3px dashed yellow').hide(“slow”);
• 压缩处理（可去掉注释后压缩）

(2) 减少css代码量

• 减少换行符、空格等多余字符，精简注释；body{font-family:宋体, Arial, sans-serif;font-size: 12px;color: #333;background-color:#fff;}
• 代码缩写；border: 1px solid #333; margin: 10px 0 20px 10px;
• 压缩处理

(3) 减少html代码量，例如Div+Css合理布局，例如图片以css背景形式引入。

(4)  减小图片大小

• 采用图片压缩工具；
• 适当裁切。

二、减少请求次数

(1) CSS合并图片，减少图片的访问次数，采用CSS Sprites；

缺点：维护代价高，所以一般在项目后期制作即可。

(2) 合并js、css并外部引用，减少其他页面访问时再次加载。某些大型网站首页访问量过大，将js、css都直接写在首页上；

(3) Web应用时，提高警惕，避免循环请求，案例说明：

如下代码：img的http请求次数过多，假设只有2张不同的图片，如下代码在IE下访问时，会产生6次 而我们只需要访问2次即可。

$("#module_blog img").load(function(){

$("#module_blog img").each(function(){
var ImgD = $(this);
var image = new Image();
image.src = ImgD.attr("src");
if(image.width>targetWidth)
{
ImgD.css("width",targetWidth+"px");
}

});});

三、调整加载顺序，提高页面显示速度

我们需要分析哪些内容是页面呈现时所必需首先加载的？哪些内容和结构可以稍后再加载？

(1)利用Ajax加载局部内容：例如博客首页，可以分模块加载；

(2)利用js控制未加载完之前显示loading，友好的用户体验。

四、CPU利用率（针对Jquery框架）

(1)选择器排序：

a)       ID选择器，例如“$(“#id_div”)”；

b)       标签选择器Tag，例如“$(“input”)”；

c)       类选择器.class，例如“$(“. class_text”)”；

(2)用距离最近的父亲元素ID找element，例如：假设有一批输入框需要遍历，那么$(“#id_div input”)，要更加优于$(“input.class_text”);

其实DOM的遍历和循环才是性能低下的原因！

(3)缓存jQuery对象

例如1，如果需要对一个div进行多种操作，则可以将此对象定义成一个变量缓存起来：var $divObj = $(“#id_div”);

例如2，如果需要多处使用，则可以将其缓存到一个全局范围的对象里：

window.$my{head: $(“#id_head”), div: $(“#id_div”)}

var script = document.createElement('script');

$my.head.append(script);

(4)使用子查询

jQuery允许我们在一个包集上附加其它的选择器。因为我们已经在本地变量里保存了父对象这样会减少以后在选择器上的性能开销。

$divObj find('input.off');

(5)更好的利用链

例如：$(“#id_div”).bind(“click”,function(){;}).css('border', '3px dashed yellow').hide(“slow”);

这样减少js代码，也避免多次查找。

(6)限制直接对DOM操作

Dom操作的基本做法是在内存中创建Dom结构，然后再更新Dom结构，直接操作Dom结构性能是低下的；假设要动态创建元素，不要在循环里直接操作dom添加，例如：

for(var i=0;i< length;i++){$(“#id_ul”). append(“<li>”+i+”</li>”);}

取而代之，在插入dom结构之前，现在一个字符串里创建一套元素，例如：

var strHtml=””;

for(var i=0;i< length;i++){ strHtml +=“<li>”+i+”</li>”;}

$(“#id_ ul”). html(strHtml);

注：可以直接使用html代替append，因为html方法的源代码是：this.empty().append(value);

更快的做法，在插入DOM结构之前我们应该总是在一个父节点里包含许多元素，例如：

var strHtml=’ <ul id="#mylist">’;

for(var i=0;i< length;i++){ strHtml +=“<li>”+i+”</li>”;} strHtml+=’</ul>’;

$(“#id_ul”). replaceWith (strHtml);

注：经测试，此方法在大数据量的情况下，能快很多，详见测试。

(7)事件委托（冒泡事件）

附：除非特殊设定，否则是一定会冒泡的，可以用return false来阻止事件冒泡；

实际项目中经常用到：很多时候我们只需要对它们的父级绑定一次，而且可以计算出是哪一个节点触发了事件：父节点担当着发报机的工作，可以在触发了事件的目标element上做一些工作。

 (8)善用$(windows).load

虽 然$(document).ready 非常有用，它在页面呈现时发生，虽然其它对象还在下载中。如果你发现你的页面在下载中停顿，就有可能是$(document).ready 引起的。所以我们可以通过把jQuery functions绑定到$(window).load事件来减少下面下载时的CPU使用率，它是在所有HTML（包括iframe内容）都下载完以后才去调用所有对象的：

例如多余的功能，如拖拽、绑定可视化效果和动画、预读取图片等，使用这种方法比较好。