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

1.懒加载

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

2. 事件委托

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

3.函数的节流与放流

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

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

4. 惰性函数

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

5.文档碎片

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

6.回流与重绘

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

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

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

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

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

猜你喜欢

转载自www.cnblogs.com/lxz123/p/11748740.html