久久国产精品一区二区三区四区,久色婷婷小香蕉久久,国产日韩欧美在线播放不卡,另类av一区二区

大家好，我是Echa。

不知道大家最近有沒有關注 2023谷歌 Google I/O 大會呢？作為小編的我最近也是非常重視，非常關心2023 谷歌 Google I/O 大會。作為程序員，一年一度的谷歌 Google I/O大會哪怕太忙也的了解了解，因為Google I/O 大會太多太多的新技術和未來發展方向，有利于個人的未來規劃和學習方向。

【資料圖】

今天繼續帶著大家解讀2023年Google I/O，我會重點為大家解讀前端開發者應該關注的信息，應該包括以下這些方向：

一、Web 平臺的最新動態（已發布）二、提升 Web 核心性能指標優化建議 （本篇）三、準備好迎接三方 Cookie 的終結四、Web UI 開發的最新動態五、Web 動畫開發的最新動態六、合作打造穩定的 Web 體驗七、移動端 Web 開發的新功能

Barry Pollard

Barry Pollard本在文章中分享了2023年的最佳Core Web Vitals的優化建議。Web性能方面有非常多的建議，但很難判斷哪些建議會產生最大的影響。Chrome團隊花費了一年的時間確定了每個核心Web指標的三項最佳建議，這些建議對于大多數網站都是相關的，并且對于大多數開發人員來說也是實際可行的。

LCP 優化建議

首先，讓我們來看看網站最大內容渲染時間（LCP）的建議。LCP是渲染網頁最大內容的時間，相比于CLS或FID，LCP往往是大多數網站最難以應付的衡量指標。

在大多數情況下，約70-80%的網站是因為需要渲染或下載圖片引起的。去年的Google I/O活動上，他們展示了實際的下載時間往往不是圖像的最大延遲，今年的分析進一步證實了這一點。

Image 加載優化

為了優化LCP的時間，我們可以讓使靜態HTML中的圖片資源更易于被發現，這有可以讓瀏覽器的預加載掃描程序更早的找到并加載它。

使用背景圖片、客戶端渲染和懶加載等方法是可能存在問題的，它們不利于LCP的發現。

而使用傳統的img元素或添加預加載鏈接等方式則可以使圖像資源被預加載掃描程序發現，并被瀏覽器盡早加載。

你還可以使用Chrome devtools中的加載瀑布工具來識別開始加載較晚的資源，通過把圖片包含在HTML中（讓圖片元素預加載）即可解決這個問題。但是在將LCP圖像優化的可以被易于發現后，并不代表就可以更快的加載。因為瀏覽器更傾向于優先處理阻塞渲染的內容，如CSS和同步JavaScript，而不是圖像。

fetch proirity API

新的fetch proirity API允許我們自定義標記資源的優先級。只需將fetchprority屬性添加到我們的圖像或預加載LCP元素中，就可以使瀏覽器更早地開始下載它們，并具有更高的優先級，這可以對LCP時間產生很大的影響。這個API已經在基于chromium的瀏覽器中提供，Safari和Firefox也正在實現相關代碼，并且這個屬性是漸進式的，在不支持它的其他瀏覽器中會被簡單地忽略?；氐街暗睦樱覀兘鉀Q了圖片可盡早被發現的問題，但是請求圖像和開始下載依然會存在很大的延遲。使用fetch proirity API可以將延遲最小化，并且讓圖像盡快下載。

這是一個優化LCP指標的最佳示例，我們還可以通過其他多種方式降低非關鍵資源的優先級。

例如使用fetchprority=low或者對它們進行懶加載，以便按需獲取，這樣就可以讓瀏覽器集中處理更重要的資源，比如影響LCP指標的元素。我們只需要確保不要在LCP圖像本身上使用這些技術即可。

如果我們使用了JavaScript框架，建議使用Chrome Aurora團隊開發的Image組件添加圖像。其中Angular和XJS組件已經內置了提取優先級的支持，團隊也正在開發Next.js的Image組件，以支持這個新的API。

Chrome團隊也與其他平臺有著合作，例如如果大家使用的是WordPress，就可以嘗試使用官方WordPress性能實驗室插件的新提取優先級模塊。這是Chrome團隊與WordPress核心性能團隊開發合作的成果。

使用 CDN

前兩個LCP的建議是和如何構建HTML來讓LCP資源易于被發現以及優先下載有關，但這都取決于首屏加載HTML的速度。所以，最后一個建議是使用CDN來優化First Byte的時間。

