国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

我們經(jīng)常使用 Chrome Dev Tools 來(lái)開(kāi)發(fā)調(diào)試，但是很少知道怎么利用它來(lái)分析頁(yè)面性能，這篇文章，我將詳細(xì)說(shuō)明怎樣利用 Chrome Dev Tools 進(jìn)行頁(yè)面性能分析及性能報(bào)告數(shù)據(jù)如何解讀。如果你認(rèn)真看了本文，一定能學(xué)會(huì)分析，沒(méi)學(xué)會(huì)，你來(lái)找我～

上圖是 Chrome Dev Tools 的一個(gè)截圖，其中，我認(rèn)為能用于進(jìn)行頁(yè)面性能快速分析的主要是圖中圈出來(lái)的幾個(gè)模塊功能，這里簡(jiǎn)單介紹一下：

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

首先，我們?cè)诜治龅臅r(shí)候，建議使用隱身模式打開(kāi)頁(yè)面，排除一些插件等因素對(duì)頁(yè)面性能情況的影響。然后，我們把頁(yè)面緩存勾選去掉，要測(cè) disable cache 的情況，再把網(wǎng)絡(luò)情況調(diào)整一下，我們用電腦打開(kāi)頁(yè)面的時(shí)候一般都連著 wifi 等，要更真實(shí)一些去測(cè)頁(yè)面的性能，還是把網(wǎng)絡(luò)調(diào)到 3G 等情況比較好，如圖：

調(diào)整好之后，我們切到 Performance 面板，這里先說(shuō)明一下一些按鈕的作用：

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

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

這里，我以京東的一個(gè)頁(yè)面為例,勾選 disable cache,網(wǎng)絡(luò)情況為 Fast 3G，點(diǎn)擊2，然后就結(jié)果來(lái)說(shuō)明一下，應(yīng)該如何理解性能結(jié)果，找出優(yōu)化點(diǎn)。

我們先來(lái)看看網(wǎng)絡(luò)面板，看看都有哪些信息。如下圖所示：

1. 頁(yè)面直出，輸入https://wq.jd.com/wxportal/index_v6 ,頁(yè)面加載回來(lái)的 document 就是一個(gè)渲染好的 html 頁(yè)面
2. 圖片優(yōu)化，部署在不同的CDN域名下，用webp/dpg等格式圖片，圖片切割等
3. http 協(xié)議有部分采用 http2，多路復(fù)用，加快資源加載
4. 小 logo 使用base42來(lái)處理
5. 按需加載，菜單先加載第一屏的圖標(biāo)，滑動(dòng)到第二屏?xí)r再加載第二屏的圖標(biāo)

而個(gè)人認(rèn)為，還可以考慮用上的一些性能優(yōu)化手段有：

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

網(wǎng)絡(luò)&&白屏

性能面板，有很多很多的參數(shù)，我們要看一些比較常見(jiàn)的。首先看白屏?xí)r間和網(wǎng)絡(luò)加載情況，如下圖：

1. 本次頁(yè)面加載的白屏?xí)r間約為 1000 ms
2. FPS 曲線沒(méi)有標(biāo)紅，如果有很多標(biāo)紅的則說(shuō)明頁(yè)面存在渲染卡頓多的地方
3. 從網(wǎng)絡(luò)資源加載情況來(lái)看，圖片沒(méi)有啟用 http2，因此每次可以同時(shí)加載的圖片數(shù)有限，未被加載的圖片有等待過(guò)程
4. 資源的加載時(shí)間也可以看到，比如輪播的背景圖加載了近 700 毫秒，時(shí)間有點(diǎn)長(zhǎng)

另外，我們可以看一下資源加載有沒(méi)有空白期，雖然上圖沒(méi)有，但是如果資源加載之間存在空白期，說(shuō)明沒(méi)有充分利用資源加載的空閑時(shí)間，可以調(diào)整一下。

火焰圖

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

時(shí)間線&&內(nèi)存情況

在 Timings 的區(qū)域，我們可以看到本次加載的一些關(guān)鍵時(shí)間，分別有：

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

我們可以選區(qū)(選擇從白屏到有內(nèi)容的區(qū)域，代表本次的頁(yè)面加載過(guò)程)，可以對(duì)照著看一下上面的時(shí)間，截圖如下：

Audits 其實(shí)就是 LightHouse，LightHouse 是Google開(kāi)源的一個(gè)自動(dòng)化測(cè)試工具，它通過(guò)一系列的規(guī)則來(lái)對(duì)網(wǎng)頁(yè)進(jìn)行評(píng)估分析，最終給出一份評(píng)估報(bào)告。它的面板是這樣的：

