浏览器如何运行？浅析浏览器渲染过程

说起浏览器大部分人都会不陌生，但是你对浏览器了解多少？你知道浏览器的工作原理是怎样的吗？市面上这么多浏览器你都用过吗？大家平常都喜欢使用什么浏览器？今天来说一说浏览器的工作原理和我使用的浏览器。

虽说现在已经是移动互联网的时代了，但是pc端的浏览器依然是不可或缺的，之前我有分享过浏览器的一些主要功能和浏览器的多进程架构，（简简单单！一分钟了解浏览器的工作原理），今天我们接着来说说浏览器工作原理中的渲染过程。

浏览器渲染过程

1、渲染流程

用户请求的HTML文本(text/html)通过浏览器的网络层到达渲染引擎后，渲染工作开始。每次通常渲染不会超过8K的数据块，其中基础的渲染流程图：

2、渲染流程四步骤

解析html 为DOM 树：渲染引擎首先解析HTML文档，生成DOM树。

渲染树结构：接下来不管是内联式，外联式还是嵌入式引入的CSS样式会被解析生成CSSOM树，根据DOM树与CSSOM树生成另外一棵用于渲染的树-渲染树(Render tree)。

布局渲染树：然后对渲染树的每个节点进行布局处理，确定其在屏幕上的显示位置。

绘制渲染树：最后遍历渲染树并用UI后端层将每一个节点绘制出来。

解析html 为DOM 树 :

1）HTML字节流解码变为字符流。根据不同编码方式，如UTF-8 GBK来解码

2）词法分析：将字符流解析为一个个词语

3）语法分析：通过不同标签，生成node节点

4）构建DOM树：将node节点组织成DOM树

<html>

<body>

<p>Hello World</p>

<div>![](example.png)</div>

</body>

</html>

CSS解析器读取CSS文件，得到元素最匹配的样式

1）经过词法分析和语法分析，生成一个个CSS规则。规则由选择器和一个key:value对组成的属性集合构成

2）进行规则匹配：根据元素信息，如id class 标签，通过不同优先级得到元素最匹配的CSS规则

p,div {

margin-top: 3px;

}

.error {

color: red;

}

渲染树结构:

生成RenderObject树：由DOM树构建RenderObject树，并将CSS得到的元素匹配的样式存入到RenderObject中。

布局渲染树 : 根据RenderObject中的样式属性，先测量元素的宽高，这个过程一般需要递归，因为父元素的大小会受到子元素影响。然后计算根据框模型，由paddind border margin计算布局。

绘制渲染树 : 先绘制元素背景，然后是浮动部分，最后是前景（content，padding，border等部分）。最后得到了用户可见区域（ViewPort）的内存表示。

简洁的浏览器

哈客安全浏览器（c.hake.cc）是我在众多浏览器中选择留下来的一个浏览器。以下是四个我选择它的理由：

1、安全

哈客安全浏览器采用AI智能防护技术拦截恶意网址，可自动拦截挂马、欺诈、网银仿冒等恶意网址，安全快速。

2、干净

真正的干净简洁绿色无广告，肯定有很多人和我一样不喜欢一打开浏览器就看到网页的快捷方式。一打开软件只有一个界面，只有搜索框，极大地增加了我对它的好感。浏览器一打开是这样的：

3、功能齐全

麻雀虽小五脏俱全，浏览器该有的功能都有。扩展程序，账号管理，基础设置等等都一目了然。

4、云同步

支持设备同步账号，同步书签、打开的标签页等数据，方便管理。

下面附上地址：https://c.hake.cc/

【实用工具免费使用】
免费MD5加密解密：https://md5.cn/
靶场实训学院：https://gf.md5.com/
哈客部落：https://www.hake.cc/

知乎、头条、百家、公众号搜索【哈客部落】