html分页加载原理,performance理解chrome页面加载机制1

performance理解chrome页面加载机制

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

chrome devtool里面的performance

这个不用介绍，摸索吧。

纯html页面加载过程

页面如下：

Document

aaaaaa

aaaaaa

aaaaaa

因为当前页面，只有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里面没有样式，但是浏览器本省是有默认样式的。