浏览器渲染优化

1.循环的优化

两层嵌套for循环，采用大循环在内，小循环在外

for(var i= 0;i<1000;i++){

　　for(var j = 0;j<10000;j++){

　　 　　var a = i;

　　}

}

执行次数 ： (1000 + 1000*10000)*2+1000*10000

for(var i= 0;i<10000;i++){

　　for(var j = 0;j<1000;j++){

　　 　　var a = i;

　　}

}

执行次数 ： (10000 + 10000*1000)*2+1000*10000

执行次数只差：18000次

2.渲染次数优化

eg：能操作到tr级别去append，就不要在td级别append，dom重绘挺费时间

var contentHtml = "<tr  class="curTr"><td></td><td></td><td></td><td></td><td></td></tr>";

$("tbody").append(contentHtml );

表格内容渲染：1次

var tdHtml = "<td></td>";

$("tbody").append("<tr class='curTr'></tr>");

for(var i=0;i<5;i++){

   $(".curTr").append("<td></td>");

}

表格内容渲染：6次

dom重绘差5次

3.用的变量获取尽量不要跨作用域去寻找，能申明局部变量的尽量申明局部变量

var i = 0;

function draw(){

　　$("tbody").append("<tr class='curTr'>"+i+"</tr>");

}

 

function draw(){

　　var i =0;

　　$("tbody").append("<tr class='curTr'>"+i+"</tr>");

}

 

4.能手动垃圾回收的变量，手动置成null

function draw(){

　　var $tbody = $("tbody");

　　$tbody.append("<tr class='curTr'>"+"寸土不让"+"</tr>");

　　$tbody = null;

}