現效果—視頻鏈接：

前端css學習：實現圖片動畫剪輯的一些簡單的效果

https://www.ixigua.com/i7008117700752835104/

景

我們經常使用 Chrome Dev Tools 來開發調試，但是很少知道怎么利用它來分析頁面性能，這篇文章，我將詳細說明怎樣利用 Chrome Dev Tools 進行頁面性能分析及性能報告數據如何解讀。

分析面板介紹

上圖是 Chrome Dev Tools 的一個截圖，其中，我認為能用于進行頁面性能快速分析的主要是圖中圈出來的幾個模塊功能，這里簡單介紹一下：

• Network : 頁面中各種資源請求的情況，這里能看到資源的名稱、狀態、使用的協議(http1/http2/quic...)、資源類型、資源大小、資源時間線等情況
• Performance : 頁面各項性能指標的火焰圖，這里能看到白屏時間、FPS、資源加載時間線、longtask、內存變化曲線等等信息
• Memory : 可以記錄某個時刻的頁面內存情況，一般用于分析內存泄露
• JavaScript Profiler : 可以記錄函數的耗時情況，方便找出耗時較多的函數
• Layers : 展示頁面中的分層情況

分析步驟說明

首先，我們在分析的時候，建議使用隱身模式打開頁面，排除一些插件等因素對頁面性能情況的影響。然后，我們把頁面緩存勾選去掉，要測 disable cache 的情況，再把網絡情況調整一下，我們用電腦打開頁面的時候一般都連著 wifi 等，要更真實一些去測頁面的性能，還是把網絡調到 3G 等情況比較好，如圖：

調整好之后，我們切到 Performance 面板，這里先說明一下一些按鈕的作用：

上圖，從左到右分別代表的是：

1. 手動開始記錄，開始后需要手動結束
2. 自動重啟頁面，并記錄整個頁面加載的過程。這個是最常用的，一般大概分析頁面性能的時候都是點這個就夠了
3. 清除性能錄制的記錄
4. 上傳頁面性能錄制的數據
5. 下載頁面性能錄制的數據
6. 選擇要展示的性能記錄。你可能進行了多次分析，這里可以切換去看每次的結果
7. 是否捕捉頁面加載過程的截圖，這個一般都要勾選
8. 是否記錄內存變化，這個一般都要勾選
9. 垃圾回收，點擊了即進行一次垃圾回收

這里，我以京東的一個頁面為例,勾選 disable cache,網絡情況為 Fast 3G，來說明一下，應該如何理解性能結果，找出優化點。

從網絡面板分析

我們來看看網絡面板，看看都有哪些信息。如下圖所示：

從圖中可以看出，頁面中有的一些性能優化手段有：

1. 頁面直出，輸入https://wq.jd.com/wxportal/index_v6 ,頁面加載回來的 document 就是一個渲染好的 html 頁面
2. 圖片優化，部署在不同的CDN域名下，用webp/dpg等格式圖片，圖片切割等
3. http 協議有部分采用 http2，多路復用，加快資源加載
4. 小 logo 使用base64來處理
5. 按需加載，菜單先加載第一屏的圖標，滑動到第二屏時再加載第二屏的圖標

而從圖片，個人認為，還可以考慮用上的一些性能優化手段有：

1. html 的大小為138kb,Content Download的時間為七百多毫秒，感覺可以拆分一下頁面，非一二屏的內容分開加載。
2. TTFB(Time To First Byte)為五百多毫秒,在下載第一個字節之前等待的時間過久，不過這里主要是用戶網絡情況影響，可以做的比較少。如DNS解析優化，減少后端服務處理時間等
3. 合并雪碧圖，大輪播圖下面的菜單分類那里的圖標，可以用一張雪碧圖來集合這些圖標
4. 頂部輪播圖，在首次加載時，可以先加載第一幀的圖片，后面幾幀延后一下
5. 圖片較多，可以的話，都用 http2 協議

從性能面板分析

切到 Performance 面板，點擊自動重啟頁面，并記錄整個頁面加載的過程，然后來分析結果～?

網絡&&白屏

性能面板，有很多很多的參數，我們要看一些比較常見的。首先看白屏時間和網絡加載情況，如下圖：

上圖，我們可以看幾點信息：

1. 本次頁面加載的白屏時間約為 1000 ms
2. FPS 曲線沒有標紅，如果有很多標紅的則說明頁面存在渲染卡頓多的地方
3. 從網絡資源加載情況來看，圖片沒有啟用 http2，因此每次可以同時加載的圖片數有限，未被加載的圖片有等待過程
4. 資源的加載時間也可以看到，比如輪播的背景圖加載了近 700 毫秒，時間有點長

另外，我們可以看一下資源加載有沒有空白期，雖然上圖沒有，但是如果資源加載之間存在空白期，說明沒有充分利用資源加載的空閑時間，可以調整一下。

