performance理解chrome页面加载机制

该篇只是了解最简单的纯dom的加载。

chrome devtool里面的performance

这个不用介绍，摸索吧。

纯html页面加载过程

页面如下：

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div >aaaaaa</div>
  <div >aaaaaa</div>
  <div >aaaaaa</div>
</body>
</html>

因为当前页面，只有dom。没有任何引入的css和js
通过performance在记录页面加载过程。
可得到如下图：
network只有test.html一个请求。
根据图中红框标注：
下载html。
解析html。
绘制页面。

image.png

下载html会做什么

image.png

点击上图红框选中的task。
我们可以在Event Log中看到在下载过程中做了什么：

从发出请求开始到接收到接收到html内容。
依次浏览器会发送好多事件出去
pagehide。
visiabilitychange
webkitvisiabilitychange
unload
在此处执行了domloading。
readysttatechange

现在浏览器拿到了html的内容，接着会去解析内容。

解析html会做什么

image.png

如上选择红框的task。
可以看到:
Schedule Style Recalculation
domInteractive
Recalculate Style(计算CSSOM Tree)
在domComplete之前是在(构建 DOM Tree)，
load
pageshow
Layout 将dom树与样式树来计算出来(Layout Tree)。

关于dom状态