網(wǎng)絡加載類
首屏數(shù)據(jù)請求提前状勤,避免JavaScript文件加載后才請求數(shù)據(jù)
為了進一步提升頁面加載速度,可以考慮將頁面的數(shù)據(jù)請求盡可能提前双泪,避免在JavaScript加載完成后才去請求數(shù)據(jù)持搜。通常數(shù)據(jù)請求是頁面內容渲染中關鍵路徑最長的部分,而且不能并行焙矛,所以如果能將數(shù)據(jù)請求提前葫盼,可以極大程度上縮短頁面內容的渲染完成時間。
首屏加載和按需加載村斟,非首屏內容滾屏加載贫导,保證首屏內容最小化
由于移動端網(wǎng)絡速度相對較慢抛猫,網(wǎng)絡資源有限,因此為了盡快完成頁面內容的加載孩灯,需要保證首屏加載資源最小化闺金,非首屏內容使用滾動的方式異步加載。一般推薦移動端頁面首屏數(shù)據(jù)展示延時最長不超過3秒峰档。目前中國聯(lián)通3G的網(wǎng)絡速度為338KB/s(2.71Mb/s)败匹,所以推薦首屏所有資源大小不超過1014KB,即大約不超過1MB讥巡。
模塊化資源并行下載
在移動端資源加載中掀亩,盡量保證JavaScript資源并行加載,主要指的是模塊化JavaScript資源的異步加載尚卫,例如AMD的異步模塊归榕,使用并行的加載方式能夠縮短多個文件資源的加載時間。
inline首屏必備的CSS和JavaScript
通常為了在HTML加載完成時能使瀏覽器中有基本的樣式吱涉,需要將頁面渲染時必備的CSS和JavaScript通過<script>或<style>內聯(lián)到頁面中,避免頁面HTML載入完成到頁面內容展示這段過程中頁面出現(xiàn)空白外里。
<!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預解析怎爵,讓瀏覽器提前解析獲取靜態(tài)資源的主機IP,避免等到請求時才發(fā)起DNS解析請求盅蝗。通常在移動端HTML中可以采用如下方式完成鳖链。
cdn域名預解析
<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" >
資源預加載
對于移動端首屏加載后可能會被使用的資源,需要在首屏完成加載后盡快進行加載墩莫,保證在用戶需要瀏覽時已經(jīng)加載完成芙委,這時候如果再去異步請求就顯得很慢。
合理利用MTU策略
通常情況下狂秦,我們認為TCP網(wǎng)絡傳輸?shù)淖畲髠鬏攩卧∕aximum Transmission Unit灌侣,MTU)為1500B,即網(wǎng)絡一個RTT(Round-Trip Time裂问,網(wǎng)絡請求往返時間)時間內可以傳輸?shù)臄?shù)據(jù)量最大為1500字節(jié)侧啼。因此,在前后端分離的開發(fā)模式中堪簿,盡量保證頁面的HTML內容在1KB以內痊乾,這樣整個HTML的內容請求就可以在一個RTT時間內請求完成,最大限度地提高HTML載入速度椭更。