美文网首页
重绘(repaint) & 回流(reflow)

重绘(repaint) & 回流(reflow)

作者: 梁庄十年 | 来源:发表于2021-11-29 22:54 被阅读0次

1 重绘(repaint)

概念: 当元素样式的改变不影响布局时, 浏览器将使用重绘对元素进行更新, 此时发生的过程就叫做重绘;
重绘只是UI层面的像素绘制, 消耗较少;

  • 常见的重绘操作:
    a: 改变元素颜色;
    b: 改变元素背景色;
    c: ....

2 回流(reflow)

概念: 回流又叫做重排. 当元素的尺寸,结构或者触发某些属性时,浏览器会重新渲染页面, 称为回流;
回流需要浏览器重新经过计算,计算后重新渲染页面布局,损耗较大;

  • 常见的回流操作:
    a: 页面初次渲染;
    b: 浏览器窗口大小的改变;
    c: 元素尺寸 位置 内容 发生改变;
    d: 添加或者删除可见的DOM元素;
    e: 激活 css 伪类(:hover....);
    f: ....

总结 :

  1. 回流必定会触发重绘,重绘不一定会触发回流;
  2. 回流的开销大于重绘的开销

相关文章

  • 前端总结(后续继续更新)

    1,reflow和repaint:回流和重绘。回流:renderTree 重建。重绘:外观样式风格进行更新。(co...

  • 前端一些细节

    1,reflow和repaint:回流和重绘。回流:renderTree 重建。重绘:外观样式风格进行更新。(co...

  • 浏览器的渲染机制

    reflow(回流) 和 repaint(重绘):http://blog.csdn.net/ClaireKe/ar...

  • css中的repaint和reflow

    页面设计中,不可避免的存在浏览器重绘repaint和回流reflow 介绍 repaint:针对某个元素进行重绘。...

  • 浏览器的回流与重绘 (Reflow & Repaint)

    浏览器的回流与重绘 (Reflow & Repaint) 写在前面 在讨论回流与重绘之前,我们要知道: 浏览器使用...

  • 浏览器原理

    介绍下重绘和回流(Repaint & & Reflow ),以及如何进行优化 参考文档: https://mp.w...

  • 页面回流

    理解浏览器的重绘与回流(repaint&&reflow) 今天在做练习的时候,遇到了重绘与回流这个词,表示连个毛都...

  • 重绘(repaint) & 回流(reflow)

    1 重绘(repaint) 概念: 当元素样式的改变不影响布局时, 浏览器将使用重绘对元素进行更新, 此时发生的过...

  • 回流和重绘——周分享

    浏览器的回流与重绘 (Reflow & Repaint) 浏览器使用流式布局模型 (Flow Based Layo...

  • 浏览器的重排-重绘

    重排(重构/回流/reflow) 重绘(repaint/redraw) 一、浏览器运行机制 浏览器加载完ht...

网友评论

      本文标题:重绘(repaint) & 回流(reflow)

      本文链接:https://www.haomeiwen.com/subject/nflrxrtx.html