1叉谜、雅虎軍規(guī)
2、幾個經(jīng)驗值
同一個域名下的js不超過3個
首屏加載的js總數(shù)不超過5個
gzip之后每個文件大小不超過32.2kB 壓縮之前100kB
3鹊碍、預(yù)加載技術(shù)-DNS Prefetch
用于告知瀏覽器搭伤，盡可能預(yù)先解析指定域名的DNS
<meta http-equiv="x-dns-prefetch-control" content="on" />
<-- 這是用來告知瀏覽器當(dāng)前頁面要做DNS預(yù)解析 -->
<link rel="dns-prefetch" href="http://the-domain-to-be-prefetched.com" />
4民镜、異步加載技術(shù)
利用腳本的async和defer屬性可以實現(xiàn)異步加載
利用這兩個屬性的script標(biāo)簽都可以實現(xiàn)異步加載弄唧，同時不阻塞腳本解析适肠。但是使用async屬性的腳本執(zhí)行順序是不能得到保證的。而使用defer屬性的腳本執(zhí)行順序可以得到保證候引。另一方面侯养，defer屬性是在HTML文檔解析完成后，DOMContentLoaded事件之前就會執(zhí)行js背伴。async一旦加載完js后就會馬上執(zhí)行沸毁，最遲不超過window.onload事件。所以傻寂，如果腳本沒有操作DOM等元素，或者與DOM事后加載完成無關(guān)携兵，直接使用async腳本就好疾掰。如果需要DOM，就只能使用defer了徐紧。
<script type="text/javascript" src="./a.js" async></script>
<script type="text/javascript" src="./b.js" defer></script>
5静檬、動態(tài)加載技術(shù)
動態(tài)加載腳本就是利用JavaScript代碼來加載腳本，通常是手工創(chuàng)建script元素并级，然后等到HTML文檔加載完畢后插入到文檔中去拂檩。這樣就可以很好地控制腳本加載的時間，從而避免阻塞問題嘲碧。
function loadJs(src){
const script = document.createElement('script');
script.src = src;
document.getElementsByTagName('head')[0].appendChild(script);
}
loadJs('http://example.com/aaa.js');
6稻励、利用manifest、service workers實現(xiàn)緩存。
7望抽、Offline.js：自動提示在線/離線狀態(tài)
8加矛、合理利用瀏覽器緩存機(jī)制、或者localstorage 將js存儲在本地（適用移動端）
// 注意 localStorage一個域名下最大限制 5M 小米手機(jī)超過2.5M會造成卡頓
--------------可以借助postMessage實現(xiàn)localStorage擴(kuò)容
//1煤篙、localStorage在瀏覽器的隱私模式下面是不可讀取的
//2斟览、localStorage本質(zhì)上是對字符串的讀取，如果存儲內(nèi)容多的話會消耗內(nèi)存空間辑奈，會導(dǎo)致頁面變卡
//3苛茂、localStorage不能被爬蟲抓取到
if (localStorage['index.js']) {
eval(localStorage['index.js'])
} else {
$.ajax({
url: 'http://aa.com/index.js',
dataType: 'text',
success: function(data) {
eval(data);
localStorage['index.js'] = data
}
})
}
9、區(qū)分機(jī)型鸠窗、網(wǎng)絡(luò)情況處理
10妓羊、服務(wù)端渲染（SSR）更好的有利于SEO，減少頁面首屏加載時間
11塌鸯、使用壓力測試工具 WRK
PV 當(dāng)日訪問人數(shù) pv每天幾十萬甚至上百萬需要考慮壓測
UV 獨立訪問人數(shù)
QPS=PV/t
wrk -t 4 -c 100 -d 10s -s http_get.lua http://cool.test.net/v1.f4v
用4個線程模擬100個連接 10s內(nèi)
參數(shù)說明：
-t 需要模擬的線程數(shù) （一般線程數(shù)不能過多 核數(shù)的2-4倍就夠了）
-c 需要模擬的連接數(shù)
--timeout 超時的時間
-d 測試的持續(xù)時間
其他工具
JMeter
node自帶的工具 process.memoryUsage
memwatch+headdump
12侍瑟、使用Chrome Devtools調(diào)試工具調(diào)試Node
node --inspect app.js
chrome://inspect/#devices
錄制 wrk測試
