博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
真正理解重绘和回流
阅读量:6209 次
发布时间:2019-06-21

本文共 523 字,大约阅读时间需要 1 分钟。

注:回流也叫重排,叫回流是为了和重绘从字眼上更好区分。

也许是自己笨,关于浏览器渲染和重绘回流的文章几个月来看了几十篇,竟然到现在才真正理解。而理解靠的竟然是运气?
浏览器渲染过程如下(节选自阮一峰老师的文章,,有改动)

  1. HTML代码转化成DOM Tree
  2. CSS代码转化成CSSOM Tree(CSS Object Model)
  3. 结合DOM和CSSOM,生成一棵渲染树Render Tree
  4. 生成布局(flow),将所有渲染树进行平面合成(!此步骤再次触发即回流)
  5. 将布局绘制(paint)在屏幕上(!此步骤再次触发即重绘)

注意,所谓的回流和重绘其实就是上面第四(reflow)、第五步(repaint)。此前也不止一次看过阮老师的这篇文章,却每次都没有把重绘和回流和第四第五步联想起来,今天回顾的时候,偶然发现这两步正好对应了回流和重绘,看来是我看文章不够仔细认真。

到这里就真正理解了重绘和回流了,还有一点是我一直纠结是不是只要触发了局部回流,整个页面都会重新排版,今天仔细看了好几篇文章,终于确定并不是这样。阮老师也说:

重排和重绘的DOM元素层级越高,成本就越高。

所以回流肯定也是哪块的布局改变了重排哪里,而不是每次整个页面都重排。

转载地址:http://vozja.baihongyu.com/

你可能感兴趣的文章
[Leetcode] Trapping Rain Water
查看>>
算法练习 (二)
查看>>
程序员谈学习:我为什么要学习Linux?
查看>>
Oracle Essbase入门系列(一)
查看>>
Python编程-Office操作-操作Excel(上)
查看>>
IOCP数据中间件
查看>>
SQL Server 排名函数 简单应用
查看>>
条件变量
查看>>
su su- sudo
查看>>
HTML5是否已为实际应用做好准备?
查看>>
大叔手记全集
查看>>
Windows phone 应用开发[7]-MEF For Windows phone
查看>>
卓越软件工程--《微软360度》读后感
查看>>
gcc 之 inline
查看>>
ssh ip "WARING:REMOTE HOST IDENTIFICATION HAS CHANGED!"
查看>>
WPF实现3D翻转的动画效果
查看>>
IIS应用程序池_缓存回收
查看>>
gradle 将依赖打入Jar包的方法
查看>>
phantomjs - node.js parse child process output line by line (spawn) - Stack Overflow
查看>>
Android网络通信Volley框架源代码浅析(三)
查看>>