看了某前端文章,第一次看到回流,以前的版本都是重绘、重排。
深入看了看,回流也就是 reflow,是 MDN 官方概念
那 reflow 到底是什么?其实就是 Layout 的一个特殊 case
都是 Layout,区别在于第一次和第n次(n>=2)
1. 首次渲染是第一次生成整个渲染树,叫做 Layout
2. 非首次,某个节点的样式(位置、大小、颜色等)的更新,导致 DOM 的刷新,叫做 reflow。
引发一个思考:场景区分的太细了,这么设计的目的是什么?
也就是说定于这个术语的目的是什么?
诞生术语的通用目的之一就是:定义好术语,拉齐认知,后续大家对某个现象或者问题讨论的时候,就不需要解释那么多。上下文马上就有了,聚焦于聊问题、分析问题。
那 reflow 呢?我理解它的意义除了「为的是后续讨论问题的方便,定义好术语,拉齐认知,就不需要解释那么多」。还有其他设计的目的和意义吗?
reflow 强调的是:非首次某个局部 dom 节点的变更,导致发生重绘这个现象的现象,叫做 reflow(实际上,本来我想象不到非首次还有全部替换的 case,但是硬想可能还是有的,比如终端设备上某个网页具备响应式 feature,横竖屏切换,可能会带来非首次的全部绘制,但实际上目前没有遇到过非首次的 DOM 全量子节点的更新场景)。
硬想一个目的和意义的话,就是前端做 APM 性能分析监控的时候吧,用来分析非首次渲染的情况下,reflow 的次数,这也是 Vue/React 等技术核心解决的问题之一。
也就是说之前看到的重排,就是 reflow,也就是回流。好了,又一次拉齐认知
发布于 浙江