在瀏覽器收到第一次HTML請求響應的第一個字節之前，網站是無法開始加載任何子資源的。越快將首節傳遞給瀏覽器，瀏覽器就可以越快地開始處理它，同時也可以讓其他所有的操作都更快的進行。下面是兩個減少ttfb的最佳方法：

（1）盡可能地將內容服務器設置為地理位置更靠近用戶的位置來減少用戶與服務器之間的距離；（2）對內容進行緩存，以便最近請求的內容可以快速再次提供。

內容分發網絡（CDN）是執行這兩個操作的最佳方法。CDN是一組全球分布式的服務器，它作為用戶的連接點。由于最后一英里的傳輸速度往往是最慢的，而使用CDN可以盡可能的優化這個問題。CDN還允許在這些邊緣節點上緩存內容，從而進一步降低加載時間，所以即使必須要返回到我們的源服務器進行回源加載，CDN通常也可以更快地完成。

開發者經常使用CDN來托管靜態資源，如CSS、JavaScript或Media文件，但是通過CDN提供HTML也可以獲得更多的好處。根據Web Almanac的統計結果，只有29%的HTML文檔請求會通過CDN服務加載。如果你不是這樣做的，那么這意味著你還有很大的機會來優化網站的性能。

CLS 優化建議

下面，我們來看看累積布局移位（CLS）的優化建議。CLS是網頁視覺穩定性的度量指標，意味著當有新的內容加載時，頁面的內容是否經常跳動。

雖然CLS在2020年以來得到了很大的改進，但仍然有約四分之一的網站未達到推薦的閾值，所以很多網站在這方面還有很好的改進用戶體驗的機會。

內容大小

第一個CLS優化建議是確保內容能被顯式地縮放，當它第一次被瀏覽器渲染時，它就可以以正確的尺寸渲染。

一般情況下，我們都會熱衷于推薦大家設定圖像的寬度和高度的尺寸或CSS等效尺寸，現在這仍然是影響CLS的主要原因，網站也往往可以通過提供這些尺寸來輕松的優化CLS，但還有一些其他的優化點。

比如我們可以通過新的CSSaspect-ratio屬性，就可以確保像視頻這樣的其他非圖像內容也能夠較好的響應。

另外還可以將渲染的文字設置適當的高度，例如使用min-height來為廣告卡片等動態的內容保留最小空間，空元素的默認高度為零像素，所以即使對于某些動態的內容，我們不能確定實際的高度，也是可以通過使用min-height來減少CLS的影響。

BF Cache

我們去年看到CLS的最大改進之一是在Chrome中推出的回退緩存或BF緩存中。另外，Safari和Firefox也已經上線這個功能一段時間了。

一個頁面可能在初始加載時具有很大的CLS，因為隨著其他內容（如圖像和廣告）的加載，頁面的結構會一直產生變化，從而影響CLS。當然，我們應該盡量在首屏頁面渲染時避免加載這些內容。

BF緩存會在用戶離開之后，在內存中存儲一個用戶加載頁面后的完整CLS快照。如果用戶返回了這個頁面，就會恢復這個快照。同樣的，如果用戶再次向前訪問，則也可以恢復這個快照。這就完全消除了任何CLS的加載，如果從頭開始重新渲染頁面，BF緩存也會默認啟用，我們不需要采取任何措施來主動啟用它，但是我們可以使用某些API阻止瀏覽器使用它，但這可能會導致瀏覽器沒辦法更好的響應，建議大家不要放棄這種免費的性能優化方案。

Chrome DevTools有一個工具，可以讓我們測試頁面是否有使用BF Cache的資格。如果沒辦法使用BF Cache，工具一般都會告訴我們具體原因。最常見的原因是我們設定了cache-control這個Header的值為no-storage或者在頁面中使用了unload handler，這兩者都會阻止BF Cache的使用。

在Lighthouse 10中，也添加了一個類似的檢測能力，也可以解釋頁面不符合資格的原因。

BF Cache是Chrome團隊為了讓網頁瀏覽更快的正在開發的一系能力之一，這個領域還有一些其他的能力，比如預加載和預渲染也是可以改善網站CLS指標的。

動畫和轉換的處理

最后一個CLS建議是處理動畫和轉換。動畫通常用于移動端的內容，如cookie banner或從頂部或底部滑入的其他通知橫幅，者具體取決于這些動畫或過渡是怎么編碼的，它們可以更少或者更有效，并且可以幫助優化CLS。

動畫的渲染需要瀏覽器重新布局頁面，因此需要更多的工作，即使脫離正常文檔流的絕對定位元素，例如使用top或left移動內容，也會將其計算為布局移位，即使它不會移動任何周圍其他的內容，內容本身也在移動，并且有可能影響其他內容，所以這也會影響CLS。

