Audits 和 Chrome 效能外掛程式

2022-09-06 18:33:08 字數 1671 閱讀 7267

audits和chrome效能外掛程式

audits

audits 其實就是分析當前網頁的效能的,比如說雅虎軍規,這個東西能夠大致給我們分析出來一些我們做的不好的地方而且能給我們一些解決意見。

雅虎軍規參考**:

audits 面板

performancetracer -- chrome 外掛程式

page speed -- chrome 外掛程式

performance.timming

這是**形式的乙個 api ,是谷歌提供給我們的在瀏覽器裡面我們可以通過網頁去檢測的

1、先開啟 xampp 開啟 apache,再開啟瀏覽器輸入之前 demo 的路徑,localhost/debugtest/

2、之後在右側的開發者工具中找到 audits 面板,之後就可以讓他來幫我們分析一下,接下來點選下面的 【run】 按鈕。

這樣因為我的 demo 比較小,所以說他馬上就能分析出結果來

下面的就是 performancetracer 執行之後的展示效果圖

請求完畢至dom載入的時間 為 125ms

dom processing dom樹耗時 60ms

但是如果作為乙個專業的效能開發人員來講的話 performancetracer 是遠遠不夠我們進行網頁載入時的效能監測用的,所以一般會裝乙個東西叫做 page speed,它可以是瀏覽器載入的更快(make the web faster)

點選面板下面顯示的 【start analyzing】(開始分析) 按鈕,它就會自動的去分析你當前的網頁,下圖是分析之後自動的將結果給呈現了出來。

之後我又開啟我公司的官網試著分析了一下,感覺還不算是太糟糕,就覺得這個東西太神奇了,它連怎麼優化都幫你做到或者是提示了。

4、如果是上面的外掛程式還不夠用的話,這個時候就需要借助乙個東西 performance.timing 這個是瀏覽器自帶的 api 可以在控制台中直接輸出,可以看到所有的值都在下面列出來了

還有就是下面的這張圖必須得理解了

5、如果就平時而言就看一下 audits 或者是 pagespeed 面板也就可以了

chrome的編譯和配置

life of a chromium developer 1.安裝depot tools工具 gitclone export path path home ubuntu depot tools 配置git賬戶資訊 git config global user.name my name git con...

Chromium和Chrome的區別

1 chromium是谷歌的開源專案,開發者們可以共同去改進它,然後谷歌會收集改進後的chromium並發布改進後安裝包。chrome不是開源專案,谷歌會把chromium的東西更新到chrome中。你也可以這麼理解chromium是體驗版,chrome是正式版 3 chromium功能比chrom...

jQuery在Chrome和Firefox的測試

簡單的乙個測試,頁面有六個div,都非常lite 1 div class box yellow box this is success a id a5 href title diva div 寫了乙個jquery的extend function 1jquery.fn.extend 8 分別進行如下的...