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

重排(回流)&重绘

作者: 糖糖不加糖_ | 来源:发表于2023-02-22 10:51 被阅读0次

https://segmentfault.com/a/1190000017329980

重排一定会导致重绘,但是重绘不一定导致重排

重排

dom发生变化,影响了元素的几何信息(位置和尺寸大小),会引发重排

  • 页面渲染初始化
  • 添加或删除dom
  • 元素位置改变
  • 元素尺寸改变(宽高、内外边距、边框厚度等)
  • 浏览器窗口尺寸改变

重绘

元素外观发生变化,会引起重绘

  • 颜色

减少重排和重绘

  • 减少直接操作dom,改用className控制
  • 减少table使用,table属性改变,会直接导致布局重排
  • 对于复杂的动画效果,让他脱离文档流

相关文章

  • 002-JavaScript常见面试题

    1.重绘和回流(重排)是什么? 2.闭包

  • 重绘、回流(重排)

    重绘、回流(重排) 当render tree(DOM tree和样式结构体cssom结合后构建呈现树render ...

  • 重排(回流)&重绘

    https://segmentfault.com/a/1190000017329980[https://segme...

  • 重绘和重排(回流)

    一、浏览器渲染HTML的步骤 HTML被HTML解析器解析成DOM Tree, CSS则被CSS解析器解析成CSS...

  • web性能优化 - 重排与重绘

    重排与重绘 重排 [重构/回流/reflow]:当DOM变化影响了节点的几何属性,浏览器需要重新计算节点的几何属性...

  • 浏览器的重排-重绘

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

  • 2021-04-23

    30道大概率会考到的题( 16-18题) 本章内容 16,页面重排(回流)、重绘,及如何避免 17,IIFE是什么...

  • 重绘(repaint)与回流(重排 reflow)

    页面呈现流程 浏览器会将获取到的HTML代码解析成一个DOM树(包括display: none的元素) 在DOM树...

  • JS中文档碎片的理解和使用

    问:js操作dom时发生了什么? 答:每次对dom的操作都会触发"重排"(重新渲染界面,发生重绘或回流),这严重影...

  • 22,重绘、回流

    1,浏览器渲染机制 2,重绘 3,回流 > 重绘。 4,浏览器优化 5,减少重绘和回流

网友评论

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

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