什么叫web前端性能優(yōu)化？
- 使用戶覺得頁面加載快！
- 使用戶覺得頁面加載快！
- 使用戶覺得頁面加載快！
重要的話說三遍！??！
（接下來總結(jié)下前端提高頁面加載速度的一些方法。）
前端性能優(yōu)化
思路：分析一個(gè)頁面從輸入 URL 到頁面加載顯示完成的所有步驟，采用分治法逐步優(yōu)化。
1.優(yōu)化DNS查詢
減少域名：盡量把所有的資源放在一個(gè)域名下。一個(gè)域名同時(shí)可以發(fā)4（IE8）或8個(gè)請求（Chrome）。請求文件少，用1個(gè)域名，文件多用多個(gè)域名。與3權(quán)衡。
2.優(yōu)化TCP協(xié)議
- TCP連接復(fù)用，使用keep-alive：連接回復(fù)加上請求頭：keep-alive。第一次請求不斷開，第二次請求復(fù)用。
- 使用http 2.0版本：多路復(fù)用，連接復(fù)用率會更高
3. 優(yōu)化發(fā)送HTTP請求
- 合并JS或CSS文件
- inline image：使用data:url scheme來內(nèi)連圖片
- 減小cookie體積，每個(gè)請求都會附帶cookie，所以不要濫用cookie。
- 合理使用CasheControl代替發(fā)送HTTP請求
- 同時(shí)發(fā)送多個(gè)請求（瀏覽器自帶）IE8可以同時(shí)請求下載4個(gè)的css文件，Chrome可以同時(shí)請求下載8個(gè) 。
4.優(yōu)化接受響應(yīng)
- 設(shè)置Etags：瀏覽器重復(fù)與請求服務(wù)器一樣的文件，ETag響應(yīng)304。
- Gzip壓縮大文件 使用macos gzip，
npm server gzipgzip 文件名
其響應(yīng)頭為Content-Encodinging：gzip，先壓縮接收到再解壓縮。缺點(diǎn)：耗費(fèi)瀏覽器CPU，權(quán)衡
5.優(yōu)化DOCTYPE
- 不能不寫，不能寫錯(cuò)
6.優(yōu)化CSS、JS請求
- 使用CDN：用CDN請求靜態(tài)資源同時(shí)可以增大同時(shí)下載數(shù)量，內(nèi)容分發(fā)網(wǎng)絡(luò)（CDN）可以使請求總時(shí)間降低，也可以減少cookie
- CSS放在head里：使其盡早下載，因?yàn)閏hrome需要下載完所有的css后才渲染頁面
- JS放在body里的最后：盡早顯示整個(gè)頁面，獲取節(jié)點(diǎn)。
7.使用懶加載
- 組件懶加載
const xxx =()=>import('./components/xxx.vue')
- 路由懶加載
8.優(yōu)化用戶體驗(yàn)
- 用戶看到哪些內(nèi)容就請求哪些內(nèi)容
- 加一個(gè)loading動畫用戶會感覺時(shí)間變快
9.減少監(jiān)聽器，使用事件委托
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
let liList = document.querySelectorAll('li')
// liList[0].onclick = ()=>console.log(1)
// liList[1].onclick = ()=>console.log(2)
// liList[2].onclick = ()=>console.log(3)
// liList[3].onclick = ()=>console.log(4)
//法一：監(jiān)聽太多
let ul = document.querySelector('ul')
ul.onclick = (e) => {
if (e.target.tagName === 'LI') {
console.log(e.target.innerText)
}
}//法二：減少監(jiān)聽，采用事件委托
</script>
</body>
10.優(yōu)化圖片大小
11.減少或合并DOM操作或使用虛擬DOM
// 不好的方式
var elem = $('#elem');
for (var i = 0; i < 100; i++) {
elem.append('<li>element '+i+'</li>');
}
// 好的方式
var elem = $('#elem' ),
arr = [];
for (var i = 0; i < 100; i++) {
arr.push('<li>element ' +i+'</li>' );
}
elem.append(arr. join(''));
12.對大量數(shù)據(jù)計(jì)算使用緩存
// data.length === 100000
for(var i = 0;i < data.length;i++){
// do something...
}
//上面的代碼沒有下面的好
for(var i = 0,len = data.length;i < len;i++){
// do something...
}
13.使用setTimeout降低調(diào)用接口頻率
參考文章： 雅虎前端優(yōu)化的35條軍規(guī)
