這篇文章主要介紹了前端性能優(yōu)化及技巧,需要的朋友可以參考下
前言 為什么要優(yōu)化性能對(duì)于前端工程師如此重要
在行業(yè)內(nèi)有句話不知道大家有沒(méi)有聽(tīng)說(shuō)過(guò)，‘懂得性能優(yōu)化并且研究過(guò)jquery源代碼的人和不懂得性能優(yōu)化寫(xiě)出來(lái)的代碼對(duì)于性能的消耗會(huì)相差上百倍甚至上千倍'，現(xiàn)在的javascript屬于從ECMAscript3到ECMAscript5以及ECMAscript6的一個(gè)過(guò)渡的過(guò)程。在javascript的編寫(xiě)不健全的時(shí)候編寫(xiě)代碼方法不得當(dāng)，引起的問(wèn)題也是不容忽視的。
性能優(yōu)化
下面將自己對(duì)于性能優(yōu)化的一些見(jiàn)解與大家分享；
1.精靈圖
最基本的是盡可能的將背景圖片做成精靈圖，減少圖片的請(qǐng)求，所以一般web工程師的另一項(xiàng)基礎(chǔ)本能就是精靈圖的制作。
2.css選擇器優(yōu)化
在css中要盡量的使用子代選擇器>,少使用后代選擇器，使用后代選擇器時(shí)，搜素引擎會(huì)將所有的后代元素都進(jìn)行搜索，如果我們使用子代選擇器時(shí)，可以將搜索的范圍縮小，從而減少搜索引擎的性能消耗。
3.js改變樣式直接操作類名
js操作元素樣式時(shí),不要用style去直接添加樣式，一般屬性少時(shí)不會(huì)影響多少性能，其實(shí)則不然，在每次添加樣式時(shí)，頁(yè)面都會(huì)重繪一次，重繪是不得不重視的，操作樣式時(shí)，直接操作類名，只引起一次重繪，用style直接添加樣式會(huì)引起多次的重繪。
4.js直接操作dom節(jié)點(diǎn)
當(dāng)操作節(jié)點(diǎn)時(shí)盡量將節(jié)點(diǎn)添加在元素的后面，如果插入到節(jié)點(diǎn)的前面時(shí)，會(huì)使插入節(jié)點(diǎn)之后的節(jié)點(diǎn)都引起回流，而插入到后面時(shí)只需要被插入的節(jié)點(diǎn)回流一次就可以了。
可能有人不理解重繪與回流的概念
5.正則匹配選擇器
在css3以及jQuery中的屬性選擇器，這些選擇器中有的是用正則進(jìn)行匹配的盡量不要去使用，當(dāng)然如果對(duì)于性能優(yōu)化不進(jìn)行考慮的話，這些方法還是比較好用的，正則匹配選擇器會(huì)使搜索引擎搜索所有的標(biāo)簽，很大的影響性能
6.js獲取元素優(yōu)化
在js中獲得元素時(shí)，正常是使用document.getElementsById，搜索引擎會(huì)從Dom樹(shù)的最底端，進(jìn)行搜索，直到搜索到window中的document再進(jìn)行返回搜索，所以在獲得元素時(shí)最好是將document.body進(jìn)行儲(chǔ)存，當(dāng)再次使用時(shí)，只需將這個(gè)變量取出使用，可以節(jié)省搜索引擎的性能
7.內(nèi)存溢出
一般在遞歸運(yùn)行時(shí)，會(huì)產(chǎn)生內(nèi)存溢出，造成在運(yùn)行遞歸時(shí)性能大幅度下降，在運(yùn)行結(jié)束后內(nèi)存會(huì)被系統(tǒng)回收，所以在運(yùn)行遞歸時(shí)需要用對(duì)象將值保存，在每次遞歸運(yùn)算時(shí)檢測(cè)，如果存在則直接返回，不存在則添加，這樣就可以解決遞歸的很大性能。
8.對(duì)Ajax用GET請(qǐng)求
POST請(qǐng)求是通過(guò)先發(fā)送HTTP請(qǐng)求頭，再發(fā)送數(shù)據(jù)來(lái)實(shí)現(xiàn)的，GET而是沒(méi)有請(qǐng)求頭的，但是需要注意：GET大小限制約4K，POST則沒(méi)有限制。
9.延遲加載圖片
在頁(yè)面發(fā)起請(qǐng)求時(shí)，請(qǐng)求量過(guò)大，可以使圖片進(jìn)行懶加載，當(dāng)頁(yè)面滾到到圖片的位置時(shí)，再進(jìn)行加載圖片。
下面給大家推薦一個(gè)圖片懶加載的插件
jquery.lazyload.js
10.避免圖片src屬性為空
src 屬性是空字符串的圖片很常見(jiàn)，主要以兩種形式出現(xiàn)：
<img src=””>
var img = new Image();img.src = “”;
這兩種形式都會(huì)引起相同的問(wèn)題：瀏覽器會(huì)向服務(wù)器發(fā)送另一個(gè)請(qǐng)求。
技巧
1.排他思想
先排除當(dāng)前所有的，再進(jìn)行下一次操作；一般在進(jìn)行動(dòng)畫(huà)、添加樣式等時(shí),在二次操作時(shí)先清楚前面的樣式再?gòu)男绿砑有碌臉邮?，避免同時(shí)進(jìn)行動(dòng)畫(huà)的沖突。
2.短路運(yùn)算（||）
一般在一個(gè)值需要判斷是否存在時(shí)，盡量不要使用if語(yǔ)句,可以使用短路運(yùn)算符，可以省去代碼占用的內(nèi)存。比如：
a=a||b;
a存在則使用a，a不存在則使用b。
3.運(yùn)算（&&）
可以運(yùn)用在條件匹配時(shí)，以便條件的多余查詢，比如判斷一個(gè)對(duì)象是否為數(shù)組時(shí)，
a && a.length&& a.length>=0
4.偽數(shù)組以及數(shù)組
當(dāng)需要封裝一個(gè)非數(shù)組元素變?yōu)橐粋€(gè)數(shù)組時(shí)，最簡(jiǎn)單的辦法就是給其添加一個(gè)[],如果需要是一個(gè)偽數(shù)組時(shí)，可以給其設(shè)置一個(gè)length屬性。
5.節(jié)流閥
一般運(yùn)用在動(dòng)畫(huà)中，設(shè)定一個(gè)值，開(kāi)始時(shí)設(shè)置為true，判斷其值，在進(jìn)入動(dòng)畫(huà)時(shí)給這個(gè)值賦值為false，在動(dòng)畫(huà)結(jié)束時(shí)使用回調(diào)函數(shù)再重新賦值為true。
6.解除文本的被動(dòng)選中狀態(tài)（純干貨）
當(dāng)在點(diǎn)擊一些按鈕時(shí)，有時(shí)會(huì)出現(xiàn)文本被選中的情況，讓客戶看見(jiàn)就猶如bug一般，以下是解除這一狀態(tài)的代碼，粘貼即可。
if(document.all){
document.onselectstart= function(){return false}; //for ie
}else{
document.onmousedown= function(){return false};
document.onmouseup= function(){return true};
}
document.onselectstart = new Function('event.returnValue=false');
7.巧妙使用三元運(yùn)算符
當(dāng)需要判斷一個(gè)值是否存在，也可以使用三元運(yùn)算符使代碼更加優(yōu)化。比如
obj=obj===undefined?Object:obj;
補(bǔ)充：
上述是自己在工作中，總結(jié)的前端優(yōu)化以及一些技巧與大家分享，如果大家有什么好的優(yōu)化以及技巧希望可以多多評(píng)論，個(gè)人認(rèn)為技術(shù)是需要多溝通才可以更好的進(jìn)步。
公眾號(hào)
事業(yè)單位
當(dāng)前位置：
公考類
招聘類
各類考試