performance理解chrome页面加载机制1
2020-02-27 本文已影响0人
Doter
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)。
绘制
image.png
更新布局树()
绘制(通过布局树绘制得到渲染层)
合并渲染层
小结
webkit的显示处理流程
ps:尽管我的demo里面没有样式，但是浏览器本省是有默认样式的。
