前端js性能优化总结

前端js性能优化总结

从代码书写效率和宏观的部署等两个方向进行总结。

1、代码效率

变量使用优化

声明对象和数组使用字面量，如varnewarray=[];varnewobject={varp1:''t';vatf1:function(){}}

Js寻找变量使用变量作用域链，如果常常使用的在外层作用域的可以使用临时变量代替。

如

For(){

tododocument.body

}

写成

vartbody=document.body;

For(){

todotbody

}

不用with

For优化使用倒序循环for（vari=length；i——；）i减为零自动为false，减少一个判断

Dom使用优化

将集合的length缓存在一个中间变量，一方面是访问更快，另外集合被改变length也会跟着变。

dom使用优化也是尽量将重复使用的变量使用中间变量，

避免重复的重绘和重排版

使用事件委托技术最小化事件句柄数量

HTMLcollect中的length是不断去访问的，而且循环改变也同时被改变

UI进程优化

页面现实和js解析是使用同一个ui进程，所以脚本的运行时间需要尽量控制在100ms之内，如果时间太长，将程序拆分使用settimeOut

在html5下也可以使用workers

其他：

不用eval，在setTimeOut、setInterval和Function中也不要用类似eval的功能，尽量使用原生方法。

2、代码位置和部署

为了避免js阻塞，一般js放到页面最后。压缩js。合并js。使用cdn。

3、工具篇

Yslow

Pagespeed

http://www.cleancss.com/