Web 與 Web 性能世界萬物誕生記

最開始一切什么都沒有

然后，1990 年，Tim 以超文本語言 HTML 為基礎在 NeXT 電腦上發(fā)明了最原始的 Web 瀏覽器，并在接下來持續(xù)廣泛推廣 Web 的理念，于 1993 年 4 月進行了發(fā)布

1994 年 7 月，HTML 2.0 規(guī)范發(fā)布

1994 年底，由 Tim 牽頭的萬維網(wǎng)聯(lián)盟（World Wide Web Consortium）成立，簡稱 W3C ，目前已是 Web 技術領域最具權威和影響力的國際中立性技術標準機構

W3C 相當于一個論壇：它以工作組的方式（例如 HTML 工作組、CSS 工作組等），把某項技術的相關各方聚集起來，最終由他們來產(chǎn)出標準。它制定了整個平臺的規(guī)則，監(jiān)督整個進程。但這些技術規(guī)范（基本上）并非由 W3C 的工作人員編寫完成。

此時的網(wǎng)頁以 HTML 為主，是純靜態(tài)的網(wǎng)頁，網(wǎng)頁是“只讀”的，信息流只能通過服務器到客戶端單向流通，前端頁面要想獲取后臺信息需要刷新整個頁面

1995 網(wǎng)景推出 JavaScript 初始版本 Mocha，動態(tài)網(wǎng)頁開始進入我們的視野，頁面不再是靜止的，頁面可以獲取服務器數(shù)據(jù)信息并不斷更新。以 Google 為代表的搜索引擎以及各種論壇相繼出現(xiàn)，使得 Web 充滿了活力

隨著動態(tài)頁面技術的不斷發(fā)展，后臺代碼變得龐大臃腫，后端邏輯也越來越復雜，逐漸難以維護。此時，后端的各種 MVC 框架逐漸發(fā)展起來

直至 2005 年，這個階段一直處于 后端重、前端輕 的狀態(tài)

2005 年， AJAX 越來越流行，越來越多的網(wǎng)站使用 AJAX 動態(tài)獲取數(shù)據(jù)，這使得動態(tài)網(wǎng)頁內(nèi)容變成可能，像 Facebook 這樣的社交網(wǎng)絡開始變得繁榮起來，前端一時間呈現(xiàn)出了欣欣向榮的局面。

2008 年 1 月 22 日，HTML5 草案發(fā)布

2009 年 12 月， ECMAScript 5.0 規(guī)范發(fā)布

隨著各類規(guī)范的制定，多個瀏覽器的發(fā)布，數(shù)以千計 Web 服務器的建立，上百萬網(wǎng)頁的生成， Web 爆發(fā)式發(fā)展。前端能夠承擔的責任越來越重，網(wǎng)頁設計越來越復雜，人們開始思考如何提高 Web 性能、改善用戶體驗

為此，2010 年 8 月，W3C 在其官網(wǎng)上宣布成立 Web 性能工作組（Web Performance Working Group），將由來自 Google 和 Microsoft 的工程師擔任主席，任務目標是制定衡量 Web 應用性能的方法和 API 。

隨后， Web 性能工作組開始制定了一系列 Web 性能標準，應用到桌面和移動瀏覽器以及其他環(huán)境中，幫助 Web 開發(fā)人員評估和理解應用的性能特征。

標準是怎么誕生的？

一個標準的形成要經(jīng)歷幾個主要階段：工作草案（Working Draft，WD），候選推薦（Candidate Recommendation，CR），推薦（Recommendation，Rec）。一個標準要進入推薦階段，它的所有功能必須要有至少兩種獨立的實現(xiàn)。因此主流瀏覽器廠商在 W3C 的會員席位中占有很高的比例，他們對標準的形成和推廣起到了決定性的作用。

直至今日，Web 性能工作組已經(jīng)制定了如下性能標準：

• Navigation Timing：提供了文檔導航過程中完整的計時信息，即一個文檔從發(fā)起請求到加載完畢各階段的性能耗時
• Performance Timeline：提供了獲取各種類型（navigation、resource、paint 等）的性能時間線的方法
• Resource Timing：提供文檔中資源的計時信息
• User Timing：幫助應用程序使用高解析度時間戳測量性能
• High Resolution Time：將單調(diào)的亞毫秒級解析度時鐘 API 提供給Web應用，以便 Web 應用可以精確地測量兩個事件之間的時間間隔
• Server Timing：描述了如何將服務器端在請求-響應周期內(nèi)的性能度量傳遞給用戶代理，并定義了一個 API 使應用程序能夠收集、處理和執(zhí)行這些指標
• Paint Timing：記錄在頁面加載期間的一些關鍵時間點
• Long Tasks API：本文檔定義了一個API，網(wǎng)頁作者可以使用它來檢測長任務的存在，這些長任務會在很長一段時間內(nèi)獨占UI線程，并阻止其他關鍵任務的執(zhí)行——例如響應用戶輸入
• Page Visibility：提供了觀察頁面可見性狀態(tài)的 API，可以幫助開發(fā)資源高效的Web應用程序
• Beacon：該規(guī)范定義了一個接口，web開發(fā)人員可以使用該接口來調(diào)度異步和非阻塞的數(shù)據(jù)傳遞，最大限度地減少與其他時間關鍵操作的資源爭用，同時確保這些請求仍然被處理和傳遞到目的地
• Resource Hints：定義了 HTML 的 <Link> 元素的 rel 屬性值，包括 dns-prefetch、preconnect、prefetch 和 prerender，幫助用戶代理在決策過程中決定它應該連接哪些源，應該獲取哪些資源并對其進行預處理以提高頁面性能。
• Preload：定義了可與鏈接元素一起使用的 preload 關鍵字，這個關鍵字提供了一個聲明性的獲取原語，用來初始化早期獲取，并將獲取與資源執(zhí)行分

詳情可查看：https://www.w3.org/webperf ，其中：

• Navigation Timing、Performance Timeline、Resource Timing、User Timing、Server Timing、Paint Timing、High Resolution Time 定義了Web 加載、請求等各類操作的計時信息（性能度量）

• Page Visibility、Beacon、Resource Hints、Preload則提供了一些優(yōu)化相關的 API

各大瀏覽器實現(xiàn)這些標準（如window.performance），用戶基于這些標準，定義了性能指標以及它的計算方式、優(yōu)化策略等，進而確立了前端性能排查、優(yōu)化與監(jiān)控上報體系

參考：

• W3C
• 性能優(yōu)化歷史
• 前端發(fā)展簡史