微信民众号：爱写bugger的阿拉斯加
若有题目或提议，请背景留言，我会全力处置惩罚你的题目。
媒介
此文章是我近来在看的【WebKit 手艺内情】一书的一些明白和做的笔记。
而【WebKit 手艺内情】是基于 WebKit 的 Chromium 项目的解说。
书接上文 阅读器内核之WebKit 架构与模块
1. Webkit 资本加载机制
网络和资本加载是网页的加载和衬着历程当中的第一步，加载的资本包含以下内容：
在资本类的前面加上 “Cached” 字样，是因为效力题目而引入的缓存机制，一切对资本的请求都邑先猎取缓存中的信息， 以决议是不是向效劳器提出资本请求。
2. 资本缓存
资本的缓存机制是进步资本运用效力的有效要领。
它的基本头脑是竖立一个资本的缓存池。
当 WebKit 须要请求资本的时刻，先从资本池中查找是不是存在响应的资本。如果有，WebKit 则掏出以便运用；如果没有，WebKit 建立一个新的 CachedResource 子类的对象，并发送真正的请求给效劳器，WebKit 收到资本后将其设置到该资本类的对象中去，以便于缓存后下次运用。这里缓存指的是内存缓存，而差别于背面在网络栈部份的磁盘缓存。
WebKit 从资本池中查找资本的关键字是 URL, 因为标记资本唯一的特征就是资本的 URL 。这也意味着，如果两个资本有差别的 URL ，然则它们的内容完整一样，也被认为是两个差别的资本。实在，上面是个简朴的示意图，实在的历程比这里要庞杂，这个中触及到了资本的生命周期和失效机制。
3. 资本加载器
依据加载器的范例来分，WebKit 总共有三种范例的加载器。
因为从网络猎取资本是一个异常耗时的历程，平常一些资本的加载是异步实行的，也就是说网络资本的猎取和加载不会障碍当前 WebKit 的衬着历程，比方图片、CSS 文件。
固然，网页也存在某些迥殊的资本会障碍主线程的衬着历程，比方 Javascript 代码文件。这会严重影响 WebKit 下载资本的效力。因为主线程被障碍了，背面的剖析事情没有方法继续往下举行，所以关于 HTML 网页中背面运用的资本也没有方法晓得并发送下载请求。
这时刻，WebKit 会如许：当前的主线程被障碍时，WebKit 会启动别的一个线程去遍历背面的 HTMl 网页，网络须要的资本 URL，然后发送请求，如许就能够防止被障碍。与此同时，WebKit 能够并发下载这些资本，以至并发下载 JavaScript 代码资本。这类机制关于网页的加载提速非常显著。
4. 资本的生命周期
资本池中的生命周期是什么呢？资本池不能无限大，必需要用响应的机制来替代个中的资本，从而到场新的资本。资本池运用的机制实在很简朴，就是采纳 LRU（Lease Recent Used 近来起码运用）算法。
别的一方面，当一个资本加载后，平常它会被放入资本池，以便以后运用。题目是，WebKit 如何推断下次运用的时刻是不是须要更新该资本从而对效劳器从新请求？因为效劳器能够在某段时候以后更新了该资本。
斟酌如许的场景，当用户翻开网页后，他想革新当前的页面。这类状况下，资本池会涌现如何的状况呢？是消灭一切的资本，从新取得？照样直接运用当前的资本？都不是。关于某些资本，WebKit 须要直接从新发送请求，请求效劳器将内容从新发送过来。但关于许多资本，WebKit 则能够运用 HTTP 协定削减网络负载。在 HTTP 协定的范例中对此有划定，阅读器能够发送音讯确认是不是须要更新，如果有，阅读器则从新猎取该资本；不然就须要运用该资本。
WebKit 的做法是，起首推断资本是不是在资本池中，如果是，那末发送一个 HTTP 请求给效劳器，申明该资本在当地的一些信息，比方该资本什么时候修正的，效劳器则依据该信息作推断，如果没有更新，效劳器则发送回状况码 304 ，表明无需更新，那末直接运用资本池中本来的资本；不然。WebKit 请求下载最新的资本内容。
5. Chromium 多历程资本加载
资本的现实加载在各个 WebKit 移植中有差别的完成。Chromium 采纳的是多历程的资本加载机制。
图4-11 形貌了关于 Chromium 如何运用多历程架构来完成资本的加载，主如果多个 Render 历程和 Browser 历程之间的挪用栈触及的主要类。
Render 历程在网页的加载历程当中须要猎取资本，然则因为平安性（现实上，当沙箱模子翻开的时刻，Render 历程是没有权限去猎取资本的）和效力上（资本同享等题目）的斟酌，Render 历程的资本猎取现实上是经由过程历程间通讯将使命交给 Browser 历程来完成，Browser 历程有权限从网络或许当地猎取资本。
在 Chromium 架构的 Renderer 历程中，ResourceHandleInternal 类经由过程 IPCResource-LoaderBridge 类同 Browser 历程通讯。IPCResourceLoaderBridge 类继续自 ResourceLoaderBridge 类，其作用是担任提议请求的对象和复兴结果的诠释事情，现实音讯的吸收和派发交给 ResourceDispatcher 类来处置惩罚。
资本一致交由 Browser 历程来处置惩罚，这使得资本在差别网页间的同享变得很轻易。因为每一个 Renderer 历程某段时候内能够有多个请求，同时另有多个 Renderer 历程，Browser 历程须要处置惩罚大批的资本请求，这就须要一个处置惩罚这些请求的调理器，这就是 Chromium 中的 ResourceScheduler。
6. 网络栈
6.1 WebKit 的网络栈
上图4-13 是 “ent” 所包含的主要子目录，也是 Chromium 网络栈的主要模块。这内里除了一些基本的部份，比方 HTTP 协定。NDS 剖析等模块，还包含了 Chromium 为了削减网络时候 而引入的新手艺，比方 SPDY 、QUIC 等
图4-14 形貌了从 URLRequest 类到 Socket 类之间的挪用历程。以 HTTP 协定为例，图中列出了竖立 TCP 的 socket 衔接历程当中触及的类。
起首是 URLRequest 类被上层挪用并启动请求的时刻，它会依据 URL 的 “scheme” 来决议须要建立什么范例的请求。“scheme” 也就是 URL 的协定范例，比方 “http://”、“file://” ，也能够是自定义的 scheme ，比方 Android 体系的 “file://android_asset/”。 URLRequest 对建立的是一个 URLRequestJob 子类的一个对象，比方图中的 URLRequestJob 类。为了支撑自定义的 scheme 处置惩罚体式格局， Chromium 运用工场形式。
URLRequestJob 类和它的工场类 URLRequestJobFactory 的管理事情都由 URLRequestJobManager 类担任。基本思路是，用户能够在该类中注册多个工场，当有 URLRquest 请求时，先由工场搜检它是不是须要处置惩罚该 “scheme” ,如果没有，工场管理类继续交给下一个工场类来处置惩罚。末了，如果没有任何工场能够处置惩罚，Chromium 则交给内置的工场来搜检和处置惩罚是不是为 “http://”、“ftp://”、或许 “file://” 等。
图 4-15 就是形貌这些类的关联。
7. 代办
当用户设置代办时，用户代办依靠以下类来处置惩罚。
图 4-17 不仅形貌上面这些类，同时也形貌了 Chromium 中猎取网络代办的历程。图中数据示意猎取网络代办的序次，个中的分支 3.1 和 4.1 离别示意简朴的代办设置和代办剧本设置的处置惩罚历程。
8. 磁盘当地缓存
如果没有磁盘缓存，当用户接见网页的时刻，每次阅读器都要须要从网站下载网页，图片、js 等资本，这实在辛苦又不谄谀。处置惩罚这一题目的要领就是将之前阅读器下载的资本保存下来，存到磁盘中，以备以后运用。固然，资本是有时效性的，也会变得不再有效，所以须要有响应的退出机制来处置惩罚这一题目。现在大多半阅读器都有磁盘缓存机制，因为缓存机制确切能够进步网页的加载速率。
8.1 特征
为了顺应网络资本的当地缓存需求， Chromium 的当地磁盘缓存有几个特征或许请求。
- 虽然须要缓存的资本能够许多，但磁盘空间不是无限大的，所以必需要有响应的机制来移除适宜的缓存资本，以便到场新的资本。
- 能够确保在阅读器崩溃时不损坏文件，最少能够庇护原先在磁盘中的数据。
- 能够高效和疾速地接见磁盘中现有的数据构造，支撑同步和异步两种接见体式格局。
- 能够防止同时存储两个雷同的资本。
- 能够很方便地从磁盘中删除一个项，同时能够在操纵一个项的时刻不受其他请求的影响。
- 磁盘不支撑多线程接见，所以须要把一切磁盘缓存的操纵放入零丁的一个线程。
- 晋级版本时，如果磁盘缓存的内部存储构造发作转变， Chromium 依然能够支撑老版本的构造。
8.2 构造
内部构造主要有个类：Backend 和 Entry 。 Backend 类示意全部磁盘缓存，是一切针对磁盘缓存操纵的主进口，示意的是一个缓存表。Entry 类指的是表中的表项。缓存平常是一个表，关于全部表的操纵作用在 Backend 类中，包含建立表中的一个个项，每一个项由关键字来唯一肯定，这个关键字注是资本的 URL。而对项目内的操纵包含读写等都是由 Entry 类来处置惩罚。
9. Cookie 机制
Cookie 花样就是一系列的 “关键字+值” 对，一个简朴的例子以下：
test1 = webkit; test2 = chromium, Expires = Sun, 30 Oct 2016 21:35:00 GMT; Domain = .myweb.cm;
例子中包含两个自定义的关键字，离别是 “test1” 和 “test2” ,它们的值离别为 “webkit” 和 “chromium” 。背面的则是预定义的关键字 “Expires” 和 “Domain”,示意的是该 Cookie 的失利时候和该 Cookie 对应的域。基于平安性斟酌，一个网页的 Cookie 只能被该网页（或许说是该域的网页）接见。
依据 Cookie 的时效性能够将 Cookie 分红两种范例，第一种是会话型 Cookie （Session Cookie）。如果 Cookie 没有设置失效时候，就是会话型 Cookie。第二种是延续型 Cookie （Persistent Cookie），也就是当阅读器退出的时刻，依然保存 Cookie 的内容。该范例的 Cookie 有一个有效期，在有效期内，每次接见该 Cookie 所属域的时刻，都须要将该 Cookie 发送给效劳器，如许效劳器能够有效追踪用户的行动。
Chromium 中支撑 Cookie 的机制也较为简朴和清楚，如图 4-23 所示的是 Chromium 所设想和运用的主要类及其关联。CookieMonster 是Cookie 机制中最主要的类，现实上相当于 Cookie 管理器。
它包含几个作用：
第一是完成 CookieStore 的接口，它是对外的接口，挪用者能够设置和取得 Cookie；
第二是报告种种 Cookie 的事宜，比方更新信息等，主要运用 Delegate 类，
第三是 Cookie 对象的鸠合，也就是 CanonicalCookie 的鸠合，每一个 CanonicalCookie 对象都是保存在内存中的，当须要存储到磁盘的时刻运用 PersistentCookieStore 类，详细由 SQLitePersistentCookieStore 类担任现实的存储行动。
10. 平安机制
HTTP 是一种运用明文来传输数据的运用层协定。构建在 SSL 之上的 HTTPS 供应了平安的网络传输机制，现已被普遍运用于网络上。典范的是电子商务、银行支付方面的运用。基本上一切的阅读器都支撑该协定， Chromium 固然也不破例。
不仅如此，Chromium 也支撑一种新的规范，这就是 HSTS (HTTP Strict TransportSecurity)。该协定能够让网络效劳器声明它只支撑 HTTPS 协定，所以阅读器能够明白效劳器的声明，发送基于 HTTPS 的衔接和请求。平常状况下，阅读器用户不会输入 “scheme（http://）”，阅读器的补充功用平常会到场该 “scheme” ,然则，效劳器能够须要输入 ”https://“ 。在如许子的状况下，该协定就显得异常有效。平常状况下，效劳在返回的音讯头中到场以下信息表明它支撑该规范：
Strict-Transport-Security: max-age=16070400; includeSubDomains
11. 高性能网络栈
Chromium 的网络模块有两个主要目的，其一是平安，其二是速率。为此，该项目引入了许多 WebKit 所没有的新手艺。
11.1 DNS 预取和 TCP 预衔接（Preconnect）
一次 DNS 查询的均匀时候也许是 60 ~ 120ms 之间或许更长，而 TCP 的三次握手时候也许也是几十毫秒或许更长。为了有效削减这段时候，Chromium 引入了 DNS 预取和 TCP 预衔接，它们都是由 Chromium 的 ”Predictor“ 机制来完成的。
起首是 DNS 预取手艺。它的主要头脑是运用现有的 DNS 机制，提早剖析网页中能够的网络衔接。详细来说，当用户正在阅读当前网页的时刻，Chromium 提取网页中的超链接，将域名抽掏出来，运用比较少的 CPU 和网络带宽来剖析这些域名或许 IP 地点，如许一来，用户基础觉得不到这一历程。当用户单击这些链接的时刻，能够节约不少时候，迥殊在域名剖析比较慢的时刻，结果迥殊显著。
DNS 预取手艺是运用体系的域名剖析机制，优点是它不会障碍当前网络栈的事情。DNS 预取手艺针对多个域名采用并行处置惩罚的体式格局，每一个域名的剖析须由新开启的一个线程来处置惩罚，完毕后此线程即退出。
固然， DNS 预取手艺不仅运用于网页中的超链接，当用户在地点栏中输入地点后，候选项同输入的地点很婚配的时刻，在用户敲下回车键猎取网页之前， Chromium 已最先运用 DNS 预取手艺剖析该域名了。
Chromium 运用追踪手艺来猎取用户从什么网页跳转到别的一个网页。能够运用这些数据，一些启发式划定规矩和其他一些暗示来展望用户下面会单击什么超链接，当有充足的把握时，它便先 DNS 预取，更进一步，还能够预先竖立 TCP 衔接。听起来够智能的吧，是的。然则这对用户的隐私是一个极大的应战，它以至能展望你单击什么超链接。
同 DSN 预取手艺一样，追踪手艺不会运用于网页中的超链接，当用户在地点栏中输入地点，如候选项同输入的地点很婚配，则在用户敲击下回车键猎取该网页之前，Chromium 就已最先尝试竖立 TCP 衔接了。
11.2 HTTP 管线化（PipeLining）
许多时刻，效劳器和阅读器通话是按递次来的，阅读器发送一个请求给效劳器，比及效劳器的复兴后，才会发送别的一个请求。弊病是效力极差。
HTTP 1.1 最先增加了管线化手艺，Chromium 也支撑这一手艺，但它须要效劳器的支撑二者合营才完成 HTTP 管线化。HTTP 管线化手艺是一项同时将多个 HTTP 请求一次性提交给效劳器的手艺，因而无需守候效劳器的复兴，因为它能够将多个 HTTP 请求添补在一个 TCP 数据包内。HTTP 管线化须要在网络上传输较少的 TCP 数据包，因而削减了网络负载。
图4-24 形貌了 HTTP 管线化手艺是如何传送请乞降复兴的。
请求结果的管线化使得 HTML 网页加载时候动态提拔，迥殊是在详细有高耽误的衔接环境下。在速率较快的网络衔接环境下，提速能够不是很显著。因为这些请求照样有显著的先后递次的。管线化机制须要经由过程永远衔接（Persistent Connection）完成，而且只需 GET 和 HEAD 等请求能够举行管线化，运用场景有很大的限定。
11.3 SPDY
SPDY 就是为了处置惩罚网络耽误和平安性题目。依据 Google 的官方数据，运用 SPDY 协定的效劳器和客户端能够将网络加载的时候削减 64。
SPDY 协定是一种新的会话层协定，因为网络协定 是一种栈式构造，它被定义在 HTTP 协定和 TCP 协定之间，SPDY 协定的中心头脑 是多半复用，仅运用一个衔接来传输一个网页中的浩瀚资本。
11.4 QUIC
QUIC 是一种新的网络传输协定，主要目的是革新 UDP 数据协定的才能。同 SPDY 竖立在传输层之上差别，QUIC 所要处置惩罚的题目就是传输层的传输效力，并供应了数据的加密，所以，SPDY 能够在 QUIC 之上事情。
12. 实践：高效的资本运用战略
WebKit 和 Chromium 为了高效力地下载资本，设想出了林林总总的战略和新手艺。
## 12.1 DNS 和 TCP 衔接
DNS 和 TCP 衔接占用大批的时候，所以为了高效地加载网页，网页开辟者能够从以下方面动手转变以削减这一部份的时候。
- 削减链接的重定向。有些网页中运用了大批重定向，能够还会有许屡次重定向，还不仅请求阅读器竖立屡次链接，同时还须要屡次 DNS 剖析，这会障碍 DNS 预取手艺的运用，应当只管防止。
- 运用DNS预取机制。网页的开辟者固然晓得须要链接的 URL,为了让阅读器也晓得这些链接，开辟者能够指定须要预取的 URL。
- 搭建支撑 SPDY 协定的效劳器，固然指的是那些须要运用 HTTPS 协定的网站。
- 防止毛病的链接请求。有些网页中包含了一些失效的链接，当阅读器试图猎取该链接对应的资本的时刻，就会占用网络资本。
12.2 资本的数目
我们也能够经由过程削减网页中所需的资本数目来改良网页的加载：
- 在 HTML 网页中内嵌小型的资本，也就是当资本比较小的时刻，能够将它们直接放在网页中，能够的资本如 CSS、JavaScript 和图片等。比方图片 用 webpack 直接打包成 base64。
- 兼并一些资本，比方 CSS、JavaScript 和图片。罕见的就是一些网页中大批运用的小图片，能够将它们兼并成一张大的图片以供运用。
12.3 资本的数据量
关于每一个资本而言，经由过程削减它的数据量来进步网页的加载速率：
- 运用阅读器当地磁盘缓存机制。因为 HTTP 协定支撑资本的失效机制，经由过程对资本设置恰当的失效期来削减阅读器对资本的反复猎取。
- 启用资本的紧缩手艺。比方，关于图片而言，能够运用 zip 紧缩手艺，然后在 HTTP 音讯头中申明该资本经由紧缩，如许能够有效削减网络传输的数据量。
末了
愿望本文对你有点协助。
下期分享 第五章 HTML诠释器与模子 敬请期待。
对 全栈开辟 有兴致的朋侪能够扫下方二维码关注我的民众号 —— 爱写bugger的阿拉斯加
分享 web 开辟相干的手艺文章，热门资本，全栈程序员的生长之路。
人人一同交换生长。
只需关注民众号并复兴 福利 便送你六套、而且每套代价 3999 元的视频资本： Python、Java、Linux、Go、vue、react、javaScript
