1-3 Chrome Network 認識網路面版工具

Original: https://course.andys.pro/Javascript-Intro/01-3-chrome-network-know-the-web-panel-tool/

講義

1. Network 面板功能

• 用途：監控所有的網路請求 (Requests)，了解網頁載入了哪些檔案 (HTML, CSS, JS, Img 等)。
• 介面操作：
  • 錄製 (Record)：紅燈亮起代表正在記錄網路封包。
  • 過濾 (Filter)：可用漏斗圖示篩選檔案類型 (如 JS, CSS, Img) 或搜尋特定檔名。
  • 瀑布圖 (Waterfall)：圖形化顯示資源載入的先後順序與時間長度。

2. 關於資源載入的優化

• 重複載入問題：應避免重複載入相同的函式庫 (如 jQuery)，這會導致網頁肥大且變慢。建議使用 npm 或套件管理工具來控管版本。
• 檔案大小：
  • 行動網路限制：在 3G/4G 時代，過大的檔案 (如 1.3MB 的 JS) 會導致使用者流失。
  • 壓縮與合併：正式環境應將多個 JS 檔合併 (Bundle) 並壓縮 (Minify)，減少 HTTP 請求次數與傳輸大小。

3. 關鍵數據指標

• Status：HTTP 狀態碼 (200 成功, 404 找不到)。
• Type：檔案類型 (Script, Stylesheet, Image…)。
• Size：檔案大小 (Resource Size vs Transfer Size)。
• Time：載入耗時。
• DOMContentLoaded：HTML 文件解析完成的時間 (網頁骨架已呈現)。

影片逐字稿largev2

