這篇文章主要介紹了前端性能優(yōu)化及技巧,需要的朋友可以參考下

前言 為什么要優(yōu)化性能對(duì)于前端工程師如此重要

在行業(yè)內(nèi)有句話不知道大家有沒有聽說過，‘懂得性能優(yōu)化并且研究過jquery源代碼的人和不懂得性能優(yōu)化寫出來的代碼對(duì)于性能的消耗會(huì)相差上百倍甚至上千倍'，現(xiàn)在的javascript屬于從ECMAscript3到ECMAscript5以及ECMAscript6的一個(gè)過渡的過程。在javascript的編寫不健全的時(shí)候編寫代碼方法不得當(dāng)，引起的問題也是不容忽視的。

性能優(yōu)化

下面將自己對(duì)于性能優(yōu)化的一些見解與大家分享；

1.精靈圖

最基本的是盡可能的將背景圖片做成精靈圖，減少圖片的請求，所以一般web工程師的另一項(xiàng)基礎(chǔ)本能就是精靈圖的制作。

2.css選擇器優(yōu)化

在css中要盡量的使用子代選擇器>,少使用后代選擇器，使用后代選擇器時(shí)，搜素引擎會(huì)將所有的后代元素都進(jìn)行搜索，如果我們使用子代選擇器時(shí)，可以將搜索的范圍縮小，從而減少搜索引擎的性能消耗。

3.js改變樣式直接操作類名

js操作元素樣式時(shí),不要用style去直接添加樣式，一般屬性少時(shí)不會(huì)影響多少性能，其實(shí)則不然，在每次添加樣式時(shí)，頁面都會(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樹的最底端，進(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í)檢測，如果存在則直接返回，不存在則添加，這樣就可以解決遞歸的很大性能。

8.對(duì)Ajax用GET請求

POST請求是通過先發(fā)送HTTP請求頭，再發(fā)送數(shù)據(jù)來實(shí)現(xiàn)的，GET而是沒有請求頭的，但是需要注意：GET大小限制約4K，POST則沒有限制。

9.延遲加載圖片

在頁面發(fā)起請求時(shí)，請求量過大，可以使圖片進(jìn)行懶加載，當(dāng)頁面滾到到圖片的位置時(shí)，再進(jìn)行加載圖片。

下面給大家推薦一個(gè)圖片懶加載的插件

jquery.lazyload.js

10.避免圖片src屬性為空

src 屬性是空字符串的圖片很常見，主要以兩種形式出現(xiàn)：

<img src=””>

var img = new Image();img.src = “”;

這兩種形式都會(huì)引起相同的問題：瀏覽器會(huì)向服務(wù)器發(fā)送另一個(gè)請求。

技巧

1.排他思想

先排除當(dāng)前所有的，再進(jìn)行下一次操作；一般在進(jìn)行動(dòng)畫、添加樣式等時(shí),在二次操作時(shí)先清楚前面的樣式再從新添加新的樣式，避免同時(shí)進(jìn)行動(dòng)畫的沖突。

2.短路運(yùn)算（||）

一般在一個(gè)值需要判斷是否存在時(shí)，盡量不要使用if語句,可以使用短路運(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í)，最簡單的辦法就是給其添加一個(gè)[],如果需要是一個(gè)偽數(shù)組時(shí)，可以給其設(shè)置一個(gè)length屬性。

5.節(jié)流閥

一般運(yùn)用在動(dòng)畫中，設(shè)定一個(gè)值，開始時(shí)設(shè)置為true，判斷其值，在進(jìn)入動(dòng)畫時(shí)給這個(gè)值賦值為false，在動(dòng)畫結(jié)束時(shí)使用回調(diào)函數(shù)再重新賦值為true。

6.解除文本的被動(dòng)選中狀態(tài)（純干貨）

當(dāng)在點(diǎn)擊一些按鈕時(shí)，有時(shí)會(huì)出現(xià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)步。