在WEB項目中，影響客户體驗度的一個重要元素就是頁面響應的速度。在加載首屏的時候，瀏覽器需要解析js，加載圖片，當這些請求沒有完成之前，頁面會處於白板的情況；

針對web頁面的首頁白屏加載問題，我們可以借鑑京東：

 

首屏（骨架屏）

　　京東：

　　

　　當前台向後台發起請求，拿數據-渲染頁面的這段時間，京東做了一個首屏骨架屏，

　　仿照京東：

　　html：

　　

 

 　　css:　　

　　

 　　注：.box下的所有標籤元素都將加上偽類：after，

 

　　當數據請求成功，渲染到頁面的時候，再重置ClassName下所有的偽類：after的背景background：none；

分屏加載：

　　當用户在訪問網站的時候，往往會有等待時間，需要頁面將所有的JS加載完成後，才會開始渲染頁面。

　　這時為了節約時間，減少請求數據，我們可以只將第一屏的數據展示給用户，其他的模塊，當用户滾動頁面的時候再去觸發，按需加載。

　　js：

　　

 

 　　如何查看一個網站首屏加載數據的大小：

　　谷歌瀏覽器為例：

 

 　　在Network下可以看見請求的所有數據，以紅線為準，加載資源排在紅線前的，都是首屏需要做的求情，在紅線後的，都是後續加載的。

　　京東首屏120個資源，資源大小2.9MB，Load時間747ms；

　　後續資源請求會有排隊請求：

　　

 　　注：Queueing排隊時間。

 

　　

 

不會寫代碼，我只是代碼的搬運工.