说起浏览器大部分人都会不陌生，但是你对浏览器了解多少？你知道浏览器的工作原理是怎样的吗？市面上这么多浏览器你都用过吗？大家平常都喜欢使用什么浏览器？今天来说一说浏览器的工作原理和我使用的浏览器。
虽说现在已经是移动互联网的时代了，但是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></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/
