基础系列-重绘与回流

参考文章

浏览器的工作原理:新式网络浏览器幕后揭秘

浏览器渲染原理 (一)在网址中输入一个网站后面都做了什么

浏览器渲染原理 (三)repaint(重绘)和reflow(回流)详解

你真的了解回流和重绘吗

深度剖析浏览器渲染性能原理,你到底知道多少?

渲染树构建、布局及绘制

浏览器渲染

主要是浏览器的rendering engine进行。

从网络层获取到请求文档的内容,内容大小一半限制在8000个块以内。

基本流程:

flow

主要流程:

parser

render

更多阅读:

CSS Triggers - 设置/获取 css 样式值发生的步骤

重绘 repaint

回流(重排) reflow

参考资料:是什么导致重排英语原文

问题

为什么有的时候需要强制回流?

解答参考:当我用js给元素添加className时,浏览器发生了什么?

What Every Frontend Developer Should Know About Webpage Rendering

测试链接:jsbin