前端基础1：浏览器的渲染和加载

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/