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

作者： sisterAn 2021-06-02 08:19:05

開發前端

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

[[403147]]

本文轉載自微信公眾號「三分鐘學前端」，作者sisterAn。轉載本文請聯系三分鐘學前端公眾號。

最開始一切什么都沒有

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

1994 年 7 月，HTML 2.0 規范發布

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

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

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

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

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

2005 年， AJAX 越來越流行，越來越多的網站使用 AJAX 動態獲取數據，這使得動態網頁內容變成可能，像 Facebook 這樣的社交網絡開始變得繁榮起來，前端一時間呈現出了欣欣向榮的局面。

2008 年 1 月 22 日，HTML5 草案發布

2009 年 12 月， ECMAScript 5.0 規范發布

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

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

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

標準是怎么誕生的?

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

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

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

[[403148]]

詳情可查看：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則提供了一些優化相關的 API

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

參考：

W3C
性能優化歷史
前端發展簡史

責任編輯：武曉燕來源：三分鐘學前端

Web 性能 HTML