码迷,mamicode.com
首页 > Web开发 > 详细

js里面可以提升性能的有哪些方法

时间:2019-10-27 21:05:04      阅读:128      评论:0      收藏:0      [点我收藏+]

标签:拖拽   使用   集合   浏览器   通过   实现   进入   开关   而且   

1.懒加载

  常见的就是图片的懒加载效果,每次浏览网页的时候,不是一次性将网页中的图片都加载过来,而是将可见范围内的图片加载过来,等到用户浏览下面网页的时候,再开始加载没有加载出来的图片

2. 事件委托

  事件委托就是给当前要绑定事件的父元素绑定要绑定的事件,通过事件源来判定当前点击的是哪个元素。这样做是为了减少事件的绑定次数,提高性能,而且还可以实现对未来元素的绑定。

3.函数的节流与放流

        函数的防抖就是通过定时器,来稀释事件触发的频率,只有停止对当前事件的触发,才会执行当前事件要执行的函数。

  函数的节流就是尽可能的较少事件触发的频率,通过延时器和开关门来实现。

4. 惰性函数

  惰性函数是减少函数的逻辑判断次数,只有在第一次执行的时候,才会进行判断,之后都不进行判断,而是直接进入函数,执行即可。

5.文档碎片

  在页面中创建多个元素,每次进行创建于添加,多次进行dom操作,消耗网页性能,可以在每次创建完元素之后,放入文档碎片,最后一次性放入页面中。

6.回流与重绘

  当渲染树中的一部分或者全部因为元素的尺寸、布局、隐藏等改变而需要重新构建的时候,这时候就会发生回流。

      每个页面都至少发生一次回流,也就是页面第一次加载的时候。

      在回流的时候,浏览器会使渲染树中受到影响的元素部分失效,并重新绘制这个部分的渲染树,完成回流以后,浏览器会重新绘制受到影响的部分元素到屏幕中,这个过程就是重绘

7. 循环遍历arr dom节点集合,先把.length缓存在一个变量中,为了减少页面中计算的次数

8.在进行鼠标按下,移动抬起实现拖拽的时候,拖拽三剑客在使用dom二级事件触发的时候,清除鼠标移动事件的时候,也会使用到变量的缓存。

 

js里面可以提升性能的有哪些方法

标签:拖拽   使用   集合   浏览器   通过   实现   进入   开关   而且   

原文地址:https://www.cnblogs.com/lxz123/p/11748740.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!