整體情況

Audits主要從5個(gè)方面來(lái)給網(wǎng)頁(yè)打分，當(dāng)然你也可以去掉某些方面的評(píng)估。在選擇了設(shè)備、評(píng)估方面、網(wǎng)絡(luò)情況等選項(xiàng)后，點(diǎn)擊 Run Audits ,我們將會(huì)得到一份報(bào)告。

上圖是一個(gè)總體報(bào)告，可以看出，這個(gè)頁(yè)面的性能不太合格。當(dāng)然一次的測(cè)試也說(shuō)明不了什么問(wèn)題，只能做個(gè)參考。我們看它的性能指標(biāo)分別有：

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

這些時(shí)間，都可以點(diǎn)擊圖中紅框切換展示方式，會(huì)附上對(duì)應(yīng)的時(shí)間解釋?zhuān)缓罂梢渣c(diǎn)擊 Learn more 來(lái)查看詳細(xì)的指標(biāo)介紹。在文檔中，每一項(xiàng)指標(biāo)都會(huì)明確的分為三個(gè)部分：為什么說(shuō)此審查非常重要；如何通過(guò)此審查；如何實(shí)現(xiàn)此審查；

性能指標(biāo)優(yōu)化建議解讀

性能建議主要分為3類(lèi)， Opportunities 可優(yōu)化項(xiàng)、手動(dòng)診斷項(xiàng)、通過(guò)的審查項(xiàng)。本次的例子如下圖：

圖中的每一項(xiàng)都可以展開(kāi)來(lái)看明細(xì)解釋?zhuān)渲校?/p>

可優(yōu)化項(xiàng)有2個(gè)建議：

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

這項(xiàng)里面的內(nèi)容指的是LightHouse發(fā)現(xiàn)的一些可以直接優(yōu)化的點(diǎn)，你可以對(duì)應(yīng)這些點(diǎn)來(lái)進(jìn)行優(yōu)化。

手動(dòng)診斷項(xiàng)有6個(gè)建議：

1. 最小化主線程工作
2. 減少JavaScript執(zhí)行時(shí)間
3. 避免DOM太大
4. 通過(guò)有效的緩存策略緩存一些靜態(tài)資源
5. 避免鏈接關(guān)鍵請(qǐng)求
6. 保持低請(qǐng)求數(shù)量和小傳輸大小

這些項(xiàng)目表示LightHouse并不能替你決定當(dāng)前是好是壞，但是把詳情列出來(lái)，由你手動(dòng)排查每個(gè)項(xiàng)目的情況

通過(guò)的審查項(xiàng)

這里列出的都是做的好的地方，本文例子共有16條，不過(guò)即使做的好，依然值得我們進(jìn)去仔細(xì)看一下，因?yàn)橄袼袟l目一樣，這里的每個(gè)條目也有一個(gè)showmore，我們可以點(diǎn)進(jìn)去仔細(xì)學(xué)習(xí)背后的知識(shí)和原理！

Accessibility輔助功能

輔助功能指的是那些可能超出'普通'用戶(hù)范圍之外的用戶(hù)的體驗(yàn)，他們以不同于你期望的方式訪問(wèn)你的網(wǎng)頁(yè)或進(jìn)行交互，本文的例子建議如下圖：

輔助功能類(lèi)別測(cè)試屏幕閱讀器的能力和其他輔助技術(shù)是否能在頁(yè)面中正常工作。例如：按元素來(lái)使用屬性，標(biāo)簽使用是否規(guī)范，img 標(biāo)簽是否缺少 alt 屬性，可辨別的元素命名等等。這一項(xiàng)我們不展開(kāi)講，但是還是建議大家按照審計(jì)建議修改一下網(wǎng)頁(yè)。

其他幾項(xiàng)，本文的例子最佳實(shí)踐評(píng)分挺高的，而例子不支持PWA，也不需要考慮SEO，這里就不展開(kāi)說(shuō)明了，有對(duì)應(yīng)需求的可以自己詳細(xì)看看即可。

最后總結(jié)一下，我們利用Chrome Dev Tools 進(jìn)行頁(yè)面性能分析有以下指標(biāo)可以參考：

• 從網(wǎng)絡(luò)面板分析
• 從性能面板分析
• 從Memory面板等分析內(nèi)存泄露
• 用Audits工具分析

而這些分析方法，本文都詳細(xì)寫(xiě)了?？梢哉J(rèn)真看看～