美文网首页
重排和重绘

重排和重绘

作者: lacduang | 来源:发表于2019-10-09 14:52 被阅读0次

重排(回流):当我们对 DOM 的修改引发了 DOM 几何尺寸的变化(比如修改了元素的宽、高或隐藏元素等)时,浏览器需要重新计算元素的几何属性(其他元素的集合属性和位置也会因此受到影响),然后再将计算的结果绘制出来。

重绘:当我们对 DOM 的修改导致了样式的变化、却并未影响几何属性(比如修改了颜色或背景),浏览器不需要重新计算元素的几何属性、直接修改元素绘制新的样式(跳过了上面所说的回流环节)

重绘不一定导致回流,回流一定会导致重绘

回流时影响最大的

  1. 窗体, 字体大小
  2. 增加样式表
  3. 内容变化
  4. class 属性
  5. offsetWidth 和 offsetHeight
  6. fixed

相关文章

  • 浏览器重排(回流)重绘以及优化方案

    一、什么是重排和重绘 要说清重排(reflow)和重绘(repaint),首先要理解排列和绘制,浏览器渲染页面时,...

  • 浏览器的重绘和重排

    重绘和重排 重排是因为元素的几何属性改变,导致渲染树中的节点发生改变,从而影响到其它节点发生重绘。重排对性能影响极...

  • 浏览器页面的重绘和重排

    对于页面,我们经常有CSS对网页进行呈现样式效果,这就涉及到了页面的重绘和重排 重绘(repaints)与重排(r...

  • 重排和重绘

    1.重排和重绘的概念 重排: 部分渲染树(或者整个渲染树)需要重新分析并且节点尺寸需要重新计算。这被称为重排,注意...

  • 重绘和重排

    什么引发重绘?改变元素的外观,例如颜色等(无尺寸变化)。 什么引发重排? 页面初始化渲染 添加或者删除dom节点 ...

  • 重绘和重排

    DOM树:表示页面结构。渲染树:表示DOM节点如何显示。 定义 当DOM元素影响了元素的几何属性(例如宽和高),浏...

  • 重绘和重排

    1.重绘和重排 重排当DOM变化影响了元素的几何属性,浏览器需要重新计算元素的几何属性,其他元素的几何属性和位置也...

  • 重排和重绘

    重排(Reflow) 当 render tree 中的 node 的几何属性发生变化的时候,浏览器会使 rende...

  • 重绘和重排

    参考 浏览器渲染机制 浏览器采用流式布局模型(Flow Based Layout)。 浏览器会把 HTML 解析成...

  • 重排和重绘

    重排(回流):当我们对 DOM 的修改引发了 DOM 几何尺寸的变化(比如修改了元素的宽、高或隐藏元素等)时,浏览...

网友评论

      本文标题:重排和重绘

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