前端js性能优化总结

前端js性能优化总结

从代码书写效率和宏观的部署等两个方向进行总结。
1、代码效率
变量使用优化
声明对象和数组使用字面量,如var newarray = [];var newobject = {var p1 :''t';vat f1:function(){}}
Js寻找变量使用变量作用域链,如果常常使用的在外层作用域的可以使用临时变量代替。

For(){
to do document.body
}
写成
var tbody = document.body;
For(){
to do tbody
}

不用with
For优化 使用倒序循环 for (var i=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/
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值