網絡加載類
首屏數據請求提前,避免JavaScript文件加載后才請求數據
為了進一步提升頁面加載速度,可以考慮將頁面的數據請求盡可能提前,避免在JavaScript加載完成后才去請求數據。通常數據請求是頁面內容渲染中關鍵路徑最長的部分,而且不能并行,所以如果能將數據請求提前,可以極大程度上縮短頁面內容的渲染完成時間。
首屏加載和按需加載,非首屏內容滾屏加載,保證首屏內容最小化
由于移動端網絡速度相對較慢,網絡資源有限,因此為了盡快完成頁面內容的加載,需要保證首屏加載資源最小化,非首屏內容使用滾動的方式異步加載。一般推薦移動端頁面首屏數據展示延時最長不超過3秒。目前中國聯通3G的網絡速度為338KB/s(2.71Mb/s),所以推薦首屏所有資源大小不超過1014KB,即大約不超過1MB。
模塊化資源并行下載
在移動端資源加載中,盡量保證JavaScript資源并行加載,主要指的是模塊化JavaScript資源的異步加載,例如AMD的異步模塊,使用并行的加載方式能夠縮短多個文件資源的加載時間。
inline首屏必備的CSS和JavaScript
通常為了在HTML加載完成時能使瀏覽器中有基本的樣式,需要將頁面渲染時必備的CSS和JavaScript通過<script>或<style>內聯到頁面中,避免頁面HTML載入完成到頁面內容展示這段過程中頁面出現空白。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>樣例</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
<style>
/* 必備的首屏CSS */
html, body{
margin: 0;
padding: 0;
background-color: #ccc;
}
</style>
</head>
<body>
</body>
meta dns prefetch設置DNS預解析
設置文件資源的DNS預解析,讓瀏覽器提前解析獲取靜態資源的主機IP,避免等到請求時才發起DNS解析請求。通常在移動端HTML中可以采用如下方式完成。
cdn域名預解析
<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" >
資源預加載
對于移動端首屏加載后可能會被使用的資源,需要在首屏完成加載后盡快進行加載,保證在用戶需要瀏覽時已經加載完成,這時候如果再去異步請求就顯得很慢。
合理利用MTU策略
通常情況下,我們認為TCP網絡傳輸的最大傳輸單元(Maximum Transmission Unit,MTU)為1500B,即網絡一個RTT(Round-Trip Time,網絡請求往返時間)時間內可以傳輸的數據量最大為1500字節。因此,在前后端分離的開發模式中,盡量保證頁面的HTML內容在1KB以內,這樣整個HTML的內容請求就可以在一個RTT時間內請求完成,最大限度地提高HTML載入速度。