使用translate進行相同的動畫不會在瀏覽器的布局處理中移動內容，而是在合成器層中進行的，除了對于瀏覽器來說工作量較小之外，這還意味著它無法影響其他的內容，這也意味著它對CLS的影響就變小了。所以我們的解決方案就是替換使用top或left的動畫，并且這種方式在所有的瀏覽器中都得到了支持。

始終優先使用復合動畫，比如如transform，而不是圖層誘導的非復合動畫，如更改top、right、bottom和left。

并且Lighthouse也有一個相關的能力來識別這些問題。

FID 優化建議

最后我們來看看用戶響應相關的優化建議，這包括用戶和頁面進行首次交互操作所花費的時間（FID），以及更全面的交互到下一次繪制的時間（INP）。

網站響應性的關鍵在于確保不阻塞主線程，因為這會導致瀏覽器無法響應用戶輸入。

分解長任務

第一個建議是識別并分解長任務，相當于給瀏覽器一些喘息的空間，以便它能夠響應用戶輸入。

Chrome Devtools和Lighthouse將長任務定義為需要50毫秒或更長時間的渲染工作。這可能聽起來不是很多，但在瀏覽器術語中，這可以是網站能感覺到比較好的響應或不響應的區別。

JavaScript是單線程且貪婪的，一旦它占用了CPU，它就會盡可能地一直保持它，直到它不能處理或者處理完畢為止。在這個例子中，即使有五個子進程，所有的五個進程也是會一個接一個地執行。所以，在我們的代碼中放置一些斷點就是關鍵了。

我們可以使用設置超時settimeout 0毫秒延遲來放入非關鍵的工作和新的任務，這些新任務就會在已經排隊的任何任務之后執行。

還有一些新的和即將推出的瀏覽器API，如isInputPending、scheduler.postTask和scheduler.yield，它們可以幫助大家決定何時以及如何放棄主線程。有關更多詳細的信息，可以去看web.dev上優化長任務的相關文章 ：https://web.dev/optimize-long-tasks/ 。另外，在Google I/O上，還有一個專門關于優化長任務的獨立演講。

去除不必要的 JS

盡管優化我們頁面上的 JavaScript 代碼執行是一個不錯的方法，但更好的方式是一開始就不要發送太大的JavaScript。

現在的網站上加載的JavaScript越來越大了，但我們需要重新檢查一下有這些JavaScript是否都是必要的。

我們可以使用Chrome Devtools的Coverage特性來查看我們的JavaScript有多少被執行了。如果在頁面加載期間沒有使用的大部分JavaScript，都可以考慮進行代碼分離以在需要時或瀏覽器不太繁忙的時候加載這些代碼。

Aurora團隊還開發了一個xjs腳本組件，允許我們加載較少且關鍵的第三方代碼，并采用各種策略來減少這些腳本的影響。標簽管理器是另一個容易積累舊JavaScript代碼的地方，這些代碼可能不再需要了。定期檢查我們的標簽，以確保刪除所有標簽，因為即使它們不再觸發，它們仍然需要下載、解析和編譯。

避免大型渲染更新

改善響應性的最后一個建議是避免大型渲染更新。JavaScript不是唯一可以影響我們網站響應性的東西，如果瀏覽器需要大量的工作來將頁面渲染到屏幕上，那么瀏覽器本身也可能會變慢。大型渲染更新可能會在有大量Dom更改時發生，無論是有意還是由于一個更改導致許多其他元素需要重新計算。避免大型渲染更新的最佳方法是保持較小的Dom結構，以便即使存在關聯效應，也可以快速處理它們。

我們還有一個Lighthouse審計工具來幫助大家實現這一目標。

CSS containment是另一種分離網頁區域的方法，它可以告訴瀏覽器某些區域中的元素可以不受其他區域更改的影響，從而減少布局的工作。

content-visibility是CSS containment的一種擴展能力，允許我們能完全跳過離屏內容的布局和渲染。

最后，大家應該避免濫用requestAnimationFrame API，它應應該只用于關鍵的渲染工作，如果通過這個API安排了過多的工作，它會導致渲染變慢。

這些就是我們認為大家首先應考慮的九個改善網站核心性能指標的優化建議。這并不是一個明確的列表，而是我們的研究表明可以真正提高大家網站性能的幾個更有影響力的選項。包括Chrome Devtools、Lighthouse和我們添加到JavaScript框架和平臺中的組件，許多這些建議已經涵蓋在我們的各種工具中。但我們并沒有放松警惕，并且也在一直更新我們的工具和文檔，來呈現這些關鍵建議。

關鍵詞：