弄清楚浏览器的工作原理，我们才能用写出更加高效的前端代码。
主流的浏览器主要包括：Firefox、Chrome、Safari、Edge、IE等，这些浏览器基于WebKit，Gecko两种内核。（各种主流浏览器内核介绍）
WebKit包含两个主要部分WebCore渲染引擎（或排版引擎）和JSCore引擎（用于解析JavaScript）。
一般浏览器主要包括7个组件： 1 用户界面 （User Interface） 用户之间接触的部分，通常包括地址栏、后退/前进按钮、菜单栏等。
2 浏览器引擎 （Browser Engine） 渲染引擎的查询与操作接口
3 渲染引擎 （Rendering Engine） 显示请求的内容，即页面
4 网络层 （Networking） 网络调用，例如HTTP请求，基于具体操作系统平台
5 UI后端 （UI Backend） 用于绘制图形化组件，利用操作系统的用户接口
6 JavaScript解析器 （JavaScript Interpret） 解析并执行JavaScript代码
7 数据存储（Data Storage） 数据持久层，浏览器需要将数据存储在磁盘，例如cookies
注 Chorme浏览器不像其他浏览器，每个标签有一个渲染引擎对象进行渲染，分开处理。
渲染引擎，可以显示HTML、XML文件和图像，也可以通过插件的方式显示其他类型的文化。例如，使用PDF插件显示PDF文件。
渲染引擎的基本流程 渲染引擎解析每个HTML文件，将HTML文件中的标签转换为DOM树中的节点，构建DOM树。 然后，解析扩展的CSS文件和内嵌的style元素，计算每个DOM节点的视觉信息，并构建Render树。 Render树生成完后，需要计算每个Render树节点的布局，位置信息，最后通过UI Backend绘制RenderTree，完成页面显示。
主要的流程示例
参考： 1 http://taligarsiel.com/Projects/howbrowserswork1.htm#Resources
2 https://www.zhihu.com/question/30218438
