浅谈浏览器解析(1)

浏览器运行原理浅度解析

浅谈浏览器解析(1)_第1张图片
网上的资料很全,这个是我的补充,此图为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 performancespan>
students
p>
<div>
<img src="xxx.jpg">
div>
body>
html>

DOM Tree如图
浅谈浏览器解析(1)_第2张图片

CSSOM Tree

cssom Tree是 css Tree上绑定 css属性,这里不再过多强调,过后会深入探讨。

Render Tree

render tree 获得后会有一个layout过程,当layout结束后,拿到renderLayer tree后就可以交给浏览器进行渲染。

你可能感兴趣的:(浏览器内核)