????????在實(shí)際的項(xiàng)目開(kāi)發(fā)中，不管是前端也好璧榄，后端也好，都需要?dú)q其性能進(jìn)行優(yōu)化吧雹，今天主要講講在前端常見(jiàn)的性能優(yōu)化方式：
一骨杂、減少請(qǐng)求資源大小或者次數(shù)
1、盡量和并和壓縮css和js文件雄卷。（將css文件和并為一個(gè)搓蚪。將js合并為一個(gè)）
原因：主要是為了減少http請(qǐng)求次數(shù)以及減少請(qǐng)求資源的大小
打包工具：webpack、gulp丁鹉、grunt....
2妒潭、盡量所使用的字體圖標(biāo)或者SVG圖標(biāo)來(lái)代替?zhèn)鹘y(tǒng)png圖
因?yàn)樽煮w圖標(biāo)或者SVG是矢量圖，代碼編寫(xiě)出來(lái)的揣钦，方大不會(huì)變形雳灾，而且渲染速度快
3、采用圖片的懶加載（延遲加載）
目的為了冯凹，減少頁(yè)面第一次加載過(guò)程中http的請(qǐng)求次數(shù)
具體步驟：
1谎亩、頁(yè)面開(kāi)始加載時(shí)不去發(fā)送http請(qǐng)求，而是放置一張占位圖
2、當(dāng)頁(yè)面加載完時(shí)团驱，并且圖片在可視區(qū)域再去請(qǐng)求加載圖片信息
4摸吠、能用css做的效果，不要用js做嚎花，能用原生js做的寸痢，不要輕易去使用第三方插件。
避免引入第三方大量的庫(kù)紊选。而自己卻只是用里面的一個(gè)小功能
5啼止、使用雪碧圖或者是說(shuō)圖片精靈
把所有相對(duì)較小的資源圖片，繪制在一張大圖上兵罢，只需要將大圖下載下來(lái)献烦，然后利用
圖片定位來(lái)講小圖展現(xiàn)在頁(yè)面中（background-position:百分比，數(shù)值）
6卖词、減少對(duì)cookie的使用（最主要的就是減少本地cookie存儲(chǔ)內(nèi)容的大泄恰），因?yàn)榭蛻舳?i>操作cookie的時(shí)候此蜈，這些信息總是在客戶端和服務(wù)端傳遞即横。如果上設(shè)置不當(dāng)，每次發(fā)送
一個(gè)請(qǐng)求將會(huì)攜帶cookie
7裆赵、前端與后端進(jìn)行數(shù)據(jù)交互時(shí)东囚，對(duì)于多項(xiàng)數(shù)據(jù)盡可能基于json格式來(lái)進(jìn)行傳送。相對(duì)于使用xml
來(lái)說(shuō)傳輸有這個(gè)優(yōu)勢(shì)
目的：是數(shù)據(jù)處理方便战授，資源偏小
8页藻、前端與后端協(xié)商，合理使用keep-alive
9植兰、前端與服務(wù)器協(xié)商份帐，使用響應(yīng)資源的壓縮
10、避免使用iframe
不僅不好管控樣式钉跷，而且相當(dāng)于在本頁(yè)面又嵌套其他頁(yè)面弥鹦，消耗性能會(huì)更大。因?yàn)檫€回去加載這個(gè)嵌套頁(yè)面的資源
11爷辙、在基于ajax的get請(qǐng)求進(jìn)行數(shù)據(jù)交互的時(shí)候彬坏，根據(jù)需求可以讓其產(chǎn)生緩存（注意:這個(gè)
緩存不是我們常看到的304狀態(tài)碼膝晾，去瀏覽器本地取數(shù)據(jù)）栓始，這樣在下一次從相同地址獲取是數(shù)據(jù)
時(shí)，取得就是上一次緩存的數(shù)據(jù)血当。（注意：很少使用幻赚，一般都會(huì)清空禀忆。根據(jù)需求來(lái)做）
二、代碼優(yōu)化相關(guān)
1落恼、在js中盡量減少閉包的使用
原因：使用閉包后箩退，閉包所在的上下文不會(huì)被釋放
2、減少對(duì)DOM操作佳谦，主要是減少DOM的重繪與回流（重排）
關(guān)于重排（回流）的分離讀寫(xiě)：如果需要設(shè)置多個(gè)樣式戴涝，把設(shè)置樣式全放在一起設(shè)置，不要一條一條的設(shè)置钻蔑。使用文檔碎片或者字符串拼接做數(shù)據(jù)綁定（DOM的動(dòng)態(tài)創(chuàng)建）
3啥刻、在js中避免嵌套循環(huán)和"死循環(huán)"(一旦遇到死循環(huán)，瀏覽器就會(huì)直接卡掉)
4咪笑、把css放在body上可帽，把js放在body下面
讓其先加載css（注意：這里關(guān)于優(yōu)化沒(méi)有多大關(guān)系）
5、減少css表達(dá)式的使用
6窗怒、css選擇器解析規(guī)則所示從右往左解析的映跟。減少元素標(biāo)簽作為對(duì)后一個(gè)選擇對(duì)象
7、盡量將一個(gè)動(dòng)畫(huà)元素單獨(dú)設(shè)置為一個(gè)圖層（避免重繪或者回流的大卸嫡场）
注意：圖層不要過(guò)多設(shè)置申窘，否則不但效果沒(méi)有達(dá)到反而更差了
8弯蚜、在js封裝過(guò)程中孔轴，盡量做到低耦合高內(nèi)聚。減少頁(yè)面的冗余代碼
9碎捺、css中設(shè)置定位后路鹰，最好使用z-index改變盒子的層級(jí)，讓盒子不在相同的平面上
10收厨、css導(dǎo)入的時(shí)候盡量減少@import導(dǎo)入式晋柱，因?yàn)锧import是同步操作，只有把對(duì)應(yīng)的樣式導(dǎo)入后诵叁，才會(huì)繼續(xù)向下加茲安雁竞，而link是異步的操作
11、使用window.requestAnimationFrame(js的幀動(dòng)畫(huà))代替?zhèn)鹘y(tǒng)的定時(shí)器動(dòng)畫(huà)
如果想使用每隔一段時(shí)間執(zhí)行動(dòng)畫(huà)拧额，應(yīng)該避免使用setInterval碑诉，盡量使用setTimeout
代替setInterval定時(shí)器。因?yàn)閟etInterval定時(shí)器存在弊端：可能造成兩個(gè)動(dòng)畫(huà)間隔時(shí)間
縮短
12侥锦、盡量減少使用遞歸进栽。避免死遞歸
解決：建議使用尾遞歸
13、基于script標(biāo)簽下載js文件時(shí)恭垦，可以使用defer或者async來(lái)異步加載
14快毛、在事件綁定中格嗅，盡可能使用事件委托，減少循環(huán)給DOM元素綁定事件處理函數(shù)唠帝。
15屯掖、在js封裝過(guò)程中，盡量做到低耦合高內(nèi)聚襟衰。減少頁(yè)面的冗余代碼
16懂扼、減少Flash的使用
三、存儲(chǔ)
1右蒲、結(jié)合后端阀湿，利用瀏覽器的緩存技術(shù)，做一些緩存（讓后端返回304瑰妄，告訴瀏覽器去本地拉取數(shù)據(jù)）陷嘴。（注意：也有弊端）可以讓一些不太會(huì)改變的靜態(tài)資源做緩存。比如：一些圖片间坐，js灾挨，cs
2、利用h5的新特性（localStorage竹宋、sessionStorage）做一些簡(jiǎn)單數(shù)據(jù)的存儲(chǔ)劳澄，避免向后臺(tái)請(qǐng)求數(shù)據(jù)或者說(shuō)在離線狀態(tài)下做一些數(shù)據(jù)展示。
四蜈七、其他優(yōu)化
1秒拔、避免使用iframe不僅不好管控樣式，而且相當(dāng)于在本頁(yè)面又嵌套其他頁(yè)面飒硅，消耗性能會(huì)更大砂缩。因?yàn)檫€回去加載這個(gè)嵌套頁(yè)面的資源
2、頁(yè)面中的是數(shù)據(jù)獲取采用異步編程和延遲分批加載三娩，使用異步加載是數(shù)據(jù)主要是為了避免瀏覽器失去響應(yīng)庵芭。如果你使用同步，加載數(shù)據(jù)很大并且很慢
那么雀监，頁(yè)面會(huì)在一段時(shí)間內(nèi)處于阻塞狀態(tài)双吆。目的：為了解決請(qǐng)求數(shù)據(jù)不耽擱渲染，提高頁(yè)面的
渲染效率会前。解決方法：需要?jiǎng)討B(tài)綁定的是數(shù)據(jù)區(qū)域先隱藏好乐，等數(shù)據(jù)返回并且綁定后在讓其顯示
延遲分批加載類似圖片懶加載。減少第一次頁(yè)面加載時(shí)候的http請(qǐng)求次數(shù)
3回官、頁(yè)面中出現(xiàn)音視頻標(biāo)簽曹宴，我們不讓頁(yè)面加載的時(shí)候去加載這些資源（否則第一次加載會(huì)很慢）
解決方法：只需要將音視頻的preload=none即可。
目的：為了等待頁(yè)面加載完成時(shí)歉提，并且音視頻要播放的時(shí)候去加茲安音視頻資源
4笛坦、盡量將一個(gè)動(dòng)畫(huà)元素單獨(dú)設(shè)置為一個(gè)圖層（避免重繪或者回流的大星）
注意：圖層不要過(guò)多設(shè)置，否則不但效果沒(méi)有達(dá)到反而更差了
本文轉(zhuǎn)載于https://www.cnblogs.com/lanxiansen/p/10972802.html版扩；
分類: 原生JS废离；
