闲聊前端性能----防抖、节流、重绘与回流。

在最近,小米9卖的特别火,在官方抢购的时候基本都是一点既空。这不禁让我想到了,官网是怎样控制顾客不停点击发起请求而不导致官网崩溃的呢?这由此引出了前端性能的优化中的----防抖和节流。在闲聊完后你就会发现有些时候在抢购商品的时候,你用鼠标在几秒钟不停的按了数十次,或许它仅仅是发送了你第一次点击抢购的那个请求。所以说 抢购时间内的第一次点击尤为关键!

下面来介绍一下什么是防抖!

       防抖:任务频繁触发的情况下,只有任务触发的间隔超过制定的时间间隔的时候,任务才会被执行。

下面引用一下知乎上的一个例子:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>防抖</title>
</head>
<body>
  <button id="debounce">点我防抖!</button>

  <script>
    window.onload = function() {
      // 1、获取这个按钮,并绑定事件
      var myDebounce = document.getElementById("debounce");
      myDebounce.addEventListener("click", debounce(sayDebounce));
    }

    // 2、防抖功能函数,接受传参
    function debounce(fn) {
      // 4、创建一个标记用来存放定时器的返回值
      let timeout = null;
      return function() {
        // 5、每次当用户点击/输入的时候,把前一个定时器清除
        clearTimeout(timeout);
        // 6、然后创建一个新的 setTimeout,
        // 这样就能保证点击按钮后的 interval 间隔内
        // 如果用户还点击了的话,就不会执行 fn 函数
        timeout = setTimeout(() => {
          fn.call(this, arguments);
        }, 1000);
      };
    }

    // 3、需要进行防抖的事件处理
    function sayDebounce() {
      // ... 有些需要防抖的工作,在这里执行
      console.log("防抖成功!");
    }

  </script>
</body>
</html>

这是知乎上的一个例子,创建一个定时器,如果在规定时间内重复触发该事件,就会调用clearTimeout清除掉上一个定时器,重置定时器。也就是说,这件事本来就是需要等待的,并非立即执行的,如果用户反复点击,那只好重新等待了。所以,fn.call(this, arguments) 其实是将不确定变量替换到函数中了。在这之前已经聊过了arguments,可以看下我之前写得 闲聊js中的apply、call和arguments

在上面的这个例子中是非立即执行版。当然,我把知乎的例子修改一下它,将它变成立即执行版。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>防抖</title>
</head>
<body>
  <button id="debounce">点我防抖!</button>

  <script>
    window.onload = function() {
      // 1、获取这个按钮,并绑定事件
      var myDebounce = document.getElementById("debounce");
      myDebounce.addEventListener("click", debounce(sayDebounce));
    }

    // 2、防抖功能函数,接受传参
    function debounce(fn) {
      // 4、创建一个标记用来存放定时器的返回值
      let timeout = null;
      //5.创建一个判断是否可点击值
      let doit = true;
      return function() {
        // 5、当doit为真,既用户重复点击时,清除定时器
        if(doit)clearTimeout(timeout);
        //6.当doit为false时,既用户可点击,再将doit设为true,防止用户重复点击
        else{
            fn();
            doit = true;
        }
        //7.设置定时器,这样就能保证点击按钮后的 interval 间隔内
        // 如果用户还点击了的话,就不会执行 将doit设为false函数
        timeout = setTimeout(() => {
          doit = false;
        }, 1000);
      };
    }

    // 3、需要进行防抖的事件处理
    function sayDebounce() {
      // ... 有些需要防抖的工作,在这里执行
      console.log("防抖成功!");
    }

  </script>
</body>
</html>

其原理和立即执行版本一样,只是点击执行的先后顺序不同。

下面 我们来聊一下什么是节流吧!

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

这有点像我们刷抢购一样,当我们在某段时间间隔内触发了多次事件,其实,它只执行一次请求!

下面 我们再来引用知乎的一个例子就会明白了!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>节流</title>
</head>
<body>

  <button id="throttle">点我节流!</button>

  <script>
    window.onload = function() {
      // 1、获取按钮,绑定点击事件
      var myThrottle = document.getElementById("throttle");
      myThrottle.addEventListener("click", throttle(sayThrottle));
    }

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

    // 3、需要节流的事件
    function sayThrottle() {
      console.log("节流成功!");
    }

  </script>
</body>
</html>

从这个例子可以看出,节流可以防止在某时间间隔内重复发送请求!其和防抖有点相似,但其有本质的区别,虽然都是防止重复触发事件!

防抖是需要等待多久时间才能再触发一次事件!

节流是多久时间内只能触发一次事件!

重绘与回流

在介绍重绘和回流之前,最好先了解一下浏览器是如何解析解析URL的,或者看一下我后续发的博文!

好!现在我们进入正题 !什么是重绘和回流!

重绘(repaint):当元素样式的改变不影响布局时,浏览器将使用重绘对元素进行更新,此时由于只需要 UI 层面的重新像素绘制,因此损耗较少。

回流(reflow):又叫重排(layout)。当元素的尺寸、结构或者触发某些属性时,浏览器会重新渲染页面,称为回流。此时,浏览器需要重新经过计算,计算后还需要重新页面布局,因此是较重的操作。

或许这概念比较抽象,讲起来很难理解!简单点说,就比如我们页面中的某些颜色会发生动态改变,而木有影响到尺寸,布局、位置、结构这些改变的,就叫做重绘,而例如动态添加结点、改变尺寸、位置这些的,就叫做回流!

回流的损耗是比较大的!所以尽量不要产生太多的回流!就比如,样式的动态修改不要多步而尽量应一步到位!

为了避免大量的重绘和回流!

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

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

原文地址:https://www.cnblogs.com/binguo666/p/10535948.html

