浏览器的渲染原理简介

2019-08-16        46

浏览器工作大流程

废话少说,先来看个图:

从上面这个图中,我们可以看到那么几个事:

1)浏览器会解析三个东西:

一个是HTML/SVG/XHTML,事实上,Webkit有三个C++的类对应这三类文档。解析这三种文件会产生一个DOM Tree。

CSS,解析CSS会产生CSS规则树。

Javascript,脚本,主要是通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree.

2)解析完成后,浏览器引擎会通过DOM Tree 和 CSS Rule Tree 来构造 Rendering Tree。注意:

Rendering Tree 渲染树并不等同于DOM树,因为一些像Header或display:none的东西就没必要放在渲染树中了。

CSS 的 Rule Tree主要是为了完成匹配并把CSS Rule附加上Rendering Tree上的每个Element。也就是DOM结点。也就是所谓的Frame。

然后,计算每个Frame(也就是每个Element)的位置,这又叫layout和reflow过程。

3)最后通过调用操作系统Native GUI的API绘制。

DOM解析

HTML的DOM Tree解析如下:

123456789101112<html><html><head><title>Web page parsing</title></head><body><div><h1>Web page parsing</h1><p>This is an example Web page.</p></div></body></html>

上面这段HTML会解析成这样:

下面是另一个有SVG标签的情况。

CSS解析

CSS的解析大概是下面这个样子(下面主要说的是Gecko也就是Firefox的玩法),假设我们有下面的HTML文档:

分享

AM 09:00 ~ 12:00

PM 14:00 ~ 18:00

Tel 010-50933590

Hp 18910140161

设计优势

独立的设计团队 带给您全新的视觉体验

功能开发

强大的技术实力,完成您想要的任何功能

售后服务

完善的售后服务,解决您在使用过程中遇到的问题