浏览器运行原理浅度解析
网上的资料很全,这个是我的补充,此图为webkit内核的渲染机制,和我的不一样的应该是Gecko内核。过段时间会深度解析内核原理
渲染过程是指 , 拿到HTML以后经过HTML解析器解析转化成DOM Tree,CSS同理转成CSSOM Tree,两个树相互结合形成RenderObject Tree,然后经过Layout(布局),会形成RenderLayer Tree,最后通过Painting进行GUI画图。这就是泛指的浏览器渲染过程。
这些功能在webkit里属于webcore也就是布局引擎
DOM Tree
<html>
<head>
<meta name="viewport" context="width=device-width">
</head>
<body>
<p>
Hello <span>web performance</span>
students
</p>
<div>
<img src="xxx.jpg">
</div>
</body>
</html>
DOM Tree如图
CSSOM Tree
cssom Tree是 css Tree上绑定 css属性,这里不再过多强调,过后会深入探讨。
Render Tree
render tree 获得后会有一个layout过程,当layout结束后,拿到renderLayer tree后就可以交给浏览器进行渲染。