在Web2.0和RIA大行其道的今天，JavaScript应用越来越广泛，很多的前端的用户体验效果，都是依赖JS特效来实现。 ?同时，JS的框架也是百花齐放，老牌的prototype, 最受开发者喜爱的灵巧的jQuery ，新锐JS框架Mootool，得到雅虎力推的YUI，最适合企业应用系统开发的EXTJS等等，一片繁荣景象。

但是，由于用户浏览器使用情况的千差万别，尤其是性能极差的不死的IE6的顽固存在，同时JS的使用已经超越了浏览器的性能极限，而开发者对于JS性能的理解还存在空白，导致JS的性能问题越来越受到人们的重视。下面就我所知道的关于JS性能方面的一些经验总结，欢迎批评指正。

1.避免Javascript加载时Block引起的阻塞

这个问题在所有的JS性能教程上都是很重要的一条了，先呈上一幅图看下阻塞的情况。

JavaScript放于头部引起的阻塞

在雅虎的高性能网页开发的14条军规中已经对这样的情况提出了解决方案。

第1条: 尽可能的减少 HTTP 的请求数 ?=>?合并JS,减少Block的次数

第6条: 将脚本移动到底部（包括内联的）=> 减少阻塞对网页加载页面渲染的影响

第10条: 压缩 JavaScript 和 CSS (包括内联的) => 减少阻塞的时间

如果条件允许，使用JS的动态加载技术，也是一个很不错的方案

JavaScript放于尾部，减少阻塞对页面的影响

2. ?尽可能的使用局部变量

?

//错误的代码：html()执行了100次
for (var i=0;i<100;i++){
   $("#id").html(    $("#id").html() + "hello" );
}

//正确的代码：html()执行了2次
var str= $("#id").html() ;
for (var i=0;i<100;i++){
   str =str + "hello";
}
 $("#id").html(str );

?

?

下面是测试的性能对比数据

Dom读取100次循环执行的对比数据

Dom读取1000次循环执行的对比数据

由上图可以看出，在100次循环的时候，性能对比是1ms VS 30ms,?当1000次循环的时候，性能对比是2ms VS 786 ms?，这个差距是相当惊人的。

对于Dom的操作的资源消耗是非常昂贵， Dom是用来操作，不是用来计算的。用局部变量保存这个值并用来计算，会显著提高JS的性能

3. 多使用ID选择器，少使用CSS选择器

JQ的ID选择器比CSS的选择器要快很多倍，尤其与是页面上的Dom的数量多少成反比，Dom数量越多，CSS选择器越慢

//性能差的写法
$(".title").html();

//性能好的写法
$("#test").html();
?