「html渲染奥秘」的学习笔记
2016-06-11 本文已影响41人
lizhihua
http://blog.plusicec.com/2015/11/11/html%E6%B8%B2%E6%9F%93%E5%A5%A5%E7%A7%98.html
看到链接里的这张图片，Chrome开发者工具提供的解析页面的过程，故做了一个小试验
Paste_Image.png
以下代码在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）是一种自动的内存管理机制。当一个电脑上的动态内存不再需要时，就应该予以释放，以让出内存，这种内存资源管理，称为垃圾回收。
我们会看到一次简单页面加载，触发了许多的事件
