什么是重排和重绘？何时会触发？

重排

当dom的变化影响了元素的几何信息(位置)，浏览器需要计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排，表现为重新生成布局，重新排列元素。

重绘

当一个元素(颜色、字体颜色)的外观被改变，但是没有改变布局，重新把元素外观绘制出来的过程叫做重绘，表现为某些元素的外观被改变。

重排和重绘会消耗浏览器的性能(会去计算浏览器的内存空间，占据cpu)会造成页面卡顿，UI展示迟缓。相比之下，重排性能影响更大，两者无法避免时最好选择重绘。

重绘不一定出现重排，但是重排一定出现重绘。

何时会触发重排和重绘？

1、添加、删除元素（重排）、更新节点（重绘）
2、通过display:none（重排）
3、通过visiblity:hidden（重绘）
4、添加动画（重排）
5、添加一个样式表（重排）
6、用户行为（重排或者重绘）

什么是重排和重绘？何时会触发？相关推荐

你真的了解重排和重绘吗？
做过前端开发的小伙伴就算不是非常理解重排与重绘,但是肯定都听过这两个词.那为什么这两个东西这么重要?因为他与我们的页面性能息息相关,今天,我们就来好好研究一下这两个东西. 浏览器的渲染流程在讲解重排 ...
java都界面相对布局_浏览器的重排和重绘
浏览器的高层结构 1.用户界面 - 包括地址栏.前进/后退按钮.书签菜单等. 2.浏览器引擎 - 在用户界面和呈现引擎之间传送指令. 3.渲染引擎 - 负责显示请求的内容. 4.网络 - 用于网络调用 ...
160826、浏览器渲染页面过程描述，DOM编程技巧以及重排和重绘
一.浏览器渲染页过程描述 1.浏览器解析html源码,然后创建一个DOM树. 在DOM树中,每一个HTML标签都有一个对应的节点(元素节点),并且每一个文本也都有一个对应的节点(文本节点). DO ...
前端性能优化之重排和重绘
前言,最近利用碎片时间拜读了一下尼古拉斯的另一巨作<高性能JavaScript>,今天写的文章从"老生常谈"的页面重绘和重排入手,去探究这两个概念在页面性能提升上的作用 ...
浏览器渲染机制、重排、重绘
前言浏览器的渲染机制.重排.重绘一.页面生成 1. HTML会被HTMl解析器解析成DOM树 2. CSS会被CSS解析器解析成CSSOM树 3. 结合DOM树和CSSOM树生成一颗渲染树 4.将 ...
简单易懂之什么是重排和重绘？
文章目录目录一.浏览器页面是怎么生成的? 二.什么是重排和重绘? 1.什么时候发生重绘? 2.如何优化重排效率? 一.浏览器页面是怎么生成的? 首先让我们来先了解一下浏览器页面生成的过程文字解析 ...
重排(reflow) 重绘(repaint)
在页面的生命周期中:至少会发生一次渲染,在用户访问的过程中,还会不断的触发重排(reflow)重绘(repaint) 重绘和重排都会影响性能,尤其是重排,会使我们付出高昂的性能代价. 页面生成的过程( ...
html-什么是重排和重绘？如何减少影响的范围
答: 重排:是引起DOM树重新计算的行为重绘:一个元素外观的改变(如color)所触发的浏览器行为减少: 分离读写操作; 样式集中改变; 使用absolute脱离文档流; 使用 display:n ...
浏览器的重排与重绘是什么意思？
准备为了理解重排与重绘,我们首先需要了解一点浏览器渲染的基础知识 ~ 网页生成分为五步: 1. HTML 被 HTML 解析器解析成 DOM 树 2. CSS 被 CSS 解析器解析成 CSSOM ...

什么是重排和重绘？何时会触发？

重排

重绘

何时会触发重排和重绘？

什么是重排和重绘？何时会触发？相关推荐

最新文章

热门文章