这其实是一篇读书笔记。
原文：http://taligarsiel.com/Projects/howbrowserswork1.htm
译文：http://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/
随便扯两句，云时代可能就是浏览器的时代，不搞清楚浏览器，怎么在云时代混？
浏览器的常见元素：
(1) 地址栏(2) 前进、后退按钮(3) 书签(4) 刷新(5) 到达主页的按钮
浏览器的主要构成：
chrome不同于其他浏览器的是，它的渲染引擎是多线程的，一个tab对应一个线程。
上面的这个图还是很清晰的，本来想自己弄个中文版的，发现还是原味的好点。
(1) 用户界面(2) 浏览器引擎(3) 渲染引擎(4) 网络(5) UI后端(6) JS解释器(7)数据存储
对于在地址栏输入一个URL，到浏览器呈现出来，自己的理解就是：首先在用户界面部分，输入URL，点击回车，网络部分发送请求，服务器响应，渲染引擎开始工作，解析HTML，解析CSS，JS解析器解析JS，如果有对话框等UI后台绘制它们，数据持久层存储COOKIE什么的。
渲染引擎
对于前端来说，这个比较重要，其实我还没了解清楚，从用户输入URL以后，浏览器的工作流程，但至少知道了渲染器的工作流程。
流程：解析HTML构建DOM树--->解析CSS构建渲染树--->布局渲染树(layout)--->绘制渲染树(painting)
(1) 构建DOM树，HTML的标签转化而来。
(2) 构建Render树，包含颜色和大小的矩形组成。
(3) 布局，确定每个节点在屏幕上的确切坐标
(4) 绘制，遍历render树，使用UI后端层绘制每个节点
这是一个渐进的过程，渲染引擎不会等到HTML解析完才开始构建渲染树，而是随着网络上返回的内容不断的去解析和展示内容。
- DOM树的构建：HTML的解析算法包括两部分（符号化）和（构建树）
通过符号化的通过，解析器就识别了一个一个的dom节点，比如<body>、<div>、文本等，用这些dom节点来构建树，另外这些节点还会被放到堆栈中，是用来做html纠错处理（比如，没有闭合的标签等）用的。
解析结束以后，浏览器将文档表示为可交互阶段，并开始解析处于延时模式中的脚本——这些脚本在文档解析后执行。文档状态将被设置为完成，同时触发一个load事件。
- 渲染树的构建：
渲染树中每个节点用具有CSS盒模型的矩形区域表示。这里面的节点对应的是DOM树中的可视化节点，比如：display:none的节点就不在这棵树中了。 - 布局：
渲染树中的每个节点是没有位置和大小的。这一步就是来计算节点的位置和大小，这一步就叫layout或者reflow。浏览器的一个优化措施是，采用了一个dirty bit系统，一个渲染对象发生了变化或是被添加了，就标记它及它的children为dirty，表示需要layout 。 - 绘制：
最后就是绘制了，块元素的绘制步骤是：
（1）. 背景色
（2）. 背景图
（3）. 边框
（4）. 子节点
（5）. outline（外边框）
----------------------------------------------------------------------------------------
后来仔细的在阅读了文章，跟同事一起对这篇文章进行了分享。
分享以后，才发现，其实了解浏览器的工作原理更重要的是对性能的控制。。
附上PPT，以便交流~