浏览器的工作原理

在浏览器上输入一个网址后，一个漂亮的页面就呈现在我们眼前，中间发生了什么了？对于一个普通用户来讲，也许不用思考这个问题，但要作为一个名前端开发人员或是想开发插件的同学来讲，掌握浏览器的工作原理是非常有必要的！

浏览器主要功能

今天讨论五种主流浏览器——IE、Firefox、Safari、Chrome及Opera。浏览器的功能和目的都是一样的，但在解析的过程中会有些差别。那么浏览器的主要功能有哪些？

1. 用户界面（这个不重要） － 包括地址栏、后退/前进按钮、书签目录等，也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分。

2. 浏览器引擎 － 用来查询及操作渲染引擎的接口。另外还用来操作浏览器的数据存储。

3. 渲染引擎 － 用来显示请求的内容，例如，如果请求内容为html，它负责解析html及css，并将解析后的结果显示出来。

4. 网络 － 用来完成网络调用，例如http请求，它具有平台无关的接口，可以在不同平台上工作。

5. UI后端 － 用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系统的用户接口。

6. JS解释器 － 用来解释执行JS代码。

7. 数据存储 － 属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据，HTML5定义了web database技术，这是一种轻量级完整的客户端存储技术

 

图1：浏览器主要组件

需要注意的是，不同于大部分浏览器，Chrome为每个Tab分配了各自的渲染引擎实例，每个Tab就是一个独立的进程。

参考页面：

霹雳猿教程_-HTML教程-HTML 教程

 

霹雳猿教程_-HTML教程-HTML 简介

 

霹雳猿教程_-HTML教程-HTML 基础

 

霹雳猿教程_-HTML教程-HTML 元素

 

霹雳猿教程_-HTML教程-HTML 属性

 

霹雳猿教程_-HTML教程-HTML 标题

 

霹雳猿教程_-HTML教程-HTML 段落

 

霹雳猿教程_-HTML教程-HTML 链接

 

霹雳猿教程_-HTML教程-HTML 头部 http://www.piliyuan.com/HTML/22.html

 

霹雳猿教程_-HTML教程-HTML CSS  http://www.piliyuan.com/HTML/23.html

 

霹雳猿教程_-HTML教程-HTML 图像 http://www.piliyuan.com/HTML/24.html

 

霹雳猿教程_-HTML教程-HTML 表格介绍  http://www.piliyuan.com/HTML/27.html

 

霹雳猿教程_-HTML教程-HTML 列表  http://www.piliyuan.com/HTML/28.html