性能優(yōu)化：

一、減少請求資源大小或者次數(shù)

1闰集、盡量和并和壓縮css和js文件。（將css文件和并為一個。將js合并為一個）
　　原因：主要是為了減少http請求次數(shù)以及減少請求資源的大小
　　打包工具：
　　webpack
　　gulp
　　grunt
.　　....
2捎迫、盡量所使用的字體圖標(biāo)或者SVG圖標(biāo)來代替?zhèn)鹘y(tǒng)png圖
　　因為字體圖標(biāo)或者SVG是矢量圖，代碼編寫出來的表牢，方大不會變形窄绒，而且渲染速度快

3、采用圖片的懶加載（延遲加載）
　　目的為了崔兴，減少頁面第一次加載過程中http的請求次數(shù)
　　具體步驟：
　　　　1彰导、頁面開始加載時不去發(fā)送http請求，而是放置一張占位圖
　　　　2敲茄、當(dāng)頁面加載完時位谋，并且圖片在可視區(qū)域再去請求加載圖片信息

4、能用css做的效果堰燎，不要用js做掏父，能用原生js做的，不要輕易去使用第三方插件秆剪。
　　避免引入第三方大量的庫赊淑。而自己卻只是用里面的一個小功能

5、使用雪碧圖或者是說圖片精靈
　　把所有相對較小的資源圖片仅讽，繪制在一張大圖上陶缺，只需要將大圖下載下來，然后利用
　　圖片定位來講小圖展現(xiàn)在頁面中（background-position:百分比洁灵，數(shù)值）

6饱岸、減少對cookie的使用（最主要的就是減少本地cookie存儲內(nèi)容的大小）处渣，因為客戶端操作cookie的時候伶贰，這些信息總是在客戶端和服務(wù)端傳遞。如果上設(shè)置不當(dāng)罐栈，每次發(fā)送

一個請求將會攜帶cookie

7黍衙、前端與后端進行數(shù)據(jù)交互時，對于多項數(shù)據(jù)盡可能基于json格式來進行傳送荠诬。相對于使用xml
　　來說傳輸有這個優(yōu)勢
　　目的：是數(shù)據(jù)處理方便琅翻，資源偏小

8位仁、前端與后端協(xié)商，合理使用keep-alive

9方椎、前端與服務(wù)器協(xié)商聂抢，使用響應(yīng)資源的壓縮

10、避免使用iframe
　　不僅不好管控樣式棠众，而且相當(dāng)于在本頁面又嵌套其他頁面琳疏，消耗性能會更大。因為還回去加載這個嵌套頁面的資源

11闸拿、在基于ajax的get請求進行數(shù)據(jù)交互的時候空盼，根據(jù)需求可以讓其產(chǎn)生緩存（注意:這個
緩存不是我們常看到的304狀態(tài)碼新荤，去瀏覽器本地取數(shù)據(jù)）揽趾，這樣在下一次從相同地址獲取是數(shù)據(jù)
時，取得就是上一次緩存的數(shù)據(jù)苛骨。（注意：很少使用篱瞎，一般都會清空。根據(jù)需求來做）

二痒芝、代碼優(yōu)化相關(guān)

1俐筋、在js中盡量減少閉包的使用
　　原因：使用閉包后，閉包所在的上下文不會被釋放

2吼野、減少對DOM操作校哎，主要是減少DOM的重繪與回流（重排）
　　關(guān)于重排（回流）的分離讀寫：如果需要設(shè)置多個樣式，把設(shè)置樣式全放在一起設(shè)置瞳步，不要一條一條的設(shè)置闷哆。使用文檔碎片或者字符串拼接做數(shù)據(jù)綁定（DOM的動態(tài)創(chuàng)建）

3、在js中避免嵌套循環(huán)和"死循環(huán)"(一旦遇到死循環(huán)单起，瀏覽器就會直接卡掉)

4抱怔、把css放在body上，把js放在body下面
　　讓其先加載css（注意：這里關(guān)于優(yōu)化沒有多大關(guān)系）

5嘀倒、減少css表達式的使用

