摘要：浏览器会对发生变化的呈现器以及其子代标注为，表示需要进行标记分为两种和。异步和同步异步，简单来说，就是指浏览器为了尽可能减少和的操作，而将这些操作积攒起来，再统一做一次。
终于到了布局的部分了！
布局当渲染对象被创建并添加到树中，是没有位置和大小的，计算这些值的过程称为layout或reflow。
布局是一个递归过程，由根渲染对象开始，对应html文档元素，布局继续递归的通过一些或所有的frame层级，为每个需要几何信息的渲染对象进行计算。跟渲染对象位置是0，0。所有渲染对象都有一个layout或reflow方法，每个渲染对象调用需要布局的children的layout方法。
浏览器会对发生变化的呈现器以及其子代标注为"dirty"，表示需要进行layout
标记分为两种："dirty"和"children are dirty"。
“children are dirty”表示尽管呈现器本身没有变化，但它至少有一个子代需要布局。
这里需要说明一下重排reflow和重绘repaint。
当改变影响到文本内容、结构或元素位置时，就会发生重排。
通常有以下事件触发：
网页初始化时
DOM操作（元素添加、删除、修改、元素顺序变化）
内容变化，包括表单域内文本改变
CSS属性的计算或改变
添加或删除样式表
更改“类”属性
浏览器窗口的缩放、滚动等
伪类激活（例如:hover悬停）
重绘 repaint改变不会影响元素的位置及大小的样式时，则会触发重绘。换句话说，元素改变外观时会触发这个行为，不包括修改元素的几何属性。例如background,visibility。
异步layout和同步layout异步layout，简单来说，就是指浏览器为了尽可能减少reflow和repaint的操作，而将这些操作积攒起来，再统一做一次reflow。
什么时候会产生同步layout呢？
例如resize窗口、改变页面默认字体时，或者是脚本作出以下请求：
offsetTop, offsetLeft, offsetWidth, offsetHeight
scrollTop/Left/Width/Height
clientTop/Left/Width/Height
IE中的 getComputedStyle(), 或 currentStyle
那么浏览器需要立即layout以返回最新的值。
parent渲染对象决定宽度
parent渲染对象读取children,设置其x,y；在需要时【标记为dirty或全局layout等】调用child渲染对象的layout，计算child高度；parent使用child的累积高度，以及margin和padding的高度来设置自己的高度；最后将dirty标志设置为false
绘制和布局一样，绘制也可以是全局的——绘制完整的树——或增量的。在增量的绘制过程中，一些渲染对象以不影响整棵树的方式改变，改变的渲染对象使其在屏幕上的矩形区域失效，这将导致操作系统将其看作dirty区域，并产生一个paint事件，操作系统很巧妙的处理这个过程，并将多个区域合并为一个。Chrome中，这个过程更复杂些，因为渲染对象在不同的进程中，而不是在主进程中。Chrome在一定程度上模拟操作系统的行为，表现为监听事件并派发消息给渲染根，在树中查找到相关的渲染对象，重绘这个对象（往往还包括它的children）。
绘制顺序一个块渲染对象的堆栈顺序是：
背景色
背景图
border
children
outline
【待更新】
参考文献：
浏览器内部工作原理
浏览器的渲染原理简介
How browsers work
有关网页渲染，每个前端开发者都该知道的那点事
前端文摘：深入解析浏览器的幕后工作原理
MDN:Style System Overview
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/54361.html
摘要：浏览器会对发生变化的呈现器以及其子代标注为，表示需要进行标记分为两种和。异步和同步异步，简单来说，就是指浏览器为了尽可能减少和的操作，而将这些操作积攒起来，再统一做一次。 终于到了布局的部分了！ 布局 当渲染对象被创建并添加到树中，是没有位置和大小的，计算这些值的过程称为layout或reflow。布局是一个递归过程，由根渲染对象开始，对应html文档元素，布局继续递归的通过一些或所有...
摘要：浏览器会对发生变化的呈现器以及其子代标注为，表示需要进行标记分为两种和。异步和同步异步，简单来说，就是指浏览器为了尽可能减少和的操作，而将这些操作积攒起来，再统一做一次。 终于到了布局的部分了！ 布局 当渲染对象被创建并添加到树中，是没有位置和大小的，计算这些值的过程称为layout或reflow。布局是一个递归过程，由根渲染对象开始，对应html文档元素，布局继续递归的通过一些或所有...
摘要：遵循的是异步模块定义规范，遵循的是通用模块定义规范。不同的脚本加载这个模块，得到的都是同一个实例。关于异步那些事就写到这里了，很多地方理解的不够深刻希望大家多多指教。 JS异步那些事 一 （基础知识）JS异步那些事 二 （分布式事件）JS异步那些事 三 （Promise）JS异步那些事 四（HTML 5 Web Workers）JS异步那些事 五 （异步脚本加载） 异步脚本加载 阻塞性...
摘要：背景作为正在探索如何写作并发表到各大博客平台的新人目前虽然已基本弄清写作和发表的基本流程但是离打造个人知名度还差很大很大一段距离尤其处于新手阶段需要的更是自信与外界的积极反馈看着各平台日益增长的阅读量和粉丝量心中自然不甚欣喜但是持续的技术输 背景 作为正在探索如何写作并发表到各大博客平台的新人,目前虽然已基本弄清写作和发表的基本流程,但是离打造个人知名度还差很大很大一段距离. 尤其处于...
阅读 2921·2021-11-23 09:51
阅读 3159·2021-11-12 10:36
阅读 3202·2021-09-27 13:37
阅读 3155·2021-08-17 10:15
阅读 2585·2019-08-30 15:55
阅读 2748·2019-08-30 13:07
阅读 790·2019-08-29 16:32
阅读 2642·2019-08-26 12:00
