2016-12-25 分類: 網(wǎng)站建設(shè)
一、概要
關(guān)于優(yōu)化工具,我們主要從兩方面說(shuō)起:「性能評(píng)估工具」和「優(yōu)化工具」。
1.性能評(píng)估工具
Lighthouse
PageSpeed
YSlow
2.優(yōu)化工具我們主要依賴「Chrome DevTools」,大致如下:
Network
Performance
Show Third Party Badges
Block Request URL
Coverage
DOM
Rendering
Layer
二、Lighthouse
1.Lighthouse 安裝
Chrome Setting - 更多工具 - 擴(kuò)展程序 - 打開 Chrome 網(wǎng)上應(yīng)用店 - Lighthouse
2.插件 - 生成報(bào)告
報(bào)告是我們的一個(gè)重要參考指標(biāo),這是網(wǎng)站評(píng)估的通用方法。
當(dāng)然,網(wǎng)站也會(huì)有不同的類別,關(guān)注指標(biāo)也不盡相同,后續(xù)我們會(huì)繼續(xù)探討「如何制定合理的網(wǎng)站優(yōu)化性能指標(biāo)」。
3.優(yōu)化建議
Lighthouse 比較人性化的點(diǎn)在于他既提出了問(wèn)題,同時(shí)也提出了解決建議。
三、PageSpeed
1.使用 PageSpeed
2.分析報(bào)告
四、Chrome DevTools - Network
1.關(guān)于 Network 我們重點(diǎn)關(guān)注標(biāo)注的 3 處
2.Timing 也是優(yōu)化不可缺少的工具:
補(bǔ)充說(shuō)明一下:TTFB:等待初始響應(yīng)所用的時(shí)間,也稱為第一字節(jié)的時(shí)間,這是我們判斷服務(wù)器以及網(wǎng)絡(luò)狀況的重要指標(biāo)。
此時(shí)間將捕捉到服務(wù)器往返的延遲時(shí)間,以及等待服務(wù)器傳送響應(yīng)所用的時(shí)間。
五、Chrome DevTools - Performance
1.概覽
2.版面主要由 4 部分構(gòu)成
控制面板:錄制,清除,配置記錄期間需要捕獲的信息
Overview:頁(yè)面性能的高級(jí)匯總,以及頁(yè)面加載情況
火焰圖:CPU 堆疊追蹤的可視化
總覽:餅圖記錄各部分耗時(shí)情況
3.Overview 詳解
FPS每秒幀數(shù)。綠色豎線越高,F(xiàn)PS 越高。FPS 圖表上的紅色塊表示長(zhǎng)時(shí)間幀,很可能會(huì)出現(xiàn)卡頓。
CPUCPU 資源。此面積圖指示消耗 CPU 資源的事件類型。
NET每條彩色橫杠表示一種資源。橫杠越長(zhǎng),檢索資源所需的時(shí)間越長(zhǎng)。每個(gè)橫杠的淺色部分表示等待時(shí)間(從請(qǐng)求資源到第一個(gè)字節(jié)下載完成的時(shí)間)。深色部分表示傳輸時(shí)間(下載第一個(gè)和最后一個(gè)字節(jié)之間的時(shí)間)。
需要特別注意,Performance 工具中的每一種顏色其實(shí)都有自己的含義。
HTML 文件為藍(lán)色。
腳本為黃色。
樣式表為紫色。
媒體文件為綠色。
其他資源為灰色。
小技巧:
使用無(wú)痕模式,減少 Chrome 擴(kuò)展程序會(huì)給應(yīng)用的干擾。
4.火焰圖
NetworkNetwork 這里我們可以看出來(lái),我們資源加載的一個(gè)順序情況。什么時(shí)間加載了什么資源,通過(guò)這些,我們更直觀的知道資源是否并行加載。
Frames上文提及到的頁(yè)面幀情況。
Interactions
Timings 中如下 5 個(gè)指標(biāo)是我們優(yōu)化的方向
First Paint
DOMContentLoaded Event
Onload Event
First Contentful Paint
First Meaningful Paint
Main:展示了主線程運(yùn)行狀況。X 軸代表著時(shí)間,每個(gè)長(zhǎng)條代表著一個(gè) event。長(zhǎng)條越長(zhǎng)就代表這個(gè) event 花費(fèi)的時(shí)間越長(zhǎng)。Y 軸代表了調(diào)用棧 call stack 。
在棧里,上面的 event 調(diào)用了下面的 event。
JS Heap
JavaScript 運(yùn)行過(guò)程中的大部分?jǐn)?shù)據(jù)都保存在堆 Heap 中,所以 JavaScript 性能分析另一個(gè)比較重要的方面是內(nèi)存,也就是堆的分析。
打開 Performance 監(jiān)視器
六、Chrome DevTools - Show Third Party Badges
很多情況下,并不是我們網(wǎng)站本身的問(wèn)題,有可能你使用的三方資源拖累了站點(diǎn)性能。所以,我們需要使用 Show Third Party Badges 來(lái)進(jìn)行排查。
1.測(cè)試站點(diǎn):https://techcrunch.com/
2.打開控制面板:Command + Shift + P
3.打開 Network,注意資源前面的彩色標(biāo)志
三方資源都被標(biāo)記出來(lái)了,移除或者替換那些影響性能的東西。
七、Chrome DevTools - Block Request URL
對(duì)于項(xiàng)目中不確定是否有用的資源,我們可以使用 Block Request URL 來(lái)排除。
1.選中資源 - 右鍵 - Block Request URL
阻止某些資源加載,控制變量法來(lái)排查頁(yè)面性能問(wèn)題。
八、Chrome DevTools - Coverage
1.打開控制面板:Command + Shift + P
2.輸入:Show Coverage
3.找到相應(yīng)的文件,可以看到文件左側(cè)已經(jīng)標(biāo)記出了部分代碼的使用情況
解決思路也很簡(jiǎn)單:盡可能去通過(guò) Webpack 來(lái)拆包,控制大小在 40KB 以下,移除那些未使用代碼。
九、Chrome DevTools - DOM
我們經(jīng)常提到要優(yōu)化 Dom,那么節(jié)點(diǎn)控制在什么范圍才合理呢?
總共少于 1500 個(gè)節(jié)點(diǎn)
大深度為 32 個(gè)節(jié)點(diǎn)
不要存在子節(jié)點(diǎn)超過(guò) 60 個(gè)節(jié)點(diǎn)的父節(jié)點(diǎn)
查看所有 DOM 節(jié)點(diǎn)數(shù):
document.querySelectorAll('*').length
查看子元素個(gè)數(shù):
document.querySelectorAll('body 、 *').length
通常,只在需要時(shí)查找創(chuàng)建 DOM 節(jié)點(diǎn)的方法,并在不再需要時(shí)銷毀它們。
十、Chrome DevTools - Rendering
關(guān)于重渲對(duì)頁(yè)面的影響,我們就不多說(shuō)了。那么如何知道頁(yè)面的渲染過(guò)程呢?我們可以通過(guò) Rendering 來(lái)可視化查看。
1.打開 Rendering 選項(xiàng)
2.刷新頁(yè)面
綠色區(qū)域越重,說(shuō)明重復(fù)渲染的次數(shù)越多,通過(guò)優(yōu)化 DOM 來(lái)減少無(wú)效渲染。
十一、Chrome DevTools - Layer
你可能會(huì)很好奇,為什么要查看圖層?
這是因?yàn)?,我們?jīng)常會(huì)在不知不覺(jué)的情況下搞亂了圖層關(guān)系,或者增加了不合適的圖層。
1.打開控制面板:Command + Shift + P2.選擇 Layer 選項(xiàng)
是不是圖層問(wèn)題就清清楚楚的擺在眼前了~
十二、總結(jié)
通過(guò)優(yōu)化工具,我們可以輕而易舉的對(duì)網(wǎng)站進(jìn)行定位分析。之后就可以快速展開優(yōu)化,讓網(wǎng)站高性能的運(yùn)轉(zhuǎn)起來(lái)。優(yōu)化,也不過(guò)如此。
新聞標(biāo)題:網(wǎng)站優(yōu)化,需要用到哪些工具?
URL網(wǎng)址:http://m.rwnh.cn/news/73107.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供小程序開發(fā)、品牌網(wǎng)站制作、網(wǎng)站建設(shè)、軟件開發(fā)、商城網(wǎng)站、網(wǎng)站改版
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容