oracle数据回流,页面的回流与重绘

前端面试中“页面的回流与重绘”是性能优化方面经常考察的一个知识点。今天总结一下，有不对或者不全面的地方欢迎指正～

页面怎么呈现？

在讨论页面重绘、回流之前，需要对页面的呈现流程有些了解，页面是怎么把HTML结合CSS等显示到浏览器上的，下面的流程图显示了浏览器对页面呈现的处理流程。可能不同的浏览器略微会有些不同，但基本上都是类似的。

浏览器把获取到的HTML代码解析成1颗Dom树，HTML中的每个Tag都是Dom树中的1个节点，根节点就是我们常用的Document对象。Dom树里包含了所有HTML标签，包括display:none隐藏，还有用JS动态添加的元素等。

浏览器把所有样式解析成样式结构体，在解析的过程中会去掉浏览器不能识别的样式，比如IE会去掉-moz开头的样式，而FF会去掉_开头的样式。

Dom树和样式结构体组合后构建Render树, Render树类似于Dom 树，但区别很大，Render树能识别样式，Render树中每个节点都有自己的style，而且Render树不包含隐藏的节点 (比如display:none的节点，还有head节点)，因为这些节点不会用于呈现，而且不影响其它节点呈现，所以就不会包含到 Render树中。注意 visibility:hidden隐藏的元素还是会包含到 Render树中的，因为visibility:hidden 会影响布局(layout)，会占有空间。

一旦Render树构建完毕后，浏览器就可以根据Render树来绘制页面了。

什么是回流与重绘？

当Render树中的一部分(或全部)因为元素的规模尺寸、布局、显隐等改变而需要重新构建，这就称为回流。

当Render树中的一些元素需要更新属性，而这些属性只是影响元素的外观、风格，不影响布局，比如background-color，就称为重绘。

注意：回流必将引起重绘，而重绘不一定会引起回流。

以上，其实理解起来很容易，所谓的Render树就是识别了几何属性的Dom树，好像我们画人体的时候，Dom树是先确定都有什么，比如四肢，头部，身体，其他器官等；而Render树则是确定这个人的高矮胖瘦，头发是否盖眼睛等。如果我们在绘画过程中发现脖子长了那就惨了，脖子下面都要重画，如果发现只是手指画的有问题，我们只需要重画手指，这就是回流了。当我们的Render树完事了，也就是人体大概轮廓我们都画好了，就可以上色了，换个发色这种我们叫重绘。

举个栗子

oracle数据回流,页面的回流与重绘相关推荐

回流（Reflow）与重绘（Repaint）
回流(Reflow)与重绘(Repaint) 开篇我们先对上上节介绍的回流与重绘的基础知识做个复习(跳读的同学请自觉回到上上节补齐 →_→). 回流:当我们对 DOM 的修改引发了 DOM 几何尺寸的 ...
前端优化之回流（Reflow）与重绘（Repaint）
回流(Reflow)与重绘(Repaint) 开篇我们先对上上节介绍的回流与重绘的基础知识做个复习(跳读的同学请自觉回到上上节补齐 →_→). 回流:当我们对 DOM 的修改引发了 DOM 几何尺寸的 ...
【JavaScript】回流（reflow）与重绘（repaint）
重绘与回流首先要了解页面是如何呈现的: HTML文档加载后生成DOM树(包括display:none;元素): 在DOM树的基础上配合css样式结构体生成render树(不包含display:non ...
reflow （回流）和 repaint（重绘)理解
reflow 和 repaint repaint 就是重绘,reflow 就是回流. 严重性:在性能优先的前提下,性能消耗 reflow 大于 repaint. 体现:repaint 是某个 DOM ...
CSS什么情况引起回流,回流（重排）与重绘 —— 什么是回流和重绘，造成的原因是什么，如何去减少？...
浏览器的渲染原理浏览器的渲染原理步骤: 解析文档(HTML.SVG.XHTML),生成 DOM Tree 解析CSS,生成 CSSOM Rule Tree 根据 DOM Tree 和 CSSOM R ...
CSS回流（Reflow）与重绘（Repaint）
一.介绍 CSS中的回流与重绘是指当HTML或CSS节点发生变化时,浏览器重新绘制和展示页面的过程.回流和重绘会导致浏览器性能降低,应尽量减少. 二.浏览器解析页面的流程浏览器解析页面主要分为以下的 ...
reflow（重排/回流）、repaint（重绘）及其优化
原文地址:https://blog.csdn.net/u013100656/article/details/79888106 浏览器拿到HTML之后的渲染过程: 生成dom树: 生成render树: ...
reflow（重排、回流）和repaint（重绘）
reflow和repaint的区别: reflow:浏览器需要去渲染,当它发现某个dom发生了变化不仅仅改变自身,会导致后面的元素位置全部改变并且影响了布局,则需要倒回去重新渲染: repaint:不 ...
浏览器渲染页面的原理、回流、重绘
目录一.浏览器的渲染过程 1.面试题 (1).DNS 域名解析 (2).建立 TCP 连接 (3).发送 HTTP 请求 (4).处理请求返回的 HTTP 响应 (5).页面渲染 (6).关闭 TC ...

oracle数据回流,页面的回流与重绘

oracle数据回流,页面的回流与重绘相关推荐

最新文章

热门文章