美文网首页
重排和重绘

重排和重绘

作者: 码飞_CC | 来源:发表于2018-05-12 10:09 被阅读0次

1.重排和重绘的概念

  • 重排: 部分渲染树(或者整个渲染树)需要重新分析并且节点尺寸需要重新计算。这被称为重排,注意这里至少会有一次重排——初始化页面布局。
  • 重绘: 由于节点的几何属性发生改变或者由于样式发生改变,例如改变元素背景色时,屏幕上的部分内容需要更新。这样的更新被称为重绘。

2.什么情况下会触发重排和重绘:

  • 添加、删除、更新DOM节点;
  • 通过display:none隐藏一个DOM节点,触发重排和重绘;
  • 通过visibility:hidden隐藏一个DOM节点,只触发重绘,因为没有发生几何变化;
  • 移动或者给页面中的DOM节点添加动画;
  • 添加一个样式表,调整样式属性;
  • 用户行为,例如调整窗口大小,改变字号,或者滚动;

相关文章

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

    一、什么是重排和重绘 要说清重排(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/abycdftx.html