《Webkit 技术内幕》学习笔记

1.1 浏览器

1.1.1 浏览器简介

• Berners-Lee：1991年，WorldWideWeb (Nexus)
• Marc Andreessen：1993年，Netscape浏览器，仅支持 HTML
• 1995年，Internet Explorer
• 1998，网景成立 Mozilla 基金会，开发了开源项目 Firefox，2004年发布1.0版本
• 2003年，苹果发布了 Safari 浏览器，2005年发起开源项目 Webkit
• 2008年，Google 以 Webkit 作为内核，创建 Chromium 项目，基于这个项目，Google 发布了浏览器产品 Chrome，不同于 Webkit 之于 Safari，Chromium 本身就是一个浏览器，可以理解为 Chrome 是 Chromium 的稳定版，另外 Chrome 会整合其他很多 Chromium 没有的服务和功能，比如编码解码器、音视频以及自动更新等
• 自此，桌面系统形成 IE、Mozilla 火狐和 Google Chrome 三足鼎立之势，占据超过 90% 的浏览器份额，移动端苹果 Safari 浏览器和 Google 安卓浏览器占据绝对领先地位，他们都是基于苹果发起的开源项目 Webkit

1.1.2 浏览器特性

浏览器的功能：

• 网络：耗时较长，需要安全访问互联网
• 资源管理：管理下载的网络资源、本地资源、缓存等
• 网页浏览：最核心、最基本、最重要，把资源可视化
• 多页面管理
• 插件和扩展
• 账户和同步
• 安全机制
• 开发者工具

1.1.3 HTML

• 1991年，Berners-Lee 提出 HTML1.0

• 1997年 4.0 版本

• 1999年 4.01 版本

• 2012年 HTML5 由 WHATWG 和 W3C 两大组织推荐为候选规范

• HTML5 包含一系列标准，一共包含 10 个大的类别：

类别	具体规范
离线	Application cache, Local storage, Indexed DB, 在线/离线事件
存储	Application cache, Local storage, Indexed DB 等
连接	Web Sockets, Server-sent 事件
文件访问	File API, File System, File Writer, ProgressEvents
语义	各种新的元素
音频和视频	HTML5 Video, Web Audio, WebRTC, Video track 等
3D和图形	Canvas 2D, 3D CSS 变换, WebGL, SVG 等
展示	CSS3 2D/3D 变换, 转换（transition）, WebFonts 等
性能	Web Worker, HTTP caching 等
其他	触控和鼠标, Shadow DOM, CSS masking 等

• 伴随 HTML 的技术：JavaScript (是 ECMAScript的一种实现)，CSS，HTTP，HTTPS

1.1.4 用户代理和浏览器行为

• User Agent，作用是表明浏览器的身份，由于各家浏览器的竞争导致用户代理字符串越来越长，例如：User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36

1.1.5 实践：浏览器用户代理

1. Chrome 启动时加入命令行参数 --user-agent="xxx"
2. 使用 Chrome 开发者工具设置选项覆盖用户代理

1.2 浏览器内核及特性

1.2.1 内核和主流内核

• 浏览器最重要的模块

• 主要作用是将页面转变为可视化（可听化）的图像结果，浏览器内核通常也被称为渲染引擎

• 渲染：根据描述或者定义构建数学模型，通过模型生成图像

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

• 主流浏览器和 Web 平台及其渲染引擎：

	Trident	Gecko	Webkit
基于渲染引擎的浏览器或者 Web 平台	IE	Firefox	Safari, Chromium/Chrome, Android 浏览器, ChromeOS, WebOS 等

• 根据 Wikipedia的统计数据，超过 30 种浏览器和 Web 平台是基于 Webkit 渲染引擎开发的

1.2.2 内核特征

• 渲染引擎模块及其依赖的模块：

  

  • HTML 解释器：将 HTML 文本解释成 DOM 树
  • CSS 解释器：为 DOM 中的各个元素对象计算出样式信息
  • 布局：DOM 创建之后，Webkit 需要将其中的元素对象与样式信息结合起来，计算他们的大小位置等布局信息，形成内部表示模型
  • JavaScript 引擎：解释 JS 代码并通过 DOM 接口和 CSSOM 接口来修改网页中的内容和样式信息，从而改变渲染结果
  • 绘图：使用图形库将布局计算后的各个网页的节点绘制成图像结果

• 渲染引擎的一般渲染过程及各个阶段依赖的其他模块：