摘要：為了更加高效的網絡層，它需要不僅僅只是扮演套接字管理員的角色。用套接字池來組織套接字，以源來分組套接字，每個套接字池強制限制其連接數和安全約束。協商是一個為計算機網絡提供通信安全的加密協議。

原文請查閱這里，略有改動，本文采用知識共享署名 4.0 國際許可協議共享，BY Troland。

本系列持續更新中，Github 地址請查閱這里。

這是 JavaScript 工作原理的第十二章。

正如在之前關于渲染引擎的文章中所講的那樣，我們相信好的和偉大的 JavaScript 開發者之間的差別在于后者不僅僅只是理解了語言的具體細節還了解其內部構造和運行環境。

網絡簡史

49 年前，ARPAnet 誕生了。它是早期的報文分組交換網絡及第一個實現 TCP/IP 協議套件的網絡。該網絡連通了加利福亞大堂和斯坦福研究所。20 年后，Tim Berners-Lee 分發了一個后來為人所熟知的萬維網的 『Mesh』草案。在 49 年的時間里，網絡走過了一段漫長的旅程，從僅僅只是是兩臺電腦間交換數據報文到至少 7500 萬臺服務器，38 億人使用互聯網以及 13 億個網站。

本文將試著分析現代瀏覽器使用哪些技術來自動提升應用性能(有些你甚至不了解)，然后著重介紹瀏覽器網絡層。最后，提供一些讓瀏覽器提升網絡應用程序性能的技巧。

概述

現代瀏覽器專門為快速，高效和安全數據傳輸的網絡應用/網站而設計開發的。擁有數以百計的組件運行于各個不同的層級，從進程管理和安全沙箱到 GPU 管線，音頻和視頻及其它更多等等，網絡瀏覽器更類似于一個操作系統而不僅僅只是一個軟件。

瀏覽器的整體性能是由一些大型的組件所決定的，這些組件包括：解析，布局，樣式計算，JavaScript 和 WebAssembly?執行，渲染，當然還有網絡堆棧。

一般情況下，工程師們會把網絡堆?？闯墒且粋€性能瓶頸。經常會發生這樣的情況因為從網絡抓取所有的資源會堵塞渲染剩下的步驟。為了更加高效的網絡層，它需要不僅僅只是扮演套接字管理員的角色。在我們看來獲取資源是一個非常簡單的機制，但是實際上它集成自身的優化準則，接口和服務的一整套平臺。

網頁開發者不需要擔心多帶帶的 TCP 或者 UDP 數據包，請求格式化，緩存以及其它正在發生的一切。瀏覽器會處理這些復雜的玩意，這樣就可以專注開發自己的程序。但是，知道其內部的原理可以幫助開發者開發出更加高效和安全的程序。

本質上，當用戶開始和瀏覽器發生交互所產生的情況如下：

用戶在瀏覽器地址欄中輸入 URL 地址。

在網絡上查找指定 URL 的資源，瀏覽器開始檢查本地和應用程序緩存并試著使用本地副本來響應資源的請求。

當緩存不可用，瀏覽器使用 URL 中的域名然后根據域名從 DNS 處獲取服務器的 IP 地址。如果有域名緩存，將不需要進行 DNS 查詢。

瀏覽器創建一個 HTTP 報文表明其請求遠程服務器的某個網頁。

報文被傳輸到 TCP 層，該層會在 HTTP 報文頭部添加其自身的信息。該信息是保持創建的會話的必要信息。

然后在 IP 層處理報文，該層的主要職責即找出從用戶發送報文到遠程服務器的路徑。在 HTTP 報文頭部添加該路徑信息。

傳輸報文到遠程服務器。

一旦接收到報文，以類似的方式返回響應數據。

W3C Navigation Timing specification 提供了瀏覽器接口及瀏覽器中每個請求背后的可視化計時和性能數據。讓我們瀏覽下這些組件，因為每個組件在獲取最佳用戶體驗方面扮演了重要的角色。

整個網絡請求過程是相當復雜的并且有許多的層次結構，每一層都有可能成為性能瓶頸。這就是為什么瀏覽器使用各種技術努力提升其性能，以便把整個網絡通信的性能損耗降至最低。

套接字管理

看些新技術吧：

源－由應用程序協議，域名和端口號的三個部分組成(比如 https, www.example.com, 443)

套接字池－屬于同源的一組套接字(所有的主流瀏覽器都限制套接字池最多只能有 6 個套接字)

JavaScript 和 WebAssembly 禁止開發者操作多帶帶的網絡套接字的生命周期，這樣是相當的明智的。這樣不僅僅可以讓你頭發少掉點而且可以讓瀏覽器自動優化大量的性能，這些性能包括套接字重用，請求優化和延遲綁定，協議協商，強制連接限制及其它的優化措施。

