1 浏览器
1.1 浏览器简介
一些浏览器
☑ WorldWideWeb, 20世纪80年代后期90年代初期(后改名Nexus)
缔造者: Berners-Lee(W3C组织理事)
功能: 支持早期的 HTML 标记语言，只支持文本、简单的样式表、电影、声音和图片等。
大事记
- 1991，公布了源代码。
☑ Mosaic, 1995(后来发展为 Netscape)
缔造者: Marc Andreessen 领导的团队
功能: 只能显示简单的静态 HTML 元素，没有 JavaScript ，没有 CSS。
☑ Internet Explorer, 1995
缔造者: 微软
☑ Firefox(2004)
缔造者: 网景公司成立的 Mozilla 基金会
Safari(桌面和移动), 2003
缔造者: 苹果
大事记
- 2005年，发起了一个新的开源项目 WebKit(Safari 浏览器的内核)
☑ Chromium(Chrome 的开源版本), 2008
缔造者: Google
内核: 基于 WebKit
☑ Chrome(桌面和移动), 2008
缔造者: Google
相比 Chromium
- 加如了一些私有的编码解码器以支持音视频等；
- Chrome 整合了 Google 众多的网络服务；
- Chrome 还有自动更新的功能(Windows版本)
☑ 安卓浏览器
缔造者: Google
浏览器现状
桌面端和移动端占据绝大多数市场份额的浏览器
主流浏览器支持的操作系统
1.2 浏览器特性
☑ 网络
☑ 资源管理
☑ 网页浏览
☑ 多页面管理
☑ 插件(NPAPI、PPAPI、ActiveX等)和扩展(Firefox 扩展、Chrome 扩展、Safari 扩展)
☑ 书签管理
☑ 历史记录管理
☑ 设置管理
☑ 下载管理
☑ 账号和同步
☑ 安全机制
☑ 隐私管理
☑ 外观主题
☑ 开发者工具
1.3 HTML
重要版本
HTML1.0, 1991, Berners-Lee 提出。HTML4.0, 1997HTML4.1, 1999HTML5, 2012, WHATWG 和 W3C 共同提出。
HTML5
说明: 包括一系列标准，一共10个大类，每个大类都由众多技术或者是规范组成。
HTML5 测试网站: http://html5test.com/
浏览器支持情况: 四种浏览器在 Windows 7 上的 HTML5 支持得分
| IE | Firefox | Chrome | Safari | |
|---|---|---|---|---|
| 版本 | 10 | 20 | 26 | 6.0(Mac OS) |
| 得分(满分500) | 320 | 394 | 468 | 378 |
| HTML5标准分类 | 说明 | 具体规范 |
|---|---|---|
| offline | 离线 | Application cache, Local storage, Indexed DB, 在线/离线事件 |
| storage | 存储 | Application cache, Local storage, Indexed DB等 |
| connectivity | 连接 | Web Sockets, Server-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/graphics | 3D和图形 | Canvas 2D, 3D CSS 变换，WebGL, SVG 等 |
| presentation | 展示 | CSS3 2D/3D 变换，转换(transition), WebFonts等 |
| performance | 性能 | WebSorker, HTTP caching 等 |
| Nuts and bolts | 其他 | 触控和鼠标，Shadow DOM, CSS masking 等 |
1.4 用户代理和浏览器行为
用户代理
用途: 用户代理(User Agent)的作用是用来表明浏览器的身份，因而互联网的内容提供商能够直到发送请求的浏览器身份，浏览器能够支持什么样的功能。
越来越长的 User Agent
- 最初是 Mozilla Firefox 设置了自己的 User Agent;
- IE 为了表达更丰富的信息，在自己的的 User Agent 加入了 Mozilla 相关的信息；
- 评估的 Safari 浏览器也设置了类似的代理，并加入了更多信息；
- 随着 Safari 的流行，Chrome 等浏览器除了包含 Mozilla 之外，还添加了 Safari 浏览器的哪些标志信息。
1.5 实践: 浏览器用户代理
2 浏览器内核及特性
2.1 内核和主流内核
浏览器和 Web 平台及其渲染引擎
| Trident | Gecko | WebKit | |
|---|---|---|---|
| 基于渲染引擎的浏览器或者 Web 平台 | IE | Firefox | Safari, Chromium/Chrome, Android 浏览器, ChromeOS, WebOS 等 |
WebKit
开源: 由苹果发起的 WebKit 开源项目最受业界关注。
官网源码: www.webkit.org
基于 WebKit 的 浏览器和Web 平台
- 浏览器: 有超过30种浏览器
- web平台： Chrome OS 和 WebOS
2.2 内核特征
渲染引擎模块及其依赖的模块
渲染引擎组成|说明
—|—
HTML 解释器|解释 HTML 文本的解释器，主要作用是将 HTML 文本解释成 DOM(文档对象模型)树，DOM 是一种文档的表示方法。
CSS 解释器|级联样式表的解释器，它的作用是为 DOM 中的各个元素对象计算出样式信息，从而为计算最后网页的布局提供基础设施。
布局|在 DOM 创建之后，WebKit 需要将其中的元素对象同样式信息结合起来，计算它们的大小位置等布局信息，形成一个能够表示这所有信息的内部表示模型。
JavaScript 引擎|使用 JavaScript 代码可以修改网页的内容，也能修改 CSS 的信息，JavaScript 引擎能够解释 JavaScript 代码并通过 DOM 接口和 CSSOM 接口来修改网页内容和样式信息，从而改变渲染的结果。
绘图|使用图形库将布局计算后的各个网页的节点绘制成图像结果。
渲染引擎的一般渲染过程及各阶段依赖的其它模块
在渲染完成之后，用户可能需要跟渲染的结果进行交互，或者网页自身有动画操作，一般而言，这需要持续的重复渲染过程。
3 Webkit 内核
3.1 Webkit介绍
WebKit 的历史
- 1998 年，苹果公司参与了由 KDE 开源社区发起的网页渲染引擎 KHTML 的开源项目开发。
- 2001 年，苹果公司宣布从 KHTML 的源代码树中复制代码出来，成立一个新的项目，即 WebKit。
- 2005 年，苹果决定将 WebKit 项目开源，这一举动极大地推动了该项目发展。
WebKit 的众多移植
由于需求不同，或者操作系统不同，或者依赖的模块(如 2D 图形库，有 CG、skia、cairo、Qt 等)，操作系统的开发者必然需要 WebKit 设计和定义一套灵活的框架结构，而不同的厂商基于框架结构，完成基于自身操作系统和依赖模块的实现，这里我们称之为 WebKit 移植(Port)。
WebKit 在分裂
比如 Chromium 新内核——Blink。
3.2 WebKit 和 WebKit2
历史: 在 2010 年 4 月，苹果宣布了 WebKit2，目标是抽象出一组新的编程接口，该接口和调用者代码与网页的渲染工作代码不在同一个进程，这显然有了 Chromium 多进程的优点。
WebKit2 进程结构
3.3 Chromium 内核: Blink
历史: 2013 年 4 月，Google 宣布从 WebKit 复制出来并独立运作 Blink 项目。
相比 WebKit
☑ Blink 将除 Chromium 浏览器需要之外的其他移植的代码都删除了。
☑ Google 希望在未来加入很多新技术。
- 实现跨进程的 iframe。
- 重新整理和修改 WebKIt 关于网络方面的架构和接口。
- 将 DOM 树引入 JavaScript 引擎中。