现在公司的项目里大量是使用了JavaScript代码，用户在界面上反映页面操作反应很慢，查其原因，页面上只有几条数据，应该不是访问服务器造成的反应缓慢，那就应该是前台页面的问题了。看看js代码，发现很多方法多非常臃肿，有的还是用了大量的双层循环、有大量的“+=”操作、有大量的DOM操作。。。。。。
为了优化代码性能，提高用户体验质量，决定寻找优化网站性能的方法。
JavaScript的优化细节
一、避免出现脚本失控
脚本失控基本上有以下四个方面的原因：
1. 在循环中执行了太多的操作
2. 臃肿的函数体
在JavaScript中，我们应该尽可能的用局部变量来代替全局变量!
3. 过多的递归
使用迭代方式替代递归，采用memoization技术优化递归
4. 过多的DOM调用
对DOM的操作是非常昂贵的，因为这会导致浏览器执行回流（reflow）操作。而执行了过多的回流操作，你就会发现自己的网站变得越来越慢了。我们应该尽可能的减少DOM操作。

回流操作主要会发生在几种情况下：
* 改变窗体大小
* 更改字体
* 添加移除stylesheet块
* 内容改变哪怕是输入框输入文字
* CSS虚类被触发如 :hover
* 更改元素的className
* 当对DOM节点执行新增或者删除操作或内容更改时。
* 动态设置一个style样式时（比如element.style.width=”10px”）。
* 当获取一个必须经过计算的尺寸值时，比如访问offsetWidth、clientHeight或者其他需要经过计算的CSS值（在兼容DOM的浏览器中，可以通过getComputedStyle函数获取；在IE中，可以通过currentStyle属性获取）。

解决问题的关键，就是限制通过DOM操作所引发回流的次数:
1.在对当前DOM进行操作之前，尽可能多的做一些准备工作，保证N次创建，1次写入。
2.在对DOM操作之前，把要操作的元素，先从当前DOM结构中删除：

1. 通过removeChild()或者replaceChild()实现真正意义上的删除。
2. 设置该元素的display样式为“none”。
修改操作完成后，将上面这个过程反转过来，建议使用第2种方式。
3.CSS部分
另外一个经常引起回流操作的情况是通过style属性对元素的外观进行修改，如element.style.backgroundColor = “blue”;

每次修改元素的style属性，都肯定会触发回流操作，要解决这个问题可以：

1. 使用更改className的方式替换style.xxx=xxx的方式。
2. 使用style.cssText = ”;一次写入样式。
3. 避免设置过多的行内样式
4. 添加的结构外元素尽量设置它们的位置为fixed或absolute
5. 避免使用表格来布局
6. 避免在CSS中使用JavaScript expressions(IE only)
4.将获取的DOM数据缓存起来。这种方法，对获取那些会触发回流操作的属性（比如offsetWidth等）尤为重要。
5.当对HTMLCollection对象进行操作时，应该将访问的次数尽可能的降至最低，最简单的，你可以将length属性缓存在一个本地变量中，这样就能大幅度的提高循环的效率。

二、避免大字符串字面量对象操作，如 字符串.lenth，尽量转换为new String(字符串)后再进行操作
如果是追加字符串，最好使用s+=anotherStr操作，而不是要使用s=s+anotherStr。
如果要连接多个字符串，应该少使用+=，如
s+=a;
s+=b;
s+=c;
应该写成
s+=a + b + c；
而如果是收集字符串，比如多次对同一个字符串进行+=操作的话，最好使用一个缓存。怎么用呢？使用JavaScript数组来收集，最后使用join方法连接起来，如下
var buf = new Array();
for(var i = 0; i < 100; i++){
buf.push(i.toString());
}
var all = buf.join("");

三、在做字符查找替换等操作时善用正则表达式

四、减少语句，利用运算符优先级实现if else表达式，使用三元表达式，使用连续表达式

五、将CSS，JS文件合并到一个文件
文件优化也是一个很有效的手段，删除所有的空格和注释，把代码放入一行内，可以加快下载的速度，注意，是下载的速度而不是解析的速度，如果是本地，注释和空格并不会影响解释和执行速度。
六、尽量使用语言本身的构造和内建函数

其他一些性能优化：
1.局部变量和全局变量
局部变量的速度要比全局变量的访问速度更快，因为全局变量其实是全局对象的成员，而局部变量是放在函数的栈当中的。
2.不使用Eval
使用eval相当于在运行时再次调用解释引擎对内容进行运行，需要消耗大量时间。这时候使用JavaScript所支持的闭包可以实现函数模版（关于闭包的内容请参考函数式编程的有关内容）
3.减少对象查找
因为JavaScript的解释性，所以a.b.c.d.e，需要进行至少4次查询操作，先检查a再检查a中的b，再检查b中的c，如此往下。所以如果这样的表达式重复出现，只要可能，应该尽量少出现这样的表达式，可以利用局部变量，把它放入一个临时的地方进行查询。
这一点可以和循环结合起来，因为我们常常要根据字符串、数组的长度进行循环，而通常这个长度是不变的，比如每次查询a.length，就要额外进行一个操作，而预先把var
len=a.length，则就少了一次查询。
4.类型转换
1）.把数字转换成字符串，应用"" + 1，性能上来说：("" + ) > String() > .toString() > new String()
2）.浮点数转换成整型，这个更容易出错，很多人喜欢使用parseInt()，其实parseInt()是用于将字符串转换成数字，而不是浮点数和整型之间的转换，我们应该使用Math.floor()或者Math.round()。
3）.对于自定义的对象，如果定义了toString()方法来进行类型转换的话，推荐显式调用toString()，因为内部的操作在尝试所有可能性之后，会尝试对象的toString()方法尝试能否转化为String，所以直接调用这个方法效率会更高
5.使用直接量
其实这个影响倒比较小，可以忽略。什么叫使用直接量，比如，JavaScript支持使用[param,param,param,...]来直接表达一个数组，以往我们都使用new Array(param,param,…)，使用前者是引擎直接解释的，后者要调用一个Array内部构造器，所以要略微快一点点。
同样，var foo = {}的方式也比var foo = new Object();快，var reg = /../;要比var reg=new RegExp()快。
6.对象查询
使用[""]查询要比.items()更快，这和前面的减少对象查找的思路是一样的，调用.items()增加了一次查询和函数的调用。
7.定时器
如果针对的是不断运行的代码，不应该使用setTimeout，而应该是用setInterval。setTimeout每次要重新设置一个定时器。