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

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

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

[[403147]]

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

最開始一切什么都沒有

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

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

1994 年底，由 Tim 牽頭的萬維網(wǎng)聯(lián)盟(World Wide Web Consortium)成立，簡(jiǎn)稱 W3C ，目前已是 Web 技術(shù)領(lǐng)域最具權(quán)威和影響力的國(guó)際中立性技術(shù)標(biāo)準(zhǔn)機(jī)構(gòu)

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

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

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

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

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

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

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

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

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

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

標(biāo)準(zhǔn)是怎么誕生的?

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

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

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

[[403148]]

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

Navigation Timing、Performance Timeline、Resource Timing、User Timing、Server Timing、Paint Timing、High Resolution Time 定義了Web 加載、請(qǐng)求等各類操作的計(jì)時(shí)信息(性能度量)
Page Visibility、Beacon、Resource Hints、Preload則提供了一些優(yōu)化相關(guān)的 API

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

參考：