整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
現(xiàn)效果—視頻鏈接：
前端css學(xué)習(xí)：實(shí)現(xiàn)圖片動(dòng)畫剪輯的一些簡單的效果
https://www.ixigua.com/i7008117700752835104/
我們經(jīng)常使用 Chrome Dev Tools 來開發(fā)調(diào)試，但是很少知道怎么利用它來分析頁面性能，這篇文章，我將詳細(xì)說明怎樣利用 Chrome Dev Tools 進(jìn)行頁面性能分析及性能報(bào)告數(shù)據(jù)如何解讀。
上圖是 Chrome Dev Tools 的一個(gè)截圖，其中，我認(rèn)為能用于進(jìn)行頁面性能快速分析的主要是圖中圈出來的幾個(gè)模塊功能，這里簡單介紹一下：
首先，我們?cè)诜治龅臅r(shí)候，建議使用隱身模式打開頁面，排除一些插件等因素對(duì)頁面性能情況的影響。然后，我們把頁面緩存勾選去掉，要測(cè) disable cache 的情況，再把網(wǎng)絡(luò)情況調(diào)整一下，我們用電腦打開頁面的時(shí)候一般都連著 wifi 等，要更真實(shí)一些去測(cè)頁面的性能，還是把網(wǎng)絡(luò)調(diào)到 3G 等情況比較好，如圖：
調(diào)整好之后，我們切到 Performance 面板，這里先說明一下一些按鈕的作用：
上圖，從左到右分別代表的是：
這里，我以京東的一個(gè)頁面為例,勾選 disable cache,網(wǎng)絡(luò)情況為 Fast 3G，來說明一下，應(yīng)該如何理解性能結(jié)果，找出優(yōu)化點(diǎn)。
我們來看看網(wǎng)絡(luò)面板，看看都有哪些信息。如下圖所示：
從圖中可以看出，頁面中有的一些性能優(yōu)化手段有：
而從圖片，個(gè)人認(rèn)為，還可以考慮用上的一些性能優(yōu)化手段有：
切到 Performance 面板，點(diǎn)擊自動(dòng)重啟頁面，并記錄整個(gè)頁面加載的過程，然后來分析結(jié)果～?
性能面板，有很多很多的參數(shù)，我們要看一些比較常見的。首先看白屏?xí)r間和網(wǎng)絡(luò)加載情況，如下圖：
上圖，我們可以看幾點(diǎn)信息：
另外，我們可以看一下資源加載有沒有空白期，雖然上圖沒有，但是如果資源加載之間存在空白期，說明沒有充分利用資源加載的空閑時(shí)間，可以調(diào)整一下。
火焰圖，主要在 Main 面板中，是我們分析具體函數(shù)耗時(shí)最常看的面板，我們來看一下，如圖：
首先，面板中會(huì)有很多的 Task，如果是耗時(shí)長的 Task，其右上角會(huì)標(biāo)紅(圖中沒有，說明頁面首屏的邏輯處理分配得還不錯(cuò))，這個(gè)時(shí)候，我們可以選中標(biāo)紅的 Task (這里就隨手選中一個(gè))，然后放大(選中，滑動(dòng)鼠標(biāo)可放大)，看其具體的耗時(shí)點(diǎn)。
放大后，這里可以看到都在做哪些操作，哪些函數(shù)耗時(shí)了多少,這里代碼有壓縮，看到的是壓縮后的函數(shù)名。然后我們點(diǎn)擊一下某個(gè)函數(shù)，在面板最下面，就會(huì)出現(xiàn)代碼的信息，是哪個(gè)函數(shù)，耗時(shí)多少，在哪個(gè)文件上的第幾行等。這樣我們就很方便地定位到耗時(shí)函數(shù)了。
還可以橫向切換 tab ，看它的調(diào)用棧等情況，更方便地找到對(duì)應(yīng)代碼。具體大家可以試試～
在 Timings 的區(qū)域，我們可以看到本次加載的一些關(guān)鍵時(shí)間，分別有：
我們可以選區(qū)(選擇從白屏到有內(nèi)容的區(qū)域，代表本次的頁面加載過程)，可以對(duì)照著看一下上面的時(shí)間，截圖如下：
另外，我們可以看到頁面中的內(nèi)存使用的情況，比如 JS Heap(堆)，如果曲線一直在增長，則說明存在內(nèi)存泄露，從圖中可以看出，相當(dāng)長的一段時(shí)間，內(nèi)存曲線都是沒有下降的，這里是有發(fā)生內(nèi)存泄露的可能的，在 Onload 之后，內(nèi)存才得到釋放。更多內(nèi)存泄露產(chǎn)生的原因及分析方法，可以參照我的這篇文章《Chrome 瀏覽器垃圾回收機(jī)制與內(nèi)存泄漏分析》
最下方就是頁面的一個(gè)整理耗時(shí)概況，如果 Scripting 時(shí)間過長，則說明 js執(zhí)行的邏輯太多，可以考慮優(yōu)化js，如果渲染時(shí)間過長，則考慮優(yōu)化渲染過程，如果空閑時(shí)間過多，則可以考慮充分利用起來，比如把一些上報(bào)操作放到頁面空閑時(shí)間再上報(bào)等。
以上就是性能面板可以看的一些信息。另外，我們可以借助 Layers面板來查看頁面分層情況的3D視圖，Rendering面板(點(diǎn)擊more tools->Rendering即可打開)，勾選Layer Bordersk可以看到復(fù)合層、RenderLayer區(qū)域，可以幫助分析動(dòng)畫卡頓、是否開啟GPU加速等問題，而 Memory 面板 和 JavaScript Profiler 面板主要是分析內(nèi)存泄露的，這里就不說了，可以看我另一篇文章《Chrome 瀏覽器垃圾回收機(jī)制與內(nèi)存泄漏分析》
Audits 其實(shí)就是 LightHouse，LightHouse 是Google開源的一個(gè)自動(dòng)化測(cè)試工具，它通過一系列的規(guī)則來對(duì)網(wǎng)頁進(jìn)行評(píng)估分析，最終給出一份評(píng)估報(bào)告。它的面板是這樣的：
Audits主要從5個(gè)方面來給網(wǎng)頁打分，當(dāng)然你也可以去掉某些方面的評(píng)估。在選擇了設(shè)備、評(píng)估方面、網(wǎng)絡(luò)情況等選項(xiàng)后，點(diǎn)擊 Run Audits ,我們將會(huì)得到一份報(bào)告。
上圖是一個(gè)總體報(bào)告，可以看出，這個(gè)頁面的性能不太合格。當(dāng)然一次的測(cè)試也說明不了什么問題，只能做個(gè)參考。我們看它的性能指標(biāo)分別有：
這些時(shí)間，都可以點(diǎn)擊圖中紅框切換展示方式，會(huì)附上對(duì)應(yīng)的時(shí)間解釋，然后可以點(diǎn)擊 Learn more 來查看詳細(xì)的指標(biāo)介紹。在文檔中，每一項(xiàng)指標(biāo)都會(huì)明確的分為三個(gè)部分：為什么說此審查非常重要；如何通過此審查；如何實(shí)現(xiàn)此審查；
性能建議主要分為3類， Opportunities 可優(yōu)化項(xiàng)、手動(dòng)診斷項(xiàng)、通過的審查項(xiàng)。本次的例子如下圖：
圖中的每一項(xiàng)都可以展開來看明細(xì)解釋，其中：
可優(yōu)化項(xiàng)有2個(gè)建議：
這項(xiàng)里面的內(nèi)容指的是LightHouse發(fā)現(xiàn)的一些可以直接優(yōu)化的點(diǎn)，你可以對(duì)應(yīng)這些點(diǎn)來進(jìn)行優(yōu)化。
手動(dòng)診斷項(xiàng)有6個(gè)建議：
這些項(xiàng)目表示LightHouse并不能替你決定當(dāng)前是好是壞，但是把詳情列出來，由你手動(dòng)排查每個(gè)項(xiàng)目的情況
通過的審查項(xiàng)
這里列出的都是做的好的地方，本文例子共有16條，不過即使做的好，依然值得我們進(jìn)去仔細(xì)看一下，因?yàn)橄袼袟l目一樣，這里的每個(gè)條目也有一個(gè)showmore，我們可以點(diǎn)進(jìn)去仔細(xì)學(xué)習(xí)背后的知識(shí)和原理！
輔助功能指的是那些可能超出"普通"用戶范圍之外的用戶的體驗(yàn)，他們以不同于你期望的方式訪問你的網(wǎng)頁或進(jìn)行交互，本文的例子建議如下圖：
輔助功能類別測(cè)試屏幕閱讀器的能力和其他輔助技術(shù)是否能在頁面中正常工作。例如：按元素來使用屬性，標(biāo)簽使用是否規(guī)范，img 標(biāo)簽是否缺少 alt 屬性，可辨別的元素命名等等。這一項(xiàng)我們不展開講，但是還是建議大家按照審計(jì)建議修改一下網(wǎng)頁。
其他幾項(xiàng)，本文的例子最佳實(shí)踐評(píng)分挺高的，而例子不支持PWA，也不需要考慮SEO，這里就不展開說明了，有對(duì)應(yīng)需求的可以自己詳細(xì)看看即可。
最后總結(jié)一下，我們利用Chrome Dev Tools 進(jìn)行頁面性能分析有以下指標(biāo)可以參考：
而這些分析方法，本文都詳細(xì)寫了。可以認(rèn)真看看～
Chrome Devtools 高級(jí)調(diào)試指南（新）
提升Chrome使用效率的 30個(gè)快捷鍵、16個(gè)擴(kuò)展插件與11個(gè)前端調(diào)試
網(wǎng)站優(yōu)化中，實(shí)施良好的SEO戰(zhàn)略并不僅僅是關(guān)鍵詞的使用和內(nèi)鏈結(jié)構(gòu)。優(yōu)化一個(gè)小但重要的元素，那就是Alt文本。在本文中，我們將探討什么是Alt文本以及如何使用它來提高SEO。
1. Alt文本是什么？
Alt文本是一個(gè)HTML標(biāo)簽，用于為圖像提供替代文本描述。此文本通常由搜索引擎和屏幕閱讀器等工具使用，以幫助理解圖像內(nèi)容。當(dāng)圖像無法正常加載時(shí)，可以作為圖像的替代品呈現(xiàn)給用戶。
例如，以下是一張兔子的圖片：
<img src="rabbit.jpg" alt="一只兔子">
在這種情況下，Alt文本是“一只兔子”，這將是搜索引擎和屏幕閱讀器將使用的文本。如果圖像無法加載，則Alt文本將替代圖像呈現(xiàn)給用戶。
2. Alt文本如何提高SEO？
Alt文本是搜索引擎算法將圖像與其相關(guān)內(nèi)容進(jìn)行匹配的關(guān)鍵元素之一。搜索引擎使用Alt文本來確定圖像的內(nèi)容，從而更好地了解內(nèi)容并確定其是否與與網(wǎng)頁內(nèi)容相關(guān)。使用相關(guān)的Alt文本可以使圖像更容易在搜索結(jié)果中顯示，這有助于提高網(wǎng)站的SEO。
此外，Alt文本還可以讓無障礙工具（例如屏幕閱讀器）更好地理解圖像內(nèi)容，這可以使網(wǎng)站更易于訪問。這對(duì)那些因殘疾或其他原因無法使用視覺工具的用戶尤其重要。
3. Alt文本的最佳實(shí)踐
以下是Alt文本的最佳實(shí)踐，以確保您獲得最佳的SEO結(jié)果：
- 保持簡短和描述性：您的Alt文本應(yīng)該是簡短而描述性的，以確保搜索引擎和屏幕閱讀器等工具可以輕松理解圖像內(nèi)容。
- 包括關(guān)鍵詞：如果可能，使用與圖像和頁面內(nèi)容相關(guān)的關(guān)鍵詞，這將有助于提高搜索引擎的收錄率。
- 避免張冠李戴：不要使用有誤導(dǎo)性或不準(zhǔn)確的Alt文本，僅因?yàn)樗四胍年P(guān)鍵詞。
- 確保Alt文本在圖像文件名上：使用準(zhǔn)確的圖像名稱，而不是隨機(jī)的序列號(hào)和名稱。這將有助于搜索引擎定位圖像并驗(yàn)證Alt文本是否與其內(nèi)容相關(guān)。
4. 總結(jié)
Alt文本是作為搜索引擎優(yōu)化策略的一個(gè)小元素，但它可以為您的網(wǎng)站帶來重大的影響。確保在網(wǎng)站上使用準(zhǔn)確，簡潔和描述性的Alt文本，以及包括相關(guān)的關(guān)鍵詞，并避免使用有誤導(dǎo)性或不準(zhǔn)確的替代文本。這將幫助您提高SEO，并使您的網(wǎng)站更具可訪問性。
歡迎大家百度搜索“網(wǎng)優(yōu)在線”，進(jìn)入我們的官網(wǎng)，或者直接與我們留言互動(dòng)！
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
