整理一下自己用到的网页性能优化(一)

诸如js、css文件位置的问题我就不多说了,那个大家都知道。这里我主要讲一下细节方面的优化。不足的估计暂时没想起来,后面再补充。
1、图片的优化,因为图片src的加载是异步的,所以如果你能提前之后图片的宽度和高度,不妨先预设一下,这样页面就不会出现闪的情况。

2、js方面,我建议每个都使用匿名函数包裹起来,就像这样:

(function(){
    //do something
})()

这样可以防止每个js文件的变量污染
3、对于每一个要使用的DOM节点之类的信息进行缓存,在一次获取DOM之后就赋值给变量,这样如果再次用到没就不需要再去获取,因为js操作DOM是很消耗性能的
4、非必要的时候不要使用new,而是直接赋值,类似于:

var arr = [];//support
var arr = new Array();//didn't support

new会执行很多次的操作,有兴趣的童鞋可以百度学一下它具体发生了哪些事情
5、使用immutable(不可变数据),这个多用在引用赋值,最多的就是数组和对象的赋值
6、你不需要jQuery,jQuery确实是封装了很多好东西,也很方便,但是它的很多方法却是最消耗性能的。
7、多尝试使用call和apply,这两个方法用的好会很精妙、
8、DOM结构不要嵌套过深,越深浏览器解析起来就越消耗时间
9、动画方面,多使用transform之类的,不要再去操作什么top了。给大家推荐一个很好用的js动画,叫TweenMax.js,相信我,你会爱上它。
10、避免高频率触发事件,js里有很多高频触发的事件,比如scroll、mousemove。pc端可能你不会觉得有什么,但是一到移动端,你绝对会卡到爆。上一个笔记有讲到怎么解决的。
11、还有很多先不写了。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值