關於首屏效能優化的總結 原創

2021-07-28 08:43:01 字數 2116 閱讀 7689

這兩天一直在看首屏優化的文章,所以將其總結歸納一下,方便以後使用。

相對於移動端的首屏優化,pc在有些方面要苛刻得多,主要是因為pc端有太多的東西想要讓使用者看到,這就

難免pc端的頁面大而「重」,與我們現在「富客戶端」的概念想相呼應。

本文目錄

以800x600畫素尺寸為標準,當瀏覽器載入頁面後看到第一眼的顯示內容為首屏。而從開始載入到瀏覽器頁面顯示高度達到600畫素且此區域有內容顯示的時間為首屏顯示時間。

以京東首頁為例:

當我們開啟京東時,第一眼看到的內容即為首屏內容,也就是如上圖的內容。

乙個頁面的「總載入時間」要比「首屏時間」長,但對於終端使用者體驗而言,當內容充滿首屏的區域時,使用者就可以看到**的主要內容並可以進行各自的選擇了。首屏時間的快與慢,直接影響到了使用者對**的認知度。

所以首屏時間的長短對於使用者的滯留時間的長短、使用者轉化率都尤為重要。

還是首先以京東為例:

當我們開啟京東的**(不要滾動滑鼠和鍵盤),右鍵檢視源**會發現京東首頁的dom樹出奇的簡單,頁面dom中多含有mod_lazyload的類

class=

"j_f j_lazyload j_f_lift mod_lazyload need_ani chn"

id="portal_8"

data-backup=

"basic_8"

data-source=

"cms:basic_8"

data-tpl=

"portal_tpl"

>

再看下 localstorage

尤其是觀察location下面的鍵值對,會發現它們的值中多存在一串完整的類似於html的內容(內容太多刪除了值中的內容)

由上面的結構我們可知jd.com已經將它們的頁面結構放到了localstorage,不難想象這只是它頁面中的其中乙個模組的內容

分析到這裡已經很明顯了,通過前端快取和非同步載入jd已經完美的實現了首屏快速載入,在pc端達到了秒開的級別。

把需要請求的路徑寫在 dom 上(例如:data-tpl="elevator_tpl"),使用者滾動時,一旦該模組進入了視窗,則請求 dom 上對應的 data-tpl 位址,拿到渲染這個模組所需要的指令碼和資料,不過這中間還有一層本地快取 localstorage,如果在本地快取中匹配到了對應的 hash string 內容,則直接渲染,否則請求到資料之後更新本地快取。localstorage中的 version 會在頁面載入時候,與後端檔案 hash相對比,hash不變直接取localstorage中的內容(當然也可以使用cookie判斷版本)。

這裡其實存在兩個請求,乙個請求是載入資料和指令碼,而這裡的內容是:

從上面可以看出,任何乙個模組的改動,在前端只會引起乙個較小的載入變化,加上 http 的快取策略,伺服器的壓力也是很小的。

css靜態檔案在**?

為了求快,首頁是沒有css外鏈的,這樣會再發起多次請求,相信對於我們來說,也是老生常談的前端優化了。

那有人可能會問沒有css外鏈,那如果一整個頁面的css是否會增加頁面的體積?其實上面就已經提到了,頁面切分為模組化載入,對應模組下的css交給js或jsonp請求返回

js檔案怎麼載入?

京東採用請求的方式減少了與伺服器互動的時間

js如何執行?

懶執行,有互動才執行,有興趣的可以看看小鬍子哥的**首頁效能優化實踐這篇文章

如何處理?

在其他屏(非首屏)都採用懶載入的模式,這樣既能節省流量,也能減少請求數或延遲請求數。

伺服器需要做什麼?

少量靜態檔案的網域名稱,與iconfont均是放在同乙個域下,減少dns的解析事件,最好做到網域名稱收斂。

模組化介面的支援。

首屏內容最好做到靜態快取。

以上基本上便是最近整理的一些內容,還有很多我們前端開發應該注意像script標籤的位置啊,div的巢狀深度啊等我們開發本身應該具備中的就不多說了。正所謂「一如前端深似海」。。。

關於首屏效能優化的總結 原創

這兩天一直在看首屏優化的文章,所以將其總結歸納一下,方便以後使用。相對於移動端的首屏優化,pc在有些方面要苛刻得多,主要是因為pc端有太多的東西想要讓使用者看到,這就 難免pc端的頁面大而 重 與我們現在 富客戶端 的概念想相呼應。本文目錄 以800x600畫素尺寸為標準,當瀏覽器載入頁面後看到第一...

關於首屏效能優化的總結 原創

這兩天一直在看首屏優化的文章,所以將其總結歸納一下,方便以後使用。相對於移動端的首屏優化,pc在有些方面要苛刻得多,主要是因為pc端有太多的東西想要讓使用者看到,這就 難免pc端的頁面大而 重 與我們現在 富客戶端 的概念想相呼應。本文目錄 以800x600畫素尺寸為標準,當瀏覽器載入頁面後看到第一...

關於首屏效能優化的總結 原創

這兩天一直在看首屏優化的文章,所以將其總結歸納一下,方便以後使用。相對於移動端的首屏優化,pc在有些方面要苛刻得多,主要是因為pc端有太多的東西想要讓使用者看到,這就難免pc端的頁面大而 重 與我們現在 富客戶端 的概念想相呼應。本文目錄 以800x600畫素尺寸為標準,當瀏覽器載入頁面後看到第一眼...