6屈留、css選擇器解析規(guī)則所示從右往左解析的。減少元素標(biāo)簽作為對后一個選擇對象

7测蘑、盡量將一個動畫元素單獨設(shè)置為一個圖層（避免重繪或者回流的大泄辔！）
　　注意：圖層不要過多設(shè)置，否則不但效果沒有達到反而更差了

8碳胳、在js封裝過程中勇蝙，盡量做到低耦合高內(nèi)聚。減少頁面的冗余代碼

9挨约、css中設(shè)置定位后味混，最好使用z-index改變盒子的層級产雹，讓盒子不在相同的平面上

10、css導(dǎo)入的時候盡量減少@import導(dǎo)入式翁锡，因為@import是同步操作蔓挖，只有把對應(yīng)的樣式導(dǎo)入后，才會繼續(xù)向下加茲安馆衔，而link是異步的操作

11瘟判、使用window.requestAnimationFrame(js的幀動畫)代替?zhèn)鹘y(tǒng)的定時器動畫
　　如果想使用每隔一段時間執(zhí)行動畫，應(yīng)該避免使用setInterval角溃，盡量使用setTimeout
　　代替setInterval定時器荒适。因為setInterval定時器存在弊端：可能造成兩個動畫間隔時間
　　縮短

12、盡量減少使用遞歸开镣。避免死遞歸
　　解決：建議使用尾遞歸

13、基于script標(biāo)簽下載js文件時咽扇，可以使用defer或者async來異步加載

14邪财、在事件綁定中，盡可能使用事件委托质欲，減少循環(huán)給DOM元素綁定事件處理函數(shù)树埠。

15、在js封裝過程中嘶伟，盡量做到低耦合高內(nèi)聚怎憋。減少頁面的冗余代碼

16、減少Flash的使用

三九昧、存儲

1绊袋、結(jié)合后端，利用瀏覽器的緩存技術(shù)铸鹰，做一些緩存（讓后端返回304癌别，告訴瀏覽器去本地拉取數(shù)據(jù)）。（注意：也有弊端）可以讓一些不太會改變的靜態(tài)資源做緩存蹋笼。比如：一些圖片展姐，js，cs

2剖毯、利用h5的新特性（localStorage圾笨、sessionStorage）做一些簡單數(shù)據(jù)的存儲，
　　避免向后臺請求數(shù)據(jù)或者說在離線狀態(tài)下做一些數(shù)據(jù)展示逊谋。

四擂达、其他優(yōu)化

1、避免使用iframe不僅不好管控樣式涣狗，而且相當(dāng)于在本頁面又嵌套其他頁面谍婉，消耗性能會更大舒憾。因為還回去加載這個嵌套頁面的資源

2、頁面中的是數(shù)據(jù)獲取采用異步編程和延遲分批加載穗熬，使用異步加載是數(shù)據(jù)主要是為了避免瀏覽器失去響應(yīng)镀迂。如果你使用同步，加載數(shù)據(jù)很大并且很慢
　　那么唤蔗，頁面會在一段時間內(nèi)處于阻塞狀態(tài)探遵。目的：為了解決請求數(shù)據(jù)不耽擱渲染，提高頁面的
　　渲染效率妓柜。解決方法：需要動態(tài)綁定的是數(shù)據(jù)區(qū)域先隱藏箱季，等數(shù)據(jù)返回并且綁定后在讓其顯示
　　延遲分批加載類似圖片懶加載。減少第一次頁面加載時候的http請求次數(shù)

3棍掐、頁面中出現(xiàn)音視頻標(biāo)簽藏雏，我們不讓頁面加載的時候去加載這些資源（否則第一次加載會很慢）
　　解決方法：只需要將音視頻的preload=none即可。
　　目的：為了等待頁面加載完成時作煌，并且音視頻要播放的時候去加茲安音視頻資源

4掘殴、盡量將一個動畫元素單獨設(shè)置為一個圖層（避免重繪或者回流的大小）
　　注意：圖層不要過多設(shè)置粟誓，否則不但效果沒有達到反而更差了