[[403147]]

本文轉(zhuǎn)載自微信公眾號「三分鐘學前端」，作者sisterAn。轉(zhuǎn)載本文請聯(lián)系三分鐘學前端公眾號。

本文轉(zhuǎn)載自微信公眾號「三分鐘學前端」，作者sisterAn。轉(zhuǎn)載本文請聯(lián)系三分鐘學前端公眾號。

最開始一切什么都沒有

然后，1990 年，Tim 以超文本語言 HTML 為基礎(chǔ)在 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 技術(shù)領(lǐng)域最具權(quán)威和影響力的國際中立性技術(shù)標準機構(gòu)

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

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

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

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

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

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

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

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

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

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

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

標準是怎么誕生的?

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

[[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則提供了一些優(yōu)化相關(guān)的 API

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

參考：

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