SEO爱站网 logo SEO爱站网

HTML5梦工场:javascript与DOM交互提高性能和效率的有效方法实践

优化入门 1088 0 2019-09-20 08:25:31

HTML5梦工场:javascript与DOM交互提高性能和效率的有效方法实践>>

DNS预先处理 dns-prefetch,如果一个页面有多个不同地址的引用,则DNS预解析很有用。页面预先处理link标签的prefetch

1: 嵌套层级不要太深,一般三层最多了。这个主要还是看团队项目结构,命名规范对这个有很大影响,互有取舍,是命名长一点不会有重复还是命名方便一点嵌套深一点

2: css解析从右向左,所以最右边的应该是相对少一点的,比如.on.li_lick 就比.li_click.on要好(如果.on很多的线: html用了base64的img的话,并不会缓存起来,可以将这个base64的图片放在css文件里,css会缓存,图片就缓存起来了

01. 缓存变量。$(ul) 使用jquery这种语句记得将其存在变量里,每一句$()都是非常重的函数,能尽量少用就少用。

05. 对于大型的for循环,可能导致执行时页面卡住,可以考虑使用数组分块技术将循环分割成多个循环一部分一部分的执行

06. for循环里的条件判断lis.length一定要缓存在变量里,不然每一次都要去查询一次长度。

08. 插入到DOM文档:使用innerHTML的方式比appendChild要效率高。综上,移动端还是使用+号拼接字符串最后使用innerHTML的方式

09. 插入到DOM中时,一定要将插入结果放在变量里,在for循环结束后插入,千万不能在for循环中执行插入操作,会造成大量的重绘重排。尽量减少对DOM的操作

10. 这个例子需要动态添加,动态删除,每个li标签有click事件。如果每次插入到DOM后给li添加click事件,那么删除时就要清除注册在li上的click事件。非常麻烦。所以采用事件委托的机制,将事件绑定在ul上,通过target属来判断

12. 使用直接函数,而不是与之等同的函数,比如$.ajax(),其他$.get()等最终都是调用$.ajax(),多余的步骤多余的调用必然导致效率相对低

14. 善用事件委托:如果有许多类似的结构要绑定事件,都利用事件冒泡的机制,在上层元素上绑定事件

16. 对于有复杂动画的模块,尽量用定位使其脱离文档流。利用css3实现的动画,调用一下translate3d(0, 0, 0)或其他的的3d变换,就会调起硬件加速,这个页面其他动画就都会有硬件加速的效果了。要考虑低端机型的线. 函数尽量简单,少用闭包,嵌套的对象成员也会影响性能,总之结构尽量简单,能少一层就少一层

18. 对于非常频繁调用的函数,如scroll触发的函数,可以考虑使用函数节流,debounce,throttle

网友跟帖
展开