前端进阶版本，性能优化—-防抖、节流、重绘与回流-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端进阶版本，性能优化—-防抖、节流、重绘与回流。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

【防抖】

【节流】

重绘(repaint)

回流(reflow)：又叫重排（layout）

工作中要如何避免大量使用重绘与回流?

常见的会导致回流的元素

【防抖】

任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行。

/**
 * 防抖函数
 * @author vision
 * @param {执行函数} fn
 * @param {延迟} delay
 */
export function debounce(fn, delay) {
  let timer = null;
  return function() {
    let context = this;
    let arg = arguments;
    clearTimeout(timer);
    timer = setTimeout(function() {
      fn.apply(context, arg);
    }, delay);
  };
}

/**
 * 防抖函数 - 箭头函数
 * @param {执行函数} fn
 * @param {延迟} delay
 */
export const debounceEs6 = (fn, delay) => {
  let timer = null;
  return (...rest) => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn(rest);
    }, delay);
  };
};

前端进阶版本，性能优化—-防抖、节流、重绘与回流,前端,性能优化

【节流】

指定时间间隔内只会执行一次任务。


    function throttle(fn) {
      // 通过闭包保存一个标记
      let canRun = true;
      return function() {
        // 在函数开头判断标志是否为 true，不为 true 则中断函数
        if(!canRun) {
          return;
        }
        // 将 canRun 设置为 false，防止执行之前再被执行
        canRun = false;
        // 定时器
        setTimeout( () => {
          fn.call(this, arguments);
          // 执行完事件（比如调用完接口）之后，重新将这个标志设置为 true
          canRun = true;
        }, 1000);
      };
    }

前端进阶版本，性能优化—-防抖、节流、重绘与回流,前端,性能优化

重绘(repaint)

当元素样式的改变不影响布局时，浏览器将使用重绘对元素进行更新，此时由于只需要 UI 层面的重新像素绘制，因此损耗较少。
常见的重绘操作有：

改变元素颜色改变
元素背景色
more ……

回流(reflow)：又叫重排（layout）

当元素的尺寸、结构或者触发某些属性时，浏览器会重新渲染页面，称为回流。此时，浏览器需要重新经过计算，计算后还需要重新页面布局，因此是较重的操作。
常见的回流操作有：

页面初次渲染
浏览器窗口大小改变
元素尺寸/位置/内容发生改变
元素字体大小变化
添加或者删除可见的 DOM 元素
激活 CSS 伪类（:hover……）
more ……

重点：回流必定会触发重绘，重绘不一定会触发回流。重绘的开销较小，回流的代价较高。

前端进阶版本，性能优化—-防抖、节流、重绘与回流,前端,性能优化

工作中要如何避免大量使用重绘与回流?

避免频繁操作样式，可汇总后统一一次修改
尽量使用 class 进行样式修改，而不是直接操作样式
减少 DOM 的操作，可使用字符串一次性插入

以下资料来自于 https://juejin.im/post/5e096d63e51d4558381e9906#heading-29

常见的会导致回流的元素

常见的几何属性有 width、height、padding、margin、left、top、border 等等。
最容易被忽略的操作：获取一些需要通过即时计算得到的属性,当你要用到像这样的属性：offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight 时，浏览器为了获取这些值，也会进行回流。
当我们调用了 getComputedStyle 方法，或者 IE 里的 currentStyle 时，也会触发回流。原理是一样的，都为求一个“即时性”和“准确性”。

避免方式：