-
Notifications
You must be signed in to change notification settings - Fork 45
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Day29 - 回流和重绘 #81
Comments
什么是回流每个页面第一次加载的时候,因为要构建render tree(渲染树),都会发生回流。当render tree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建,浏览器会使渲染树中受到影响的部分失效,并重新构造这部分渲染树,这一过程称为回流,之后浏览器会重新绘制受影响的部分到屏幕中,该过程成为重绘。 什么是重绘当render tree中的一些元素需要更新属性,而这些属性只是影响元素的外观,风格,而不会影响布局的,比如颜色的更改。则称为重绘。 总结当页面布局和几何属性改变时就需要回流,回流必将引起重绘,而重绘则不一定会引起回流 优化一般为了减少页面回流和重绘,可以在操作页面时尽可能少的操作DOM,比如将DOM插入操作放进队列,在一定时间后或者队列中操作打到一定数量时再进行统一操作,VUE和React的虚拟DOM就是用JavaScript模拟DOM树,并操作模拟的DOM树对象,最后对处理后的模拟DOM树进行渲染 |
|
回流又叫重排,是指页面中某些元素的尺寸或者位置发生变化,浏览器需要重新计算元素的几何属性,将其放在页面中正确的位置,这个过程叫做重排。 重排和重绘都会增加浏览器的开销,因为重排是整个元素重新渲染,所以要比重绘开销更大。 |
定义
|
回流(reflow):页面或者中元素的宽高、布局发生变换,这些变化需要页面布局叫回流 回流一定重绘,重绘不一定会回流 回流、重绘比较消耗性能,所以开发过程中要避免或者减少不必要的回流、重绘 |
回流当
查询某些属性或调用某些方法 一些常用且会导致回流的属性和方法:
重绘当页面中元素样式的改变并不影响它在文档流中的位置时(例如: 总结有时即使仅仅回流一个单一的元素,它的父元素以及任何跟随它的元素也会产生回流。 回流必将引起重绘,重绘不一定会引起回流。 |
|
如何触发重排和重绘? 任何改变⽤来构建渲染树的信息都会导致⼀次重排或重绘: 添加、删除、更新DOM节点 通过display: none隐藏⼀个DOM节点-触发重排和重绘 通过visibility: hidden隐藏⼀个DOM节点-只触发重绘,因为没有⼏何变化 移动或者给⻚⾯中的DOM节点添加动画 添加⼀个样式表,调整样式属性 ⽤户⾏为,例如调整窗⼝⼤⼩,改变字号,或者滚动。 如何避免重绘或者重排? 集中改变样式 我们往往通过改变class的⽅式来集中改变样式 // 判断是否是⿊⾊系样式 const theme = isDark ? 'dark' : 'light' |
什么是回流 什么是重绘 区别: |
回流是计算布局信息,重绘是根据布局信息和样式信息进行页面绘制。当修改窗口,元素的大小,样式,插入删除元素等影响布局的操作都会触发回流。获取元素的大小偏移量等位置信息的时候也会触发回流。当触发了回流的时候一定触发重绘,除此之外就是当颜色改变时只会触发重绘。 频繁的回流会影响性能和页面效果,减少回流的操作有3种,第一统一读取或设置元素,不要交替进行。第二进行分层,让元素脱离文档流或者启用gpu渲染。第三设置成局部的回流。当外层容器的有固定的宽高和位置的时候,容器内部发生变化只会在这个容器内产生回流,减少整个文档的回流。 |
回流:节点发生改变时,浏览器重新渲染部分节点或者全部文档 |
有了昨天回答浏览器渲染过程题目的基础,我们解释下什么叫回流(也叫重排)和重绘
不管重绘重排都会消耗浏览器资源,那么如何尽可能的去 |
对 DOM 操作导致 DOM 尺寸等属性的变化(比如修改元素的 width、height、top)时,浏览器需要重新计算元素的属性,然后再将计算的结果绘制出来,这个过程叫做回流。 |
浏览器的渲染过程是解析html生成dom树,遇link解析生成CSSOM树,然后将dom树和CSSOM数合并为Render Tree,执行layout布局,最终渲染; 重绘: 回流一定会引起重绘,重绘不一定引起回流 |
回流:元素的尺寸等属性的改变,引起了浏览器对元素位置的重新计算的,并重新绘制的过程 |
昨天我们讨论了浏览器渲染的流程。如下:
那么,第4步布局,初始化第一次的时候我们叫他布局,之后再触发,我们就叫他回流。 怎样会触发回流呢?
怎样会触发重绘呢?
回流必然会触发重绘,重绘不一定会发出回流。 有没有什么需要注意的优化的点?如下:
offsetTop、offsetLeft、offsetWidth、offsetHeight
scrollTop、scrollLeft、scrollWidth、scrollHeight
clientTop、clientLeft、clientWidth、clientHeight
getComputedStyle
getBoundingClientRect 以上操作虽然有用,但现代浏览器对回流重绘一般都有做优化,比如会对多次DOM操作合并处理,并不会引起多次回流,所以以上操作如果不是特别复杂,体验上几乎感觉不到差别。 |
回流回流也称重排,是指对页面的元素位置重新排列,回导致页面大量元素重新渲染,一般发生在元素的大小和位置发生改变,或者元素的显示和隐藏 重绘重绘是指对当前元素进行重新渲染,一般发生在当前元素的颜色改变等不会影响到其他元素的位置改变的操作 两者的关系回流一定伴随着重绘,重绘不一定触发回流 工作中的优化
|
回流,由于元素的内容、结构、位置或尺寸发生了变化,需要重新计算样式和渲染树 |
HTML 规范中对于界面的展现是基于盒模型的机制。 一个盒子,它的大小和尺寸会导致会影响他内部盒子的位置,会影响他兄弟盒子,甚至能影响到他父亲盒子的尺寸和位置,因此,在绘制界面之前,就需要计算出所有这些的位置布局信息,然后再结合样式去做界面的展现,所以这个过程中就出现了回流和重绘的概念。 所谓的回流,就是对所有的节点计算他们的布局信息。 所谓的重绘就是根据布局信息以及样式信息对界面做展示,做渲染。 |
The text was updated successfully, but these errors were encountered: