前端性能分析與優(yōu)化--圖片資源

常見圖片格式

詳見：聊一聊幾種常用web圖片格式：gif浩嫌、jpg惋增、png燥滑、webp

圖片應用場景

普通展示圖片、圖標等

示例

代碼：https://github.com/js-fu/js-fu.github.io/tree/master/fe-img

1.html 普通靜態(tài)頁面

https://js-fu.github.io/fe-img/1.html

首先看到這是一個的普通靜態(tài)頁面筛璧，一個圖文列表。在Disable cache和Slow 3G的環(huán)境下打開該頁面妖滔，得到如下performance隧哮。

1.jpg

分析上圖，可看出DOMContentLoaded事件在2.37秒執(zhí)行座舍。load事件要等到全部圖片資源都加載完沮翔，到了29.81秒才執(zhí)行。如果通過監(jiān)聽load事件的話曲秉，要等很久才執(zhí)行采蚀，體驗比較差。而且靜態(tài)頁面內容是固定的承二，不靈活榆鼠。

DOMContentLoaded 和 load 事件
DOMContentLoaded: 當純 HTML 被完全加載以及解析時，DOMContentLoaded 事件會被觸發(fā)亥鸠，而不必等待樣式表妆够，圖片或者子框架完成加載。 $(function() {})
load: 當整個頁面及所有依賴資源如樣式表和圖片都已完成加載時负蚊，將觸發(fā)load事件神妹。它與 DOMContentLoaded 不同，后者只要頁面 DOM 加載完成就觸發(fā)家妆，無需等待依賴資源的加載鸵荠。

優(yōu)化

2.html 使用ajax獲取圖文列表數(shù)據(jù)

https://js-fu.github.io/fe-img/2.html

這個頁面的標題“圖文列表”，是固定的伤极。圖文資源模擬用ajax獲取蛹找。同樣在Disable cache和Slow 3G的環(huán)境下打開該頁面姨伤，得到如下performance。

2.jpg

分析上圖庸疾，可看出DOMContentLoaded事件在2.38秒執(zhí)行乍楚，跟1.html差不多。load事件提前到了2.39秒届慈，因為加載圖片資源是異步去加載的炊豪。但是仍有一個問題，不在可視范圍內的圖片也加載了拧篮，不必要词渤，可以等到頁面滾動，等圖片到了可視范圍內再去懶加載串绩。