网站重构的8点建议

1.用局部变量替换屡次使用的对象

好比咱们在一段代码内，屡次使用document、window这样的对象，咱们能够用局部变量替换他们。

var d = document,w = window;

原理：访问直接量和局部变量的速度快，相反，访问数组元素和对象成员相对较慢。

2.减小重绘与重排

重排：当页面布局和几何属性改变时候，须要重排，在重排后浏览器会从新绘制受到影响的部分到屏幕中，这个过程成为重绘。

如下操做会引起重排
·添加删除可见的DOM元素；

·元素位置、尺寸改变；

·文本变动；

·页面渲染器初始化；

·浏览器窗口尺寸改变。

而改变背景、文字颜色只会触发重绘。

咱们能够经过以下三步避免重绘、重排：

(1)使元素脱离文档流→方法：隐藏元素

(2)对其应用全部改变→方法：应用修改

(3)把元素带回文档中→方法：从新显示

原理：由于隐藏的元素不会发生重绘、重排。

3.打造快速响应的用户界面

不要让用户等过久，那么多久算久，可用性专家Jakob Nielsen的《可用性工程》中提升，响应用户的时间最好不要超过100毫秒。

咱们来拿糗事百科的一个升级来举例，以前的版本咱们点赞时候，会触发一个异步请求给服务器，告诉服务器赞的数值应该加1等信息，而后服务器返回同意功了，页面上赞的数量加1，这个过程慢时可能间隔数秒；以后作出的优化是，在用户点赞后马上展示一个“赞+1”的动画，而后再给服务器发送异步请求，处理后续数据。

这个优化给用户的感受就是更快了，用户的动做获得了快速反馈，这无疑是个进步，因此咱们要尽量快的对用户操做作出反应。

4.使用JSON替换XML

这个无需多说，JSON用作数据传输，它的体积要比XML小不少。

5.压缩合并你的JS与CSS

JS、CSS在线压缩工具：http://app.baidu.com/app/enter?appid=152856

另外你能够尝试用一些工具进行动态压缩，如：

Minify: https://code.google.com/p/minify/downloads/list

6.避免使用CSS表达式

background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

表达式的问题就在于它的计算频率要比咱们想象的多。不只仅是在页面显示和缩放时，就是在页面滚动、乃至移动鼠标时都会要从新计算一次。给CSS表达式增长一个计数器能够跟踪表达式的计算频率。在页面中随便移动鼠标均可以轻松达到10000次以上的计算。

因此，在非不得已，请避免使用CSS表达式。

7.不要使用for-in循环遍历数组元素

原理：for-in每次迭代操做会同时搜索实例或原型属性，所以，它比while和for会产生更多的开销。

8.使用事件委托

当页面中有大量元素须要绑定事件处理器的时候，咱们不要这样作：

$(“#myul li”).click(function(){});

咱们能够改用（jquery1.7+用on代替了delegate和live）

$(“#myul”).on(“click”,”li”,function(){});

原理：事件逐层冒泡并被父级捕获，只须要给外层元素绑定一个处理器，就能够触发全部子集事件，而不须要给每一个本身元素都绑定处理器，这是一种资源的浪费。

但愿以上经验能对你有所帮助，若是你想了解更多关于高性能方面的知识，你能够尝试阅读大神zakas的《高性能Javascript》或者Steve souders的《高性能网站建设指南》