前端性能优化——回流与重绘

Michael_Lin 发布于2019-08-26 13:26 / 2273人阅读

摘要：前言最近在研究，接着就研究回顾起回流与重绘了。回流与重绘，好像大家都很熟悉的样子，但是要具体来说说，又说不出什么来。注意回流必将引起重绘，而重绘不一定会引起回流。

前言

最近在研究virtual dom，接着就研究回顾起回流（reflow）与重绘（repaint）了。

回流与重绘，好像大家都很熟悉的样子，但是要具体来说说，又说不出什么来。下面我是我稍做的整理：

浏览器渲染流程

在理解这两个概念之前，我们先来看看浏览器渲染的工作流程。这里以webkit渲染引擎为例

浏览器请求到html文档后，将html解析成dom Tree

css被解析成css style rules

解析完成后，将结合dom Tree和style rules构造render tree

浏览器计算render tree中每个渲染对象的位置和大小，即布局（layout）

最后进行绘制（painting）

回流与重绘

回流（reflow）

当元素的规模尺寸、布局、隐藏等改变，而导致render tree的一部分(或全部)重新构建，即称为回流。每个页面至少进过一次回流，就在页面第一次加载的时候。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。

重绘（repaint）

当render tree中的一些元素需要更新属性，这些属性只影响元素的外观，风格，而不会影响元素尺寸、布局、隐藏的，比如background-color，就叫重绘。

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

回流的发生

可见元素尺寸的改变，如width、height、margin、padding等属性改变引起尺寸的变化

window resize事件的触发

元素display属性的改变

元素位置的改变

等等

性能优化

回流与重绘非常影响web性能，因为每一次html和css的重新解析然后再构建成render tree，都需要经过大量的计算，这个过程是很耗时间耗性能的。如何减少呢？建议

页面元素适当定高，如img的夹在在文档流中占据的空间从0到完全加载，会产生频繁的重绘

减少dom的深度，可以减少解析器耗时

尽量简化css

复杂的动画，可以使其元素脱离文档流，使用position:absolute或者position:fixed，以减少对父元素的影响

当然，这里列举的并不是全部的方法，若你有更好的建议，也希望一起分享出来

参考文档

https://kb.cnblogs.com/page/1...
https://www.html5rocks.com/zh...

GPU云服务器云服务器前端性能优化前端开发性能优化性能优化前端优化

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108823.html

前端性能优化——回流与重绘

摘要：前言最近在研究，接着就研究回顾起回流与重绘了。回流与重绘，好像大家都很熟悉的样子，但是要具体来说说，又说不出什么来。注意回流必将引起重绘，而重绘不一定会引起回流。前言最近在研究virtual dom，接着就研究回顾起回流（reflow）与重绘（repaint）了。回流与重绘，好像大家都很熟悉的样子，但是要具体来说说，又说不出什么来。下面我是我稍做的整理：浏览器渲染流程在理解这...

endiat 2019-08-02 12:04 评论0 收藏0
前端性能之回流与重绘(reflow && repaint)

摘要：写在金三银四之际。一个节点触发了，浏览器会检查中其他所有节点的显示方式一个节点触发了会导致它的祖先节点，后代节点以及在它之后的节点全部。对性能的影响大于。解决方式控制我们无力去改变，对性能损害的程度，我们能做的只有减少它们发生的次数。写在金三银四之际。因为种种原因想要谋求新的发展，不得已翻起了尘封已久的高程书；写起了各种经典CSS布局；回顾起记忆略显模糊的几个项目。感慨着太多太多...

ytwman 2019-08-22 15:21 评论0 收藏0
JavaScript：回流（重排）与重绘

摘要：回流也被称为重排，其实从字面上来看，重排更容易让人形象易懂即重新排版整个页面。重绘当页面元素样式改变不影响元素在文档流中的位置时如，，，浏览器只会将新样式赋予元素并进行重新绘制操作。你真的了解回流和重绘吗简单先了解一下浏览器的渲染过程（图片来自于网络） showImg(https://segmentfault.com/img/bVbaC2e?w=624&h=289); 浏览器生成渲染...

Jioby 2019-08-26 13:34 评论0 收藏0
求索：GSAP的动画快于jQuery吗？/ 续 V1.1

摘要：本文是求索的动画快于吗为何的续文。没有集中绘制，每个都在一个事件回调函数上下文中处理，有多少个就有多少个上下文有集中绘制。测试过程中为了比较好的效果用了随机数。本文是求索：GSAP的动画快于jQuery吗？为何？的续文。GSAP是一个js动画插件，它声称20x faster than jQuery，是什么让它这么快呢？每当有这样的问题的时候，我们可以通过以下步骤来...

Tecode 2019-08-21 12:09 评论0 收藏0