时间: 2024-11-05 15:47:47

闲聊前端性能----防抖、节流、重绘与回流。的相关文章

Web前端性能优化-重绘与回流

1.什么是重绘与回流 Render tree 的重新构建就叫回流.当布局和几何属性改变时就需要回流,鼠标移动到图片 图片变大 也会触发回流.回流 能避免就避免 Render tree 改变外观.风格 而不影响布局的时候,就叫重绘 重绘与回流的关系:回流会引起重绘 重绘不一定会引起回流 2.避免重绘回流的两种方法 什么会引起回流和重绘 触发页面布局从而触发重绘的: (1) 盒子模型属性 (2) 定位属性和浮动 (3) 改变节点内部文字结构 如下图: 只触发重绘不触发回流的属性: 优化方法: (1)

浅谈JS重绘与回流

在说浏览器渲染页面之前,我们需要先了解两个点,一个叫 浏览器解析 URL,另一个就是本章节将涉及的 重绘与回流: 重绘(repaint):当元素样式的改变不影响布局时,浏览器将使用重绘对元素进行更新,此时由于只需要 UI 层面的重新像素绘制,因此损耗较少. 常见的重绘操作有: 改变元素颜色 改变元素背景色 more …… 回流(reflow):又叫重排(layout).当元素的尺寸.结构或者触发某些属性时,浏览器会重新渲染页面,称为回流.此时,浏览器需要重新经过计算,计算后还需要重新页面布局,因

css重绘与回流

高性能WEB开发之页面呈现.重绘.回流(1) 2011-04-25 10:11 BearRui BearRui的Blog 字号:T | T 在讨论页面重绘.回流之前.需要对页面的呈现流程有些了解,页面是怎么把html结合css等显示到浏览器上的,下面的流程图显示了浏览器对页面的呈现的处理流程.可能不同的浏览器略微会有些不同.但基本上都是类似的. AD:2014WOT全球软件技术峰会北京站 课程视频发布 在讨论页面重绘.回流之前.需要对页面的呈现流程有些了解,页面是怎么把html结合css等显示到

理解浏览器的重绘与回流(repaint&amp;&amp;reflow)

今天在做练习的时候,遇到了重绘与回流这个词,表示连个毛都没有听过.遂查之,首先将网上的(http://blog.sina.com.cn/s/blog_8dace7290102wezv.html)关于这两个词的领悟粘贴如下: 一.  浏览器渲染过程 渲染:就是把浏览器把HTML代码以css定义的规则显示在浏览器窗口的过程 浏览器解析HTML的基本过程: 1  用户输入网址,浏览器向服务器发出请求,服务器返回html文件 2  浏览器载入html代码,发现标签内有一个标签引用外部css文件 3 浏览

页面重绘和回流以及优化

在讨论页面重绘.回流之前.需要对页面的呈现流程有些了解,页面是怎么把html结合css等显示到浏览器上的,下面的流程图显示了浏览器对页面的呈现的处理流程.可能不同的浏览器略微会有些不同.但基本上都是类似的. 1.  浏览器把获取到的HTML代码解析成1个DOM树,HTML中的每个tag都是DOM树中的1个节点,根节点就是我们常用的document对象.DOM树里包含了所有HTML标签,包括display:none隐藏,还有用JS动态添加的元素等. 2. 浏览器把所有样式(用户定义的CSS和用户代

页面呈现、重绘与回流

页面呈现流程  在讨论页面重绘.回流之前.需要对页面的呈现流程有些了解,页面是怎么把html结合css等显示到浏览器上的,下面的流程图显示了浏览器对页面的呈现的处理流程.可能不同的浏览器略微会有些不同.但基本上都是类似的. 1.  浏览器把获取到的html代码解析成1个Dom树,html中的每个tag都是Dom树中的1个节点,根节点就是我们常用的document对象(<html> tag).dom树就是我们用firebug或者IE Developer Toolbar等工具看到的html结构,里

关于重绘和回流(Repaint &amp; Reflow)

1. 浏览器渲染机制 浏览器采用流式布局模型(Flow Based Layout) 浏览器会把HTML解析成DOM,把CSS解析成CSSOM,DOM和CSSOM合并就产生了渲染树(Render Tree). 有了RenderTree,我们就知道了所有节点的样式,然后计算他们在页面上的大小和位置,最后把节点绘制到页面上. 由于浏览器使用流式布局,对Render Tree的计算通常只需要遍历一次就可以完成,但table及其内部元素除外,他们可能需要多次计算,通常要花3倍于同等元素的时间,这也是为什么

重绘、回流

重绘:对某个区域.对象的重新渲染表现 回流:对某个区域.对象进行重绘,根据条件影响到它的祖先对象进入重绘(并可能无限递归直到顶级祖先对象) 重绘如何出现:改变对象的形状.坐标.表现以及内容都会引发该对象被重新渲染,这种现象即为重绘. 回流如何出现:当该对象即将重绘时,浏览器会根据条件判断该对象的重绘结果是否会依赖该对象的祖先元素.如果有则将该对象祖先元素也加入本次重绘.并一直向上寻找,直到条件不匹配.此现象即为回流. 最后总结:1.重绘可能引发回流2.回流必定引发重绘3.回流条件……暂时未知

重绘和回流

1.浏览器把获取到的html代码解析成1个Dom树. 2.浏览器把样式解析成样式结构体,在解析过程中会去掉各自浏览器不能识别的样式比如-moz,-webkit等. 3.2者结合后构建呈现render tree. 4.render tree构建完毕,浏览器就可以根据render tree绘制页面. 其中脚本执行过程可能阻塞Dom的解析和构建和阻塞css处理,(比如遇到同步一个document.write或者javascript脚本查询任何元素的计算样式).结果导致Dom和CssDom的构建频繁的交