浏览器主要构成部分

1. shell 部分 即用户操作部分

2. 内核部分

   ~ 渲染引擎 => 负责解析 html及css 页面呈现

   ~ js 引擎  =>  解析js

   ~ 数据存储：持久层，把需要的数据保存到本地硬盘上，如 cookie

   ~ 网络：网络调用，如 http

   ~ UI 后端： 绘制基本窗口小部件

浏览器渲染过程

从上至下渲染

解析html 为DOM 树 :
1）HTML字节流解码变为字符流。根据不同编码方式，如UTF-8 GBK来解码
2）词法分析：将字符流解析为一个个词语
3）语法分析：通过不同标签，生成node节点
4）构建DOM树：将node节点组织成DOM树

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

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

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