1.主流浏览器
IE（IE内核 or Trident）、Firefox（Gecko）、Safari（webkit）、Chrome（webkit）及Opera（Presto）
内核也就是所谓的渲染引擎或排版引擎
2.浏览器的构成
主要组件包括：
1. 用户界面 － 包括地址栏、后退/前进按钮、书签目录等
2. 浏览器引擎 － 用来查询及操作渲染引擎的接口。
3. 渲染引擎 － 用来显示请求的内容，负责解析html及css，并将解析后的结果显示出来。
4. 网络 － 用来完成网络调用，例如http请求
5. UI后端 － 用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系统的用户接口。
6. JS解释器 － 用来解释执行JS代码。
7. 数据存储 － 属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据，HTML5定义了web database技术，这是一种轻量级完整的客户端存储技术
3.渲染引擎（The rendering engine）
解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树
渲染引擎基本流程
Gecko--frame树--回流
webkit--render树--布局
Gecko称可见的格式化元素组成的树为frame树，每个元素都是一个frame，webkit则使用render树这个名词来命名由渲染对象组成的树。Webkit中元素的定位称为布局，而Gecko中称为回流。Webkit称利用dom节点及样式信息去构建render树的过程为attachment，Gecko在html和dom树之间附加了一层，这层称为内容接收器，相当制造dom元素的工厂。
4.简化流程
用户输入网址---（首次）--浏览器向服务器发出请求---服务器返回HTML
浏览器加载HTML发现CSS文件---向服务器请求CSS文件--服务器返回CSS
浏览器发现img,开始请求图片，同时渲染后续的代码--返回图片--重新渲染
发现JS文件，阻塞下载，同时会引起DOM树的刷新，重新渲染
讲解的很详细，链接：http://kb.cnblogs.com/page/129756/
网友评论