實際上，現代瀏覽器更一步地將請求管理周期從套接字管理中剝離了出來。用套接字池來組織套接字，以源來分組套接字，每個套接字池強制限制其連接數和安全約束。排隊，優先化等待的請求，然后和套接字池中的單個套接字綁定。如果不是服務器主動關閉這些連接，多個請求可以自動重用相同的套接字。

由于創建一個新的 TCP 連接會帶來額外的性能開銷，重用連接會為其自帶來極大的性能提升。默認情況下，當發起請求的時候，瀏覽器使用所謂的 『keepalive』機制以節省創建到服務器的新連接所耗費的時間。創建一個新的 TCP 連接的平均時間為：

本地請求－23 毫秒

Transcontinental 請求－120 毫秒

Intercontinental 請求－225 毫秒

這樣的架構衍生出了一些其它的優化方法。請求可以依據優先級來以不同的順序執行。瀏覽器可以優化所有套接字間的帶寬分配或者它可以創建套接字以等待預期的請求。

如上所述，這些都是瀏覽器所控制而不用開發者進行干預。但這并不意味著我們無所事事了。選擇正確的數據傳輸所用的網絡通信模式，類型和頻率，正確的協議類型以及正確的服務器堆棧隧道/優化對于提升整個程序的性能有著至關重要的作用。

一些瀏覽器甚至更進一步。例如，當你使用 Chrome 的時候，當用戶使用的時候它會進行自我學習從而變得更加快速。它基于訪問過的網頁和典型的瀏覽器模式來進行學習，這樣就可以預期可能的用戶行為且在用戶進行任意操作之前進行操作。最簡單的例子即當用戶懸停在某個鏈接上的時候預渲染頁面。如果你想學習更多關于 Chrome 優化技術的文章，可以查看 High-Performance Browser Networking 這本書的 https://www.igvita.com/posa/h... 章節。

網絡安全和沙箱

允許瀏覽器操作多帶帶的套接字有另一個非常重要的目的即：瀏覽器就可以針對不被信任的程序資源強制實施一套一致的安全和政策約束措施。例如，瀏覽器禁止通過 API 直接訪問原始網絡套接字，因為這樣會導致任意可疑的程序隨意連接任意主機。瀏覽器也強制連接數限制以保護服務器免受由于客戶端訪問而耗盡其資源。

瀏覽器格式化所有流出的請求以強制格式正確和一致的協議語義來保護服務器。同樣地，瀏覽器會自動解碼響應內容以保護用戶免受可疑服務器的攻擊。

TSL 協商

Transport Layer Security (TLS) 是一個為計算機網絡提供通信安全的加密協議。它廣泛應用于大量應用程序，其中之一即瀏覽網頁。網站可以使用 TLS 來保證服務器和網頁瀏覽器之間的所有通信安全。

整個 TLS 握手過程包含以下幾個步驟：

客戶端向服務器發送 『Client hello』 信息，附帶著客戶端隨機值和支持的密碼組合。

服務器返回給客戶端 『Server hello』信息，附帶著服務器隨機值。

服務器返回給客戶端認證證書及或許要求客戶端返回一個類似的證書。服務器返回『Server hello done』信息。

如果服務器要求客戶端發送一個證書，客戶端進行發送。

客戶端創建一個隨機的 Pre-Master 密鑰然后使用服務器證書中的公鑰來進行加密，向服務器發送加密過的 Pre-Master 密鑰。

服務器收到 Pre-Master 密鑰。服務器和客戶端各自生成基于 Pre-Master 密鑰的主密鑰和會話密鑰。

客戶端給服務器發送一個 『Change cipher spec』的通知，表明客戶端將會開始使用新的會話密鑰來哈希和加密消息?？蛻舳艘舶l送了一個 『Client finished』的消息。

服務器接收到『Change cipher spec』的通知然后使用會話鑰匙來切換其記錄層安全狀態為對稱加密狀態。服務器返回客戶端一個 『Server finished』消息。

客戶端和服務器現在可以通過建立的安全通道來交換程序數據。所有客戶端和服務器之間發送的信息都會使用會話密鑰進行加密。

每當發生任何驗證失敗的時候，用戶會收到警告。比如服務器使用自簽名的證書。

同源策略

當兩個頁面的協議，端口(如果有指定)以及主機名都是一樣的則稱為同源。

以下為一些可能包含跨域的資源示例：

里面的 JavaScript 代碼。語法錯誤的錯誤信息僅適用于同源腳本。

的 CSS。由于 CSS 的松散語法規則，跨域 CSS 要求正確的 Content-Type 頭。各個瀏覽器的限制不同。

圖片

和 媒體文件