zoukankan      html  css  js  c++  java
  • 浅谈JS重绘与回流

    在说浏览器渲染页面之前,我们需要先了解两个点,一个叫 浏览器解析 URL,另一个就是本章节将涉及的 重绘与回流

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

    常见的重绘操作有:

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

    常见的回流操作有:

    1. 页面初次渲染
    2. 浏览器窗口大小改变
    3. 元素尺寸/位置/内容发生改变
    4. 元素字体大小变化
    5. 添加或者删除可见的 DOM 元素
    6. 激活 CSS 伪类(:hover……)
    7. more ……
    • 重点回流必定会触发重绘,重绘不一定会触发回流。重绘的开销较小,回流的代价较高。

    看到这里,小伙伴们可能有点懵逼,你刚刚还跟我讲着 防抖与节流 ,怎么一下子跳到 重绘与回流 了?

    OK,卖个关子,先看下面场景:

    • 界面上有个 div 框,用户可以在 input 框中输入 div 框的一些信息,例如宽、高等,输入完毕立即改变属性。但是,因为改变之后还要随时存储到数据库中,所以需要调用接口。如果不加限制……

    看到这里,小伙伴们可以将一些字眼结合起来了:为什么需要 节流,因为有些事情会造成浏览器的 回流,而 回流 会使浏览器开销增大,所以我们通过 节流 来防止这种增大浏览器开销的事情。

    形象地用图来说明:

    这样,我们就可以形象的将 防抖与节流重绘与回流 结合起来记忆起来。

    那么,在工作中我们要如何避免大量使用重绘与回流呢?:

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

    OK,至此我们就讲完两个部分了,那么问题又来了:“浏览器渲染过程中,是不是也有重绘与回流?”“从浏览器输入 URL 到渲染成功的过程中,究竟发生了什么?”

    我们,继续深入探索……

    .

  • 相关阅读:
    KMP总结
    条件概率的计算
    EL和JSTL
    tomcat部署web项目
    web
    面试1
    面试可能会问的题
    简介
    建一个springboot项目
    刷题之牛客网
  • 原文地址:https://www.cnblogs.com/fightjianxian/p/12077584.html
Copyright © 2011-2022 走看看