火焰圖

火焰圖，主要在 Main 面板中，是我們分析具體函數耗時最?？吹拿姘?，我們來看一下，如圖：

首先，面板中會有很多的 Task，如果是耗時長的 Task，其右上角會標紅(圖中沒有，說明頁面首屏的邏輯處理分配得還不錯)，這個時候，我們可以選中標紅的 Task (這里就隨手選中一個)，然后放大(選中，滑動鼠標可放大)，看其具體的耗時點。

放大后，這里可以看到都在做哪些操作，哪些函數耗時了多少,這里代碼有壓縮，看到的是壓縮后的函數名。然后我們點擊一下某個函數，在面板最下面，就會出現代碼的信息，是哪個函數，耗時多少，在哪個文件上的第幾行等。這樣我們就很方便地定位到耗時函數了。

還可以橫向切換 tab ，看它的調用棧等情況，更方便地找到對應代碼。具體大家可以試試～

時間線&&內存情況

在 Timings 的區域，我們可以看到本次加載的一些關鍵時間，分別有：

• FCP: First Contentful Paint
• LCP: Largest Contentful Paint
• FMP: First Meaningful Paint
• DCL: DOMContentLoaded Event
• L: Onload Event

我們可以選區(選擇從白屏到有內容的區域，代表本次的頁面加載過程)，可以對照著看一下上面的時間，截圖如下：

另外，我們可以看到頁面中的內存使用的情況，比如 JS Heap(堆)，如果曲線一直在增長，則說明存在內存泄露，從圖中可以看出，相當長的一段時間，內存曲線都是沒有下降的，這里是有發生內存泄露的可能的，在 Onload 之后，內存才得到釋放。更多內存泄露產生的原因及分析方法，可以參照我的這篇文章《Chrome 瀏覽器垃圾回收機制與內存泄漏分析》

最下方就是頁面的一個整理耗時概況，如果 Scripting 時間過長，則說明 js執行的邏輯太多，可以考慮優化js，如果渲染時間過長，則考慮優化渲染過程，如果空閑時間過多，則可以考慮充分利用起來，比如把一些上報操作放到頁面空閑時間再上報等。

其他面板

以上就是性能面板可以看的一些信息。另外，我們可以借助 Layers面板來查看頁面分層情況的3D視圖，Rendering面板(點擊more tools->Rendering即可打開)，勾選Layer Bordersk可以看到復合層、RenderLayer區域，可以幫助分析動畫卡頓、是否開啟GPU加速等問題，而 Memory 面板 和 JavaScript Profiler 面板主要是分析內存泄露的，這里就不說了，可以看我另一篇文章《Chrome 瀏覽器垃圾回收機制與內存泄漏分析》

用Audits工具分析

Audits 其實就是 LightHouse，LightHouse 是Google開源的一個自動化測試工具，它通過一系列的規則來對網頁進行評估分析，最終給出一份評估報告。它的面板是這樣的：

整體情況

Audits主要從5個方面來給網頁打分，當然你也可以去掉某些方面的評估。在選擇了設備、評估方面、網絡情況等選項后，點擊 Run Audits ,我們將會得到一份報告。

上圖是一個總體報告，可以看出，這個頁面的性能不太合格。當然一次的測試也說明不了什么問題，只能做個參考。我們看它的性能指標分別有：

• First Contentful Paint：內容首次開始繪制。
• First Meaningful Paint：可以簡單理解為用戶看到網頁主要內容的時間，分數越低，頁面顯示其主要內容的速度就越快。圖中例子，網頁首次有效繪制時間為2.5s。
• Speed Index：速度指標是一個頁面加載性能指標，向你展示明顯填充頁面內容的速度，此指標的分數越低越好。
• First CPU Idle：首次 CPU 空閑時間
• Time to Interactive：可互動時間，頁面中的大多數網絡資源完成加載并且CPU在很長一段時間都很空閑的所需的時間。此時可以預期cpu非?？臻e，可以及時的處理用戶的交互操作。
• Max Potential First Input Delay：最大的輸入延遲時間，輸入響應能力對用戶如何看待你應用的性能起著關鍵作用。應用有 100 毫秒的時間響應用戶輸入。如果超過此時間，用戶就會認為應用反應遲緩。

這些時間，都可以點擊圖中紅框切換展示方式，會附上對應的時間解釋，然后可以點擊 Learn more 來查看詳細的指標介紹。在文檔中，每一項指標都會明確的分為三個部分：為什么說此審查非常重要；如何通過此審查；如何實現此審查；

性能指標優化建議解讀

性能建議主要分為3類， Opportunities 可優化項、手動診斷項、通過的審查項。本次的例子如下圖：

圖中的每一項都可以展開來看明細解釋，其中：

可優化項有2個建議：

