對于一個產(chǎn)品，性能在用戶體驗中是必不可缺的一環(huán)扯躺。性能優(yōu)化是個長遠的事情讯柔，聯(lián)想到導(dǎo)航項目，列出以下性能優(yōu)化的方案：
一. 基本的代碼層面優(yōu)化臭胜；
1：合理使用css
1）正確使用Display屬性 Display屬性會影響頁面的渲染莫其，因此請合理使用
2）display:inline后不應(yīng)該再使用width、height耸三、margin乱陡、padding以及float
3）display:inline-block后不應(yīng)該再使用float
4）display:block后不應(yīng)該再使用vertical-align
5）display:table-*后不應(yīng)該再使用margin或者float
2：不濫用float
3：不聲明過多的font-size
4：值為0時不需要單位
5：標(biāo)準(zhǔn)化各種瀏覽器前綴
1）無前綴應(yīng)放在最后
2）CSS動畫只用（-webkit- 無前綴）兩種即可
3）其它前綴為 -webkit- -moz- -ms- 無前綴四種，（-o-Opera瀏覽器改用blink內(nèi)核仪壮，所以淘汰）
6：選擇器
7：避免讓選擇符看起來像是正則表達式蛋褥。高級選擇器不容易讀懂，執(zhí)行耗時也長
8：盡量使用id睛驳、class選擇器（避免使用內(nèi)嵌style）
9：盡量使用css3動畫
10：資源加載原則：按需加載和異步加載
11：首次加載不超過1024KB（或者可以說是越小越好）
12：壓縮html烙心、css、js
13：減少重繪和回流
14：緩存dom選擇和計算
15：盡量使用事件代理,避免批量綁定事件
16：使用touchstart乏沸，touchend代替click
17：Html使用viewport
18：減少dom節(jié)點
19：合理使用requestAnimationFrame動畫代替setTimeOut
20：適當(dāng)使用Canvas動畫
21：TouchMove, Scroll事件會導(dǎo)致多次渲染
22：避免空src（空src在部分瀏覽器中會導(dǎo)致無效請求）
23：避免30*/40*/50*請求錯誤淫茵；
24：Favicon.ico：如果我們沒有設(shè)置圖標(biāo)ico，則會加載默認(rèn)的圖標(biāo)：域名目錄下的favicon.ico蹬跃。很多開發(fā)者沒有注意到這一點匙瘪，就會導(dǎo)致這個請求404或者500铆铆。app中時不顯示，所以盡量保證ico文件大小小于4kb丹喻；
二. 框架級的優(yōu)化薄货；
使用第三方資源時，由于資源不可控碍论，所以需要慎重選擇谅猾。原則是根據(jù)項目需求與其對性能的影響去綜合考慮，然后選擇合適的框架以及庫文件鳍悠。同時需要使用異步加載的方式來加載税娜，避免第三方資源的使用影響項目本身的性能；
三. 域名/服務(wù)端的優(yōu)化藏研；
1. 啟用Gzip壓縮敬矩；
2. 資源緩存，長cache：合理設(shè)置資源的過期時間蠢挡，對于一些長期不更新的靜態(tài)資源弧岳，時間設(shè)置長一些；
3. 減少cookie：減少cookie頭信息的大小业踏，大小越大禽炬，傳輸速度越慢；
4. CDN加速：圖片或者css堡称，js均可使用cdn來加速瞎抛；
四. 服務(wù)端接口優(yōu)化；
1. 接口合并：例如一個頁面需要請求兩部分以上的數(shù)據(jù)接口却紧，則建議合并成一個桐臊，可以減少http請求數(shù)；
2. 減少數(shù)據(jù)量：去掉接口返回的數(shù)據(jù)中不需要的數(shù)據(jù)晓殊；
3. 緩存數(shù)據(jù)：首次加載請求一次后断凶，緩存下來數(shù)據(jù)；非首次請求優(yōu)先使用上次請求的數(shù)據(jù)巫俺，這樣可以提升非首次請求加載速度认烁；
