解析HTML
当浏览器向服务器发出请求获得页面时，服务器用二进制流返回一个HTML，响应头Content-Type=text/html; charset=UTF-8
如果不带这个请求头，浏览器会直接展示HTML文本，将如下代码显示在页面中
<!DOCTYPE HTML>
<html>
<head>
<title>Rendering Test</title>
<link rel="stylesheet" href="./style.css"/>
</head>
<body>
<div class="container">
<h1>Hello World!</h1>
<p>This is a sample paragraph.</p>
</div>
<script src="./main.js"></script>
</body>
</html>
构建DOM树
浏览器获得html后，开始解读这个代码，它为每一个html标签创建Javascript Node。不过每一个标签都有不同的属性，所以它们的Class也不一样，比如div使用HTMLDivElement创建
var divEle = document.querySelector('div.container');
divEle instanceof HTMLDivElement // true
divEle instanceof Node // true
Chrome提供DOMParserAPI用来构建DOM树
const dom = new DOMParser();
dom.parseFromString('<div><h1>123</h1></div>', 'text/html'); // #document
DOM (Document Object Model)
以一个h标签为例，它的原型链大概是这个样子：
h1 -> HTMLHeadingElement -> HTMLElement -> Element -> Node -> EventTarget -> Object
Javascript 本身不理解什么是DOM，DOM是浏览器提供的web api，用来渲染页面并且暴露给开发者用来操作DOM。
最终相互嵌套的html标签被解读成DOM树。
构建CSSOM树
CSSOM (CSS Object Model)，构建好DOM树之后，浏览器从各处加载CSS资源（内置，外部，user-agent，内联），然后构建CSSOM树，CSSOM树的结构大致与DOM树一致，但它不包含不会打印在页面上的标签。
构建Render树
渲染树是DOM树和CSSOM树的组合，它会排除掉那些不占地方的元素，比如display:none 和 长宽都为0的元素。
Layout & Paint
现在浏览器构建好了渲染树，它就开始在页面上绘制这些元素了。浏览器首先计算每个元素的大小和位置（以像素为单位），这个过程是reflow（回流或者重排）。然后是绘制 (Paint)，本质上就是填充像素的过程，包括绘制文字、颜色、图像、边框和阴影等，也就是一个DOM元素所有的可视效果。一般来说，这个绘制过程是在多个层上完成的。最后是渲染层合并(Composite)，将所有层按照合理的顺序合并成一个图层。
到目前为止，构建DOM树，CSSOM树，处理渲染逻辑都是渲染引擎做的。这里列举了一些市面上常见的渲染引擎。
| name | browser | css suffix |
|---|---|---|
| Trident | IE | -ms |
| WebKit | Safari | -webkit |
| Blink | Chrome Edge Opera | -webkit |
| Gecko | Firefox | -moz |
| Blink | Edge | -ms |
DOM Parser Block
一旦浏览器在解析html标签时遇到外部资源，比如一个script file <script src="url"></script>，一个样式表<link rel="stylesheet" href="url"/>或者一张图片
<img src="url" />，浏览器都会开始下载这些资源。
我们都知道，解析DOM树是在主线程上做的，如果主线程忙碌，DOM解析也暂停。只有script会阻塞渲染。假如是内嵌脚本，那么主线程会暂停解析DOM，开始执行脚本；如果是外部文件，主线程同样会暂停解析DOM，直至文件下载成功并且执行完毕后才会继续解析DOM。至于为什么浏览器要这么做，因为浏览器将操作DOM的API暴露给了Javascript，万一脚本中有大量的操作DOM的逻辑，等待DOM构建完毕再执行，只会带来更大的性能问题。
但我们也知道，很多时候这种阻塞是无意义的，比如脚本中如果没有操作DOM的逻辑，此时，我们可以使用async属性，带有async的script标签，下载不会暂停主线程，但脚本一旦下载完毕，仍然需要占据主线程，阻塞渲染。我们还可以使用defer属性，带有这个属性的script标签不仅下载不会暂停主线程，下载之后也不需要立刻执行，所有的defer脚本都是DOM树构建好之后再执行的，执行顺序组照他们在DOM树中出现的顺序。
很多时候我们说script阻塞了渲染(render-blocking，其实本质上是阻塞了解析(parser-blocking)，因为阻塞了解析，才阻塞了渲染。
刚才我们说css资源不是parser- blocking，只能说它没有直接导致parser blocked，但某种情况确实会block parser。
当浏览器遇到外部内联样式文件，它首先会静默下载，此时DOM parsing不会被阻塞。但渲染树的构建 (critical rendering path CRP) 会被暂停（后续的内容暂时不会显示在页面上，但并不意味着页面无内容，当浏览器加载到部分HTML字节流时即开始构建DOM树，然后构建渲染树，显示在页面上）。
假设我们的外部样式标签没有写在head里，就会出现页面的样式一直在更换的情况，我们称之为Flash of Unstyled Content (FOUC)，因此我们建议尽早加载所有的样式文件。
当正在加载样式文件时遇到script标签会发生什么呢？首先script标签直接阻塞了DOM parser，script标签是否可以执行呢？答案是不能，因为此时script标签拿不到最新的样式，因此样式文件加载会阻塞script execution，间接的阻塞了DOM parser。
如何让外部样式表不阻塞render呢，可以加上media='non-render-blocking'
Loaded
+ DOMContentLoaded DCL事件意味着浏览器已经完成了完整的DOM树构建（意味着脚本执行完毕，CSSOM树构建完成）。
+ load 其他资源文件也全部加载完毕
浏览器首屏会出现的问题
- 过长的加载时间
- 无格式页面闪现或者样式发生变化（FOUC）
- 加载不必要的资源
网友评论