浅谈浏览器解析(1)

最新推荐文章于 2021-11-26 19:35:41 发布

原创最新推荐文章于 2021-11-26 19:35:41 发布 · 332 阅读

0 ·

CC 4.0 BY-SA版权

浏览器内核专栏收录该内容

0 篇文章

订阅专栏

浏览器运行原理浅度解析

浏览器解析原理webkit内核版
网上的资料很全，这个是我的补充，此图为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>