浏览器渲染
Last updated
Last updated
Timeline
控制条:
开始记录，停止记录
配置记录期间捕获的信息。
总览:
页面性能高级汇总
火焰图:
CPU 堆叠追踪的可视化
详情:
每个CPU任务的详细报告
HTML代码转化为DOM,DOM是增量构建的，不需要等整个文档下载完才可以构建DOM树。
CSS代码转化成CSSOM（CSS Object Model）。
DOM 和 CSSOM 合并后生成 Render Tree(Render Tree 和DOM一样，以多叉树的形式保存了每个节点的css属性、节点本身属性、以及节点的孩子节点）
Render Tree（渲染树）构建完毕之后，进入“布局（layout）”处理阶段，也就是为每个节点分配一个应出现在屏幕上的确切坐标。这就被称为reflow或者是layout又或者是layouting。
最后，浏览器会在屏幕上绘制（paint）节点。
衍生的问题解析：
HTML是解析一部分，显示一部分的。
<script>标签会阻塞文档的解析，直到脚本执行完毕。如果脚本是外部的，需等到脚本下载并执行完成才继续往下解析。
css不会阻止HTML解析，但CSS还没有加载完时会阻碍HTML渲染与JavaScript脚本运行。
图片资源是异步请求的，图片既不阻塞解析，也不阻塞渲染。
屏幕的变化称为repaint或者redraw。
参考： 1. https://segmentfault.com/a/1190000007766425#articleHeader4 2. https://segmentfault.com/a/1190000006917754
文档的渲染还是要等待顶层css加载完毕。
发送请求：发送GET请求index.html
解析HTML然后发送请求：开始解析HTML并构建DOM，然后发送GET请求style.css和main.js。
解析样式表：根据style.css生成CSSOM
执行计算脚本：执行main.js
布局：基于HTML的元视窗标签，生成布局
绘制页面：绘制网页
参考： 理解浏览器的关键渲染路径
当script标签拥有defer属性时，该脚本会被推迟到整个HTML文档解析完后，再开始执行
被defer的脚本，在执行时会严格按照在HTML文档中出现的顺序执行
当script标签拥有async属性时，该脚本不会再阻塞HTML parser。且不会被CSS阻塞。
脚本只要加载完成，便可开始执行。
被async的脚本，在执行时不会严格按照在HTML文档中出现的顺序执行
async适用于无依赖的独立资源
当render tree中的一部分（或全部）因为元素的规模尺寸、布局、隐藏等改变而需要重新构建，称为回流(reflow) 。 当页面布局和集合属性改变，会出发回流。
当render tree中的一些元素需要重新更新属性，而这些属性只是影响元素外观、风格，不会影响布局的修改(如background-color)，称为重绘(repaint)。
发送一个http请求，获取请求的内容，然后解析HTML的过程。
此过程是根据匹配选择器（例如 .headline 或 .nav > .nav__item）计算出哪些元素应用哪些 CSS 规则的过程。从中知道规则之后，将应用规则并计算每个元素的最终样式。
在知道对一个元素应用哪些规则之后，浏览器即可开始计算它要占据的空间大小及其在屏幕的位置。网页的布局模式意味着一个元素可能影响其他元素，例如 <body> 元素的宽度一般会影响其子元素的宽度以及树中各处的节点，因此对于浏览器来说，布局过程是经常发生的。
Layout后一般存在一个
Update Layer Tree的过程。
页面上显示东西有任何变动都会触发Paint。本质上就是填充像素的过程。包括绘制文字、颜色、图像、边框和阴影等，也就是一个 DOM 元素所有的可视效果。Paint一般是在多个层上完成的。
最后合并图层，输出页面到屏幕。由于页面的各部分可能被绘制到多层，由此它们需要按正确顺序绘制到屏幕上，以便正确渲染页面。
