Audits和Chrome性能插件
Audits
Audits 其實就是分析當(dāng)前網(wǎng)頁的性能的，比如說雅虎軍規(guī)歇竟，這個東西能夠大致給我們分析出來一些我們做的不好的地方而且能給我們一些解決意見
雅虎軍規(guī)參考網(wǎng)址：https://github.com/creeperyang/blog/issues/1
Audits 面板
performanceTracer -- Chrome 插件
Page Speed -- Chrome 插件
performance.timming
這是代碼形式的一個 API 乱灵，是谷歌提供給我們的在瀏覽器里面我們可以通過網(wǎng)頁去檢測的
上面這個插件光學(xué)是沒什么用的熄捍，得需要先了解瀏覽器的整個的執(zhí)行機制，下圖就是 整個的一個網(wǎng)頁從我們用戶輸入到輸出的時候這之間經(jīng)過的很多的過程崎逃，上面的 performance.timing 很好的捕捉到了這樣的一個節(jié)點丽焊，這個節(jié)點里面我們主要觀察的是 DNS 這一階段精续，就是查找 DNS 之間，然后是 握手的時間粹懒，請求的時間，輸出的時間顷级，還有就是 onload 的時間凫乖，那么中間隔著的 DNS TCP Request Response 這幾個時間是需要我們非常非常關(guān)注的，如果我們是專注于性能開發(fā)的弓颈，這幾個點做的非常漂亮帽芽，那么這樣整個一個網(wǎng)頁的性能是非常高的，所以做網(wǎng)頁性能的時候這幾個點一定要卡住
image.png
1.這里參考的 demo 可移步至前端工程師高級調(diào)試-- 斷點以及捕捉事件綁定進行查看
2.還是先打開 XAMPP 開啟 Apache翔冀，再打開瀏覽器輸入之前 demo 的路徑导街，localhost/debugtest/
image.png
3.之后在右側(cè)的開發(fā)者工具中找到 Audits 面板，之后就可以讓他來幫我們分析一下纤子，接下來點擊下面的 【RUN】 按鈕
image.png
這樣因為我的 demo 比較小搬瑰，所以說他馬上就能分析出結(jié)果來
image.png
上圖的第一個警告是說，我們沒有做瀏覽器的緩存控硼，這個其實做的是比較一般的泽论，如果說想要漂亮一點的就可以下載一個 performanceTracer 這樣的一個東西，它可以將 我們上面說到的 timing 的 API 也就是上面的 【瀏覽器的整個的執(zhí)行機制圖】 里面的東西卡乾，展現(xiàn)的稍微淋漓盡致一點
下面的就是 performanceTracer 執(zhí)行之后的展示效果圖
請求完畢至DOM加載的時間 為 125ms
dom processing dom樹耗時 60ms
image.png
但是如果作為一個專業(yè)的性能開發(fā)人員來講的話 performanceTracer 是遠遠不夠我們進行網(wǎng)頁加載時的性能監(jiān)測用的翼悴，所以一般會裝一個東西叫做 Page Speed，它可以是瀏覽器加載的更快（Make the web faster）
4.下載我在谷歌瀏覽器上裝一個 Page Speed 的插件幔妨，這里是要翻墻才行的喲~ 鹦赎，在應(yīng)用商店搜索pagespeed安裝第一個即可谍椅，下圖是我剛裝過了
image.png
下載完成之后，按照提示點擊安裝古话，安裝之后 在瀏覽器的右上角會多出一個 插件的 icon 來雏吭，如果你瀏覽的是線上的網(wǎng)站的話可以點擊這個 icon 就相當(dāng)于是開啟功能了，它會對當(dāng)前你瀏覽的頁面進行性能的分析煞额，如果是本地的話可以刷新頁面 再打開開發(fā)者工具思恐，這個時候可以在一級菜單中找到 【PageSpeed】 面板
image.png
點擊面板下面顯示的 【START ANALYZING】（開始分析） 按鈕，它就會自動的去分析你當(dāng)前的網(wǎng)頁膊毁，下圖是分析之后自動的將結(jié)果給呈現(xiàn)了出來
image.png
之后我又打開我公司的官網(wǎng)試著分析了一下胀莹，感覺有些慘不忍睹，就覺得這個東西太神奇了婚温，它連怎么優(yōu)化都幫你做到或者是提示了
image.png
5.如果是上面的插件還不夠用的話描焰，這個時候就需要借助一個東西 performance.timing 這個是瀏覽器自帶的 API 可以在控制臺中直接輸出，可以看到所有的值都在下面列出來了
image.png
還有就是下面的這張圖必須得理解了
image.png
所以說現(xiàn)在的大前端面臨的挑戰(zhàn)會越來越多栅螟，你不僅僅要讀網(wǎng)頁的 onload 以及事件處理這一塊荆秦，更多的你還要對整個全局有一個關(guān)注，比如說：這個 DNS 解析了多久力图、這個三次握手 TCP 做了多久等等步绸，這些要生成一個監(jiān)控平臺，所以一般的大型公司或者是比較正規(guī)的性能優(yōu)化的時候一定要有這樣的一個檢測平臺吃媒，這個檢測平臺會幫你分析整個網(wǎng)頁在加載的時候遇到了什么樣的問題瓤介，然后一般的話也會有這個性能的指標，就是說原來的整個網(wǎng)頁加載需要 6 s赘那，現(xiàn)在需要做到加載時間是 1
s 刑桑，那么在這個 1 s 的時間的過程中我們不僅僅要踐行雅虎軍規(guī)，還要針對 WebAPP 或者是 PC 項目做更多的性能的優(yōu)化
6.如果就平時而言就看一下 Audits 或者是 PageSpeed 面板也就可以了
