http://blog.plusicec.com/2015/11/11/html%E6%B8%B2%E6%9F%93%E5%A5%A5%E7%A7%98.html
看到链接里的这张图片,Chrome开发者工具提供的解析页面的过程,故做了一个小试验
以下代码在Chrome 51 Release版的Timeline
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="index.css">
</head>
<body>
</body>
<script>
document.querySelector('body').innerHTML = 'hello world';
</script>
</html>
https://www.uis.cc/2015/12/11/Chrome-Timeline/
「强烈建议在浏览器隐身模式下使用这个工具,并且禁用一切无关的插件,因为这些插件会影响测试的结果。」
可以清晰的看到页面的加载过程
0.Event(beforeunload)
1.Send Request
2.Receive Response
3.Receive Data
4.Event(pagehide)
5.Event(visibilitychange)
6.Event(webkitvisibilitychange)
7.Event(unload)
8.Event(readystatechange)
9.Finish loading
10.Parse HTML
11.Update Layer Tree
12.Paint
13.firstPaint
14.firstContentfullPaint
15.composite Layers
16.Minor GC(123 KB collected)
注:
1.GC,即垃圾回收。
见维基:在计算机科学中,垃圾回收(英语:Garbage Collection,缩写为GC)是一种自动的内存管理机制。当一个电脑上的动态内存不再需要时,就应该予以释放,以让出内存,这种内存资源管理,称为垃圾回收。
我们会看到一次简单页面加载,触发了许多的事件
网友评论