如何查看一個(gè)在線頁面的內(nèi)存大小

查看一個(gè)在線頁面M端內(nèi)存的操作方法：

1. 打開界面：使用瀏覽器打開頁面（本次選用google chrome），找到developer tools按鈕或按F12打開開發(fā)者工具，點(diǎn)擊手機(jī)屏幕按鈕，再按F5，打開網(wǎng)頁的手機(jī)端。

2. 找到右側(cè)代碼的Network?功能選項(xiàng)

3. 所有資源：點(diǎn)擊Network - 點(diǎn)擊ALL，是加載頁面上所有內(nèi)容，包含js,css,img,media等資源

4. 頁面內(nèi)存大?。?/span>下拉到最后，可以看到6.1MB resources, 6.1MB就是這個(gè)頁面的內(nèi)存大小。

但是實(shí)際傳輸?shù)囊宰筮吥莻€(gè)transfered為準(zhǔn)。因?yàn)橛芯彺?，所以加載了2.5MB的資源,如果第二次再打開這個(gè)頁面，緩存的內(nèi)容就更多，transferred的加載內(nèi)存就會(huì)更少。

2.5MB transferred是實(shí)際用戶打開頁面加載的內(nèi)存大小，因?yàn)橛行┵Y源是緩存里的，不占用用戶加載的內(nèi)存。

有些內(nèi)容會(huì)被壓縮后傳輸，所以這個(gè)值總會(huì)比實(shí)際大小要小。

5. ?Transferred包含的內(nèi)存有哪些：如果要查看2.5MB transferred的資源有哪些，可以分別點(diǎn)擊頭部ALL右側(cè)的各個(gè)功能，比如js,css,img，點(diǎn)擊到img發(fā)現(xiàn)，圖片的內(nèi)存占2.2MB，那如果要優(yōu)化這個(gè)頁面的速度的話，就要從img上著手。

6. 查看img里具體內(nèi)容的size和time數(shù)據(jù)：

可對size比較大的產(chǎn)品圖片，加載時(shí)間比較長的產(chǎn)品圖片進(jìn)行內(nèi)存的壓縮，或采取谷歌推薦的圖片格式（ JPEG 2000, JPEG XR, and WebP），還可以使用優(yōu)化圖片的工具和插件（ImageOptim工具,squoosh工具,Magento優(yōu)化圖片擴(kuò)展插件，圖像優(yōu)化WordPress插件，Joomla圖片優(yōu)化插件）。

7. 加載時(shí)間分析：Loading: 5.67s時(shí)間，是所有資源加載完的時(shí)間，包括第三方的一些東西。

頁面內(nèi)容展示全部主要看domcontentloaded的時(shí)間，第三方fb和google ad的，占比不大，但time上顯示的加載時(shí)間比較長，這個(gè)加載是在頁面加載完成后，也就是能看到完整頁面后，實(shí)際上是對用戶體驗(yàn)沒啥影響的，所以這個(gè)頁面內(nèi)容展示需要的時(shí)間是1.76s（domcontentloaded）。

第一次訪問過后，瀏覽器會(huì)把圖片 js css這種靜態(tài)資源緩存下來。你再請求的話，只要緩存不過期，就不再去加載了，直接用緩存，這時(shí)的頁面加載內(nèi)存會(huì)相比第一次小很多，可能就是300多KB的transferred。

擴(kuò)充：用memory功能查看的頁面內(nèi)存大小，是電腦加載占用了電腦多少內(nèi)存資源的，是查看js調(diào)用棧的，是看js執(zhí)行期間電腦系統(tǒng)分配了多少內(nèi)存，不是說頁面有多少size的。這個(gè)跟設(shè)備和瀏覽器有關(guān)系。

總結(jié)：

學(xué)會(huì)查看一個(gè)頁面的內(nèi)存大小，找出占內(nèi)存比較多的資源項(xiàng)有哪些，再進(jìn)行針對性的優(yōu)化，一個(gè)頁面的內(nèi)存越小，在相同前提下，用戶打開的加載速度就越快，特別是在谷歌的核心網(wǎng)頁指標(biāo)（LCP, FID, CLS）即將在6月上線的前夕，網(wǎng)站，頁面速度提升應(yīng)該成為這段時(shí)間的首要任務(wù)。