注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

梦幻雪冰

技在手,能在身,思在脑,从容过生活——陈能堡

 
 
 

日志

 
 

移动H5前端性能优化——JavaScript优化和渲染优化  

2015-01-08 23:23:15|  分类: 移动端专题 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

移动H5前端性能优化

JavaScript优化

一:减少重绘和回流——>点击该处
二:缓存DOM选择与计算(变量存储)
三:缓存列表.length(变量存储)
四:尽量使用事件代理,避免批量绑定事件
五:尽量使用ID选择器
六:使用touchstart、touchend代替click
七:运算结果缓存
八:不要在循环中创建函数
这个很好理解,每创建一个函数对象是需要大批量空间的。所以在一个循环中创建函数是很不明智的,尽量将函数移动到循环之前创建,比如如下代码:

for(var i = 0, m = data.length; i < m; i++) {
handlerData(data[i], function(data){
//do something
});
}

就可以修改为

var handler = function(data){
//do something
};
for(var i = 0, m = data.length; i < m; i++) {
handlerData(data[i], handler);
}

九:慎用eval和with
Douglas Crockford将eval比作魔鬼,确实在很多方面我们可以找到更好地替代方式。使用它时需要在运行时调用解释引擎对eval()函数内部的字符串进行解释运行,这需要消耗大量的时间。像Function、setInterval、setTimeout也是类似的
Douglas Crockford也不建议使用withwith会降低性能,通过with包裹的代码块,作用域链将会额外增加一层,降低索引效率。
十:使用布尔表达式的短路
在很多语言中,如果bool表达式的值已经能通过前面的条件确定,那么后面的判断条件将不再会执行,比如如下代码

function calCondition(params) {
var result;
//do lots of work
return !!result;
}

if(otherCondition && calCondition(someParams)) {
console.log(true);
} else {
console.log(false);
}

这里首先会计算otherCondition的值,如果它为false,那么整个正则表达式就为false了,后续的需要消耗大量时间的
calCondition()函数就不会被调用和计算了,节省了时间。
十一:使用CDN——>点击该处
在编写JavaScript代码中,我们经常会使用库(jQuery等等),这些JS库通常不会对其进行更改,我们可以将这些库文件放在CDN(内容分发网络上),这样能大大减少响应时间。
十二:压缩与合并JavaScript文件
在网络中传输JS文件,文件越长,需要的时间越多。所以在上线前,通常都会对JS文件进行压缩,去掉其中的注释、回车、不必要的空格等多余内容,如果通过uglify的算法,还可以缩减变量名和函数名,从而将JS代码压缩,节约传输时的带宽。另外经常也会将JavaScript代码合并,使所有代码在一个文件之中,这样就能够减少HTTP的请求次数。合并的原理和sprite技术相同。

欢迎学习交流——梦幻雪冰
渲染优化
一:HTML使用viewport
二:减少DOM节点
三:尽量使用CSS3动画
四:合理使用requestAnimationFrame动画代替setTimeout——>点击该处
五:适当使用Canvas动画
六:touchmove、scroll事件会导致多次渲染
七:使用(CSS3 transition、CSS3 3D transform、opacity、Canvas、video)来触发GPU渲染

欢迎学习交流——梦幻雪冰
本文资料来源于互联网上的资料,如有疑问请跟博主进行沟通。
转载该文章请声明转载来源,最终解释权归梦幻雪冰所有。
  评论这张
 
阅读(158)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017