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

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

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

性能優(yōu)化

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

1.精靈圖

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

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

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

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

js操作元素樣式時,不要用style去直接添加樣式，一般屬性少時不會影響多少性能，其實則不然，在每次添加樣式時，頁面都會重繪一次，重繪是不得不重視的，操作樣式時，直接操作類名，只引起一次重繪，用style直接添加樣式會引起多次的重繪。

4.js直接操作dom節(jié)點

當操作節(jié)點時盡量將節(jié)點添加在元素的后面，如果插入到節(jié)點的前面時，會使插入節(jié)點之后的節(jié)點都引起回流，而插入到后面時只需要被插入的節(jié)點回流一次就可以了。

可能有人不理解重繪與回流的概念

5.正則匹配選擇器

在css3以及jQuery中的屬性選擇器，這些選擇器中有的是用正則進行匹配的盡量不要去使用，當然如果對于性能優(yōu)化不進行考慮的話，這些方法還是比較好用的，正則匹配選擇器會使搜索引擎搜索所有的標簽，很大的影響性能

6.js獲取元素優(yōu)化

在js中獲得元素時，正常是使用document.getElementsById，搜索引擎會從Dom樹的最底端，進行搜索，直到搜索到window中的document再進行返回搜索，所以在獲得元素時最好是將document.body進行儲存，當再次使用時，只需將這個變量取出使用，可以節(jié)省搜索引擎的性能

7.內存溢出

一般在遞歸運行時，會產生內存溢出，造成在運行遞歸時性能大幅度下降，在運行結束后內存會被系統(tǒng)回收，所以在運行遞歸時需要用對象將值保存，在每次遞歸運算時檢測，如果存在則直接返回，不存在則添加，這樣就可以解決遞歸的很大性能。

8.對Ajax用GET請求

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

9.延遲加載圖片

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

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

jquery.lazyload.js

10.避免圖片src屬性為空

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

<img src=””>

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

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

技巧

1.排他思想

先排除當前所有的，再進行下一次操作；一般在進行動畫、添加樣式等時,在二次操作時先清楚前面的樣式再從新添加新的樣式，避免同時進行動畫的沖突。

2.短路運算（||）

一般在一個值需要判斷是否存在時，盡量不要使用if語句,可以使用短路運算符，可以省去代碼占用的內存。比如：

a=a||b;

a存在則使用a，a不存在則使用b。

3.運算（&&）

可以運用在條件匹配時，以便條件的多余查詢，比如判斷一個對象是否為數(shù)組時，

a && a.length&& a.length>=0

4.偽數(shù)組以及數(shù)組

當需要封裝一個非數(shù)組元素變?yōu)橐粋€數(shù)組時，最簡單的辦法就是給其添加一個[],如果需要是一個偽數(shù)組時，可以給其設置一個length屬性。

5.節(jié)流閥

一般運用在動畫中，設定一個值，開始時設置為true，判斷其值，在進入動畫時給這個值賦值為false，在動畫結束時使用回調函數(shù)再重新賦值為true。

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

當在點擊一些按鈕時，有時會出現(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ōu)化。比如

obj=obj===undefined?Object:obj;

補充：

上述是自己在工作中，總結的前端優(yōu)化以及一些技巧與大家分享，如果大家有什么好的優(yōu)化以及技巧希望可以多多評論，個人認為技術是需要多溝通才可以更好的進步。