1. 延遲會阻塞渲染的資源加載，這里是一個 navfoot.6bf68af7.css
2. 延遲視口外的圖片加載，這里列舉了不必要加載的圖片(和我上文提的優化建議一致，哈哈)

這項里面的內容指的是LightHouse發現的一些可以直接優化的點，你可以對應這些點來進行優化。

手動診斷項有6個建議：

1. 最小化主線程工作
2. 減少JavaScript執行時間
3. 避免DOM太大
4. 通過有效的緩存策略緩存一些靜態資源
5. 避免鏈接關鍵請求
6. 保持低請求數量和小傳輸大小

這些項目表示LightHouse并不能替你決定當前是好是壞，但是把詳情列出來，由你手動排查每個項目的情況

通過的審查項

這里列出的都是做的好的地方，本文例子共有16條，不過即使做的好，依然值得我們進去仔細看一下，因為像所有條目一樣，這里的每個條目也有一個showmore，我們可以點進去仔細學習背后的知識和原理！

Accessibility輔助功能

輔助功能指的是那些可能超出"普通"用戶范圍之外的用戶的體驗，他們以不同于你期望的方式訪問你的網頁或進行交互，本文的例子建議如下圖：

輔助功能類別測試屏幕閱讀器的能力和其他輔助技術是否能在頁面中正常工作。例如：按元素來使用屬性，標簽使用是否規范，img 標簽是否缺少 alt 屬性，可辨別的元素命名等等。這一項我們不展開講，但是還是建議大家按照審計建議修改一下網頁。

其他幾項，本文的例子最佳實踐評分挺高的，而例子不支持PWA，也不需要考慮SEO，這里就不展開說明了，有對應需求的可以自己詳細看看即可。

總結

最后總結一下，我們利用Chrome Dev Tools 進行頁面性能分析有以下指標可以參考：

• 從網絡面板分析
• 從性能面板分析
• 從Memory面板等分析內存泄露
• 用Audits工具分析

而這些分析方法，本文都詳細寫了?？梢哉J真看看～

姊妹篇推薦

Chrome Devtools 高級調試指南（新）

提升Chrome使用效率的 30個快捷鍵、16個擴展插件與11個前端調試

最后

• 歡迎關注「前端Q」,認真學前端，做個有專業的技術人...

網站優化中，實施良好的SEO戰略并不僅僅是關鍵詞的使用和內鏈結構。優化一個小但重要的元素，那就是Alt文本。在本文中，我們將探討什么是Alt文本以及如何使用它來提高SEO。

1. Alt文本是什么？

Alt文本是一個HTML標簽，用于為圖像提供替代文本描述。此文本通常由搜索引擎和屏幕閱讀器等工具使用，以幫助理解圖像內容。當圖像無法正常加載時，可以作為圖像的替代品呈現給用戶。

例如，以下是一張兔子的圖片：

<img src="rabbit.jpg" alt="一只兔子">

在這種情況下，Alt文本是“一只兔子”，這將是搜索引擎和屏幕閱讀器將使用的文本。如果圖像無法加載，則Alt文本將替代圖像呈現給用戶。

2. Alt文本如何提高SEO？

Alt文本是搜索引擎算法將圖像與其相關內容進行匹配的關鍵元素之一。搜索引擎使用Alt文本來確定圖像的內容，從而更好地了解內容并確定其是否與與網頁內容相關。使用相關的Alt文本可以使圖像更容易在搜索結果中顯示，這有助于提高網站的SEO。

此外，Alt文本還可以讓無障礙工具（例如屏幕閱讀器）更好地理解圖像內容，這可以使網站更易于訪問。這對那些因殘疾或其他原因無法使用視覺工具的用戶尤其重要。

3. Alt文本的最佳實踐

以下是Alt文本的最佳實踐，以確保您獲得最佳的SEO結果：

- 保持簡短和描述性：您的Alt文本應該是簡短而描述性的，以確保搜索引擎和屏幕閱讀器等工具可以輕松理解圖像內容。

- 包括關鍵詞：如果可能，使用與圖像和頁面內容相關的關鍵詞，這將有助于提高搜索引擎的收錄率。

- 避免張冠李戴：不要使用有誤導性或不準確的Alt文本，僅因為它包含了您想要的關鍵詞。

- 確保Alt文本在圖像文件名上：使用準確的圖像名稱，而不是隨機的序列號和名稱。這將有助于搜索引擎定位圖像并驗證Alt文本是否與其內容相關。

4. 總結

Alt文本是作為搜索引擎優化策略的一個小元素，但它可以為您的網站帶來重大的影響。確保在網站上使用準確，簡潔和描述性的Alt文本，以及包括相關的關鍵詞，并避免使用有誤導性或不準確的替代文本。這將幫助您提高SEO，并使您的網站更具可訪問性。

歡迎大家百度搜索“網優在線”，進入我們的官網，或者直接與我們留言互動！