一.浏览器和浏览器内核

1.1 浏览器

1.1.1 浏览器简介

目前，对于桌面系统而言，已经形成微软IE，Mozilla火狐和Google Chrome三足鼎立的形势。
对于移动系统而言，由于苹果的ios和google的安卓系统占领了领先地位，因而这两个系统默认的safari浏览器和安卓浏览器变得非常流行。

1.1.2 浏览器的特性

目前浏览器主要包括网络、资源管理、网页浏览、多页面管理、插件和扩展、书签管理、历史记录管理、设置管理、下载管理、账户和同步、安全机制、隐私管理、外观主题、开发者工具、多操作系统支持等。
下面对它们中的一些重要功能详细介绍:

• 网络：它是第一步，浏览器通过网络模块来下载各种各样的资源。
  例如HTML文本、javascript代码、样式表、图片、音频文件等。网络部分其实非常重要，因为它耗时比较长而且需要安全访问网络上的资源。
• 资源管理：从网络上下载或者本地获取资源，并将他们管理起来，这需要高效的管理机制。
  例如：如何避免重复下载资源、缓存资源等，都是它们要解决的问题。
• 网页浏览：这是浏览器的核心，也是最基本、最重要的功能，它通过网络下载资源并从资源管理器获得资源，将它们转变为可视化的结果，这也是后面介绍的浏览器内核最重要的功能。
• 多页面管理：很多浏览器支持多页面浏览，所以需要支持多个页面同时加载，折让浏览器变得更加复杂。同时，如何解决多页面的相互影响和安全等问题也非常重要。为此，一些浏览器做了大量的工作，例如可能使用线程和进程来绘制网页。
• 插件和扩展：这是现代浏览器的一个重要特征。它们不仅能显示网页，而且支持各种形式的插件和扩展。插件是用来显示网页特定内容的，而扩展则是增加浏览器新功能的软件或压缩包。目前，常见的插件有NPAPI插件、PPAPI插件、ActiveX插件等。扩展则跟浏览器密切先关，常见的油firefox扩展，chromium扩展。
• 账户和同步：将浏览器的相关信息，例如：历史记录、书签等信息同步到服务器，给用户一个多系统下的统一体验，这对用户非常友好，是浏览器易用性一个显著标识。yu安全机制：本质是提供一个安全的浏览器环境，避免用户信息被各种非法工具窃取和破坏。这可能包括显示用户访问的网站是否安全、为网站设置安全级别、防止浏览器被恶意代码攻破等。
• 开发者工具：这对普通用户来说用处不大，但是对网页开发者来说意义却非比寻常。一个优秀的开发者工具可以帮助审查HTML元素，调试javascript代码、改善网页性能等。

1.1.3 HTML

这里我们主要讲一下HTML5的一系列标准。
HTML5一共包含了10个大类别，它们是：

• 离线(offline)
  Application cache, localStorage, Indexed DB,在线/离线事件
• 存储(storage)
  Application cache, localStorage, sessionStorage,Indexed DB等
• 连接(connectivity)
  Web Stockets, Sever-sent事件
• 文件访问(file access)
  File API, File System, FileWriter, ProgressEvents
• 语义(semantics)
  各种新的元素，包括Media, structural, 国际化, Link relation, 属性, form类型, microdata 等
• 音频和视频(audio/video)
  HTML5 Video, Web Audio, WebRTC, Video track等
• 3D和图形(3D/graphics)
  Canvas2D, 3D CSS变换, WebGl, SVG等
• 展示(persentation)
  css3 2D/3D变换，转换，WebFonts等。
• 性能(performance)
  Web Wroker, HTTP caching等
• 其他(Nuts and bolts)
  触控和鼠标, Shadow DOM, CSS masking等

从html5test.com可以了解浏览器对html5的支持情况

1.1.4用户代理和浏览器行为

用户代理，其作用是表明浏览器的身份，因而互联网的内容供应商能够知道发送请求的浏览器身份，浏览器能够支持什么样的功能。因此，网页内容提供商可以为不同的浏览器发送不同的网页内容。例如：通常为chrome的桌面版和android版发送不同的网页内容以适应屏幕和操作系统的区别。
用户代理信息是浏览器向网站服务商发送HTTP请求消息头时加入的，这样，网站服务商就能很容易的了解对方的浏览器信息。

---

1.2浏览器内核及特性

1.2.1内核和主流内核

浏览器内核的主要作用是将页面转变为可视化（准确讲还有可听化）的图像结果。

通常浏览器内核也被成为渲染引擎。所谓的渲染引擎，就是根据描述或者定义构建数学模型，通过模型生成图像的过程。浏览器的渲染引擎就是能够将HTML/CSS/Javascript文本以及相应的资源文件转换为图像结果的模块，如图所示：

HTML/CSS/Javascript => 浏览器渲染引擎 => 图像

目前主流的渲染引擎有Trident, Gecko, Webkit,他们分别是IE,火狐和Chrome的内核。这一对应让人感觉好像渲染引擎和浏览器是一一对应的，其实不然。事实上，同一个渲染引擎可以被多个浏览器所采用。

1.2.2 内核特征

一个渲染引擎主要包括HTML解释器，CSS解释器，布局，Javascript引擎，绘图和网络等。

• HTML解释器：解释HTML文本的解释器。主要作用是将HTML文本解释成DOM树。DOM是一种文档的表示方法。
• CSS解释器： 级联样式的解释器。作用是为DOM中的各个元素对象计算出样式信息，从而为计算最后网页的布局提供基础设施。
• 布局： 在DOM创建之后，Webkit需要将其中的元素对象同样式信息结合起来，计算它们的大小，位置等布局信息，形成一个能够表示这所有信息的内部表示模型。
• Javascript引擎：js引擎能够解释js代码，并通过DOM接口和CSSOM接口来修改网页内容和样式信息，从而改变渲染的结果。
• 绘图：使用图形库将布局计算后个各个网页节点绘制成图像结果。

这些模块依赖许多其他的基础模块。这其中包括网络、存储、2D/3D图形、音频视频和图片解码器等。

下图将展示这些模块是如何一起工作，完成网页的渲染过程。

网页内容输入到HTML解释器，HTML解释器在解释后构成一棵DOM树，这期间如果遇到js代码，就交给js引擎处理，如果遇到css，就交给css解释器去处理。当DOM建立的时候，渲染引擎收到来自CSS解释器的样式信息，构建一个新的内部绘图模型。该模型由布局模块计算模型内部各个元素的位置和大小信息，最后由绘图模块完成从该模型到图像的绘制。

虚线表示在渲染过程中可能使用到的其他模块。