一.圖片優(yōu)化
1.使用雪碧圖（webpack和gulp都有對(duì)應(yīng)插件自動(dòng)轉(zhuǎn)換成雪碧圖）办成，減少請(qǐng)求迂卢。
2.壓縮圖片質(zhì)量(打包編譯可以找對(duì)應(yīng)的插件桐汤，手動(dòng)版可以看下智圖)，在不失真和可接受失真條件下可以減少大量數(shù)據(jù)請(qǐng)求员萍。
3.小圖可以考慮base64拣度，最好不要大于5kb碎绎，簡單圖可以考慮用canvas和svg代替筋帖。
4.條件允許考慮使用webp冤馏，不過要注意兼容問題。具體可以參考這篇文章
5請(qǐng)務(wù)必指定img大小來減少圖片資源加載完后造成的重排性能損耗
圖中update layer tree時(shí)間就是不指定圖片大小造成的損耗。對(duì)于頁面負(fù)責(zé)程度較高的這里造成的順暢會(huì)影響用戶體驗(yàn)涕刚。
6.靈活使用srcset 或picture 讓圖片響應(yīng)式加載副女。
7.首屏多圖可以通過圖片懶加載去減少請(qǐng)求數(shù)蚣旱，通過占位符顯示圖片（比如全部請(qǐng)求預(yù)覽圖）碑幅，到可視區(qū)域時(shí)再加載實(shí)際圖片。
二js代碼優(yōu)化
1.減少dom操作塞绿，dom樹渲染和js代碼編譯是通過不同的引擎實(shí)現(xiàn)的沟涨，每次通過js動(dòng)態(tài)操作dom，都會(huì)造成2個(gè)引擎建立連接額外開銷∫煳牵現(xiàn)在通過框架去開發(fā)項(xiàng)目基本不會(huì)考慮這個(gè)問題了裹赴，vue react都引入了vdom喜庞。vdom通過diff算法同步到dom tree減少了額外的性能損耗達(dá)到提升性能的效果，具體可以看下這篇介紹棋返。
2.減少重繪重排延都。雖然現(xiàn)代瀏覽器對(duì)重繪重排有做優(yōu)化，但是代碼中引入獲取當(dāng)前布局的api都會(huì)造成強(qiáng)制重繪重排睛竣。
/**會(huì)觸發(fā)重排的屬性。
offsetTop,offsetLeft,offsetWidth,offsetHeight;
scrollTop,scrollLeft,scrollWidth,scrollHeight;
clientTop,clientLeft,clientWidth,clientHeight;
getComputedStyle()/currentStyle**/
//以下代碼在本機(jī)測試結(jié)果0.17ms和0.32ms
if (document.body.currentStyle) {
computed = document.body.currentStyle;
} else {
computed = document.defaultView.getComputedStyle(document.body, '');
}
function testOneByOne() {
for(var i=0;i<10000;i++){
s.color = 'red';;
tmp = computed.backgroundColor;
s.color = 'white';
tmp = computed.backgroundImage;
s.color = 'green';
tmp = computed.backgroundAttachment;
}
}
function testAll() {
start()
for(var i=0;i<10000;i++){
s.color = 'yellow';
s.color = 'pink';
s.color = 'blue';
}
// tmp = computed.backgroundColor;
// tmp = computed.backgroundImage;
// tmp = computed.backgroundAttachment;
end()
}
3.使用事件代理代替批量綁定猖吴，給每個(gè)元素綁定事件會(huì)帶來額外開銷海蔽。可以通過事件冒泡通過來源進(jìn)行不同事件處理刑然。
4.高頻事件考慮用防抖和節(jié)流垦细，像滾動(dòng)觸發(fā)更新腻豌，輸入框輸入聯(lián)想請(qǐng)求。
5.減少作用域訪問層級(jí)苏携，一個(gè)執(zhí)行環(huán)境中尋找對(duì)象是通過作用域連去查值的装蓬，如果當(dāng)前環(huán)境沒有會(huì)隨著作用域連一層一層往上直到全局環(huán)境。
6.頻繁的對(duì)象屬性訪問可以先緩存到內(nèi)存。
7.字面量的創(chuàng)建執(zhí)行效率比new 一個(gè)對(duì)象效率要高
var str ='str';
var str2= String('str');//也沒人會(huì)這么用吧
var arr=['1'];
var arr2=Array('1');//也沒人會(huì)這么用吧
8.閉包有很多好處忆首，主要是利用閉包的特性進(jìn)行傳參和屬性的動(dòng)態(tài)初始化筛欢。
常見的：利用匿名函數(shù)自執(zhí)行封裝自身屬性柱搜，防止屬性外協(xié)。
上面提到的防抖節(jié)流就可以利用閉包特性健爬。
還有柯里化的使用
但是:閉包本身會(huì)帶來內(nèi)存無法被回收的問題壤短。如果在業(yè)務(wù)邏輯確認(rèn)是無效代碼最好清除閉包引用保證能被回收蒜绽。
三 css優(yōu)化
1.head頭css后面不要跟script 會(huì)阻塞dom往下解析
<script>
setTimeout(function(){
var testdom=document.getElementById("test");
console.log(testdom)
},10)
</script>
<link rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script>
//如果沒有這段script骡和，link解析完就會(huì)往下解析下面的body钮科。原因在于dom引擎和javscript引擎只占其一休里。
//如果css文件夠大 二網(wǎng)絡(luò)又很不穩(wěn)定 這一小段代碼就很影響體驗(yàn)了
</script>
<title>Document</title>
</head>
<body>
<div id="test">test</div>
</body>
2.合理有規(guī)范的編寫cssname。有關(guān)css查找規(guī)則可以參考這個(gè)
//以業(yè)務(wù)模塊為單位可免，合理給class命名
<div class='wrapper'>
<header class='header'>
<ul class="header-menu menu">
<li class="header-menu-item"></li>
</ul>
</header>
<div class="content">
<ul class="content-menu menu">
<li class="content-menu-item"></li>
</ul>
</div>
</div>
<style>
.content .menu li{
}
//or
.content-menu-item{
}
</style>
3.簡單動(dòng)畫可以使用css3來實(shí)現(xiàn) css動(dòng)畫和js動(dòng)畫對(duì)比
四：關(guān)于加載優(yōu)化，（首屏加載優(yōu)化會(huì)再啟一篇文章做總結(jié)）
利用你手頭資源對(duì)代碼進(jìn)行壓縮和合并修己，加快首屏代碼加載速度。
包括但不限于
- js加載編譯后置
2.開啟gzip
3.客戶端緩存策略（假設(shè)是在webview），cdn緩存光督，service-work緩存结借。
4.首屏加載有效代碼率咖熟。
5.使用預(yù)加載(preload,如果是客戶端薪韩，可以考慮變種策略)