我們來講Network面板這邊我們來認識一下網路面板可以做什麼事情還有裡面的訊息首先呢前面第一個有一個錄影鍵再來是有一些比如說像一個load這個load就是你可以去篩選你要哪些東西或是你要搜尋什麼樣的內容那這邊有一個時間軸還有下面的一些網頁載入的東西那我們這邊放大來看的話你會發現其實這份code是不是有一點問題呢原因在哪裡他的jquery是不是載入了兩次了呢這個是不是重複的那這個就是會回到一個問題就是說如果我們沒有這我可以簡單提一下以後都會希望大家用版本套件版本套件的話就是載入jquery有點像npm就是node的一個package然後就直接裝jquery然後他就會確保他只有一份那如果是我們用head裡面去加jquery或是加插件的情況下有的時候你不知道你的插件會不會再抓另外一份jquery起來那就是你如果都是用很多不同的套件這樣累積累積累積那這時候你的那個時間軸裡面會載的東西就會很大一串當很大一串的時候你的網頁就會覺得我的網頁想要做得漂亮可是又跑不快原因就是因為可能很多的插件配在一起你的網頁就會變得很肥大就會有這樣的問題還有另外一個問題你看這邊1.3MB那現在不太會是問題了啦就是以前2012年那時候行動裝置因為那時候還在3G轉4G的年代有點老那時候呢你1.3MB就會被你的使用者不想開你的網頁就說你這什麼服務比如說你可能開現在很有名的Dcard比如說Dcard跟無名小站如果無名小站弄了一個1.3MB的或是Dcard弄了一個1.3MB的你就去看無名小站就是這麼現實除非是很漂亮的美圖不然大家不會等好就是這樣所以漏的檔案很重要除非是重要的才拉大檔案不然不要拉大的檔案檔案就是盡量不要重複然後小那這件事情反正現在我們剛開始學就先把它畫出來可是之後這邊會是重點喔就是你如果遇到了這些瓶頸的情況下前面都不會出問題那再來我們來看這邊是一個紀錄Log你按了以後比如說這個網站也是一樣就是我們到Network然後我們可以看比如說它是紅燈的亮著裡面沒有任何東西我重新按像錄影一樣然後我重整它然後就會看到它把好多東西出來這邊拉一堆一個一個一個就是很可怕的一個過程好那我們先把它暫停那這邊我會看到說這個Waterfall然後這邊基本上因為它們都是變異過所以都會是亂碼一樣的看一下有沒有什麼東西可以看得懂Dropping這個P這應該是我的QR Code吧這是我的QR Code它這邊就開始載一些裡面的內容比如說這張圖那這個它的做法其實它第一份就已經把這個載起來了那載起來以後它後面才會去慢慢去載就是才會去載比如說像這個的一些連結它的一些推薦的圖這樣子好那剛剛有同學遇到一個問題就是說老師為什麼我的我為什麼看不到任何東西就是在這裡說我為什麼看不到任何東西原因是因為大家有沒有看到這個這個河流圖你是可以拖拉的你是可以看你想要看哪一段時間發生了什麼事情所以你可以去選就是選你要看到哪邊這整段可以去選這樣子可以去看我要看最前面還是我要看最後面那我要看的時間長短這樣子那我們來看它要講什麼過濾的話我們這邊要過濾什麼呢這邊可以先把它拉起來這網站太複雜有點難講過濾它打開了以後我今天如果只想要看JS有沒有我這邊只會抓到JavaScript就每一份的JavaScript那我想要只看CSS它就會告訴我這邊都是CSS這邊都是每一份每一份都是CSS有沒有那我想要看它的Image我想看圖它這邊就全部都是給我圖所以你可以去篩你今天想要看的是什麼你現在想要看的是它的Manifest它沒有Manifest就可以一份一份去看這個是Doc還有Image就圖啊CSS JS就可以去把你要看的東西調出來所以很多時候你其實可以去撈就是比如說你今天看到別人網站都很漂亮但它裡面有什麼東西或是它是用什麼寫的雖然有時候不太容易看因為它把它編譯成像這樣就有時候很難看可是你還是可以看到按下去就是按就是它的Event然後它做了什麼事情那雖然現在像義大利麵一樣很難看慢慢去學會慢慢看懂大概就知道有蕃茄有麵條逆向就可以把義大利麵做出來好那搜尋呢搜尋比如說應該現在網站都很少會用JQuery有有這麼多2013年所以你就可以在這裡面搜就是裡面就大型網站裡面什麼都有很可怕好所以它裡面有JQuery好你看這邊喔大家有沒有看到這個這一份我們就可以看到說這個其實是我剛剛的我其中一個範例的拉的JQuery它後面有寫嘛TXS好那這邊是還有那這我前面剛才講過了嘛它的這份名稱檔案的名稱然後再來是200是說成功404是找不到那它的型態我們可以看一下這邊的型態先把search關掉好型態這邊就會寫font那這邊有一個重點喔好Javascript它其實簡稱叫做script所以這邊會顯示的type是script大家記一下這個script記一下就是把它畫起來好然後發起人是誰initializer那這邊這個都是Dropbox給的嘛這都是它發起的都是Dropbox這份檔案給的然後再來這個是image發起人是image發起人我們看一下還有沒有什麼其他的東西這邊有一個是firebase發起的firebase是一個Google的一個即時資料庫的一個服務即時資料庫的一個服務好這邊有firebase就是它發起人有誰那像這個colpane它有寫other這other就是因為它是這份檔案裡面我放的嘛所以它就會寫other然後size你會看到這邊各式各樣東西的大小然後大部分都是幾kb比較大的我在猜應該都是圖吧圖其實也都沒有很大都幾k而已好js我看一下對啊這控制的都很好都幾k而已只是說因為它的檔案多所以它載入時間就會久有時候如果寫到月後面你就會發現說其實有的人會把js壓成一個檔然後直接送給你就好因為多檔的話你要跟很多個server去拿這時候就算你每個檔都很小花的時間就會久所以之後大家也可以學一下怎麼樣把它壓成一個檔好那大家來測一下就是網路的面板好那我們第一章主要就是學的就是怎麼樣用chrome的開發工具然後再來是console其實之後會很常用到console來跑javascript然後這邊開始跑console的一些語法然後再來我們可以去理解就是network我們可以去測一個網頁然後我們可以按錄影鍵類似錄影鍵那個錄影鍵然後重整你就可以看到這個網頁它是怎麼樣載入的然後它載入的時間這邊不好意思我這邊還要再提一下就是這邊會寫下面這裡有一條會寫就是你這個網頁它載了多少mbresource是多少比如說這個transfer 9.2它4545是因為它的資源就是要那麼多然後它實際上載了9.29.2然後這是資源然後它花了finish你看這個很長因為它是即時的網站所以它花了5.7分鐘如果是一般的靜態網站的話就不需要那麼久然後這邊呢這個download就代表說比如說這個html塞給你其實它html塞給你3秒就塞給你了可是它要畫完可能還要更久這後面是畫完的時間它正在畫可是它其實在第三秒的時候前面你看這三秒前面的這段時間它的DOM就已經給你了後面我們會講DOM是什麼大家不要緊張就這份html在它講的這個時間就已經給你了3秒5.89所以我們就學了幾個東西原來Chrome可以跑JavaScript然後怎麼樣跑JavaScript還有怎麼測試網站性能第一章是這樣