在行業內有句話不知道大家有沒有聽說過,‘懂得性能優化並且研究過jquery源代碼的人和不懂得性能優化寫出來的代碼對於性能的消耗會相差上百倍甚至上千倍’,現在的javascript屬於從ECMAscript3到ECMAscript5以及ECMAscript6的一個過渡的過程。在javascript的編寫不健全的時候編寫代碼方法不得當,引起的問題也是不容忽視的。
性能優化
下面將自己對於性能優化的一些見解與大家分享;
1.精靈圖
最基本的是盡可能的將背景圖片做成精靈圖,減少圖片的請求,所以一般web工程師的另一項基礎本能就是精靈圖的制作。
2.css選擇器優化
在css中要盡量的使用子代選擇器>,少使用後代選擇器,使用後代選擇器時,搜素引擎會將所有的後代元素都進行搜索,如果我們使用子代選擇器時,可以將搜索的范圍縮小,從而減少搜索引擎的性能消耗。
3.js改變樣式直接操作類名
js操作元素樣式時,不要用style去直接添加樣式,一般屬性少時不會影響多少性能,其實則不然,在每次添加樣式時,頁面都會重繪一次,重繪是不得不重視的,操作樣式時,直接操作類名,只引起一次重繪,用style直接添加樣式會引起多次的重繪。
4.js直接操作dom節點
當操作節點時盡量將節點添加在元素的後面,如果插入到節點的前面時,會使插入節點之後的節點都引起回流,而插入到後面時只需要被插入的節點回流一次就可以了。
可能有人不理解重繪與回流的概念,給大家推薦一個網址:
點這裡
5.正則匹配選擇器
在css3以及jQuery中的屬性選擇器,這些選擇器中有的是用正則進行匹配的盡量不要去使用,當然如果對於性能優化不進行考慮的話,這些方法還是比較好用的,正則匹配選擇器會使搜索引擎搜索所有的標簽,很大的影響性能
6.js獲取元素優化
在js中獲得元素時,正常是使用document.getElementsById,搜索引擎會從Dom樹的最底端,進行搜索,直到搜索到window中的document再進行返回搜索,所以在獲得元素時最好是將document.body進行儲存,當再次使用時,只需將這個變量取出使用,可以節省搜索引擎的性能
7.內存溢出
一般在遞歸運行時,會產生內存溢出,造成在運行遞歸時性能大幅度下降,在運行結束後內存會被系統回收,所以在運行遞歸時需要用對象將值保存,在每次遞歸運算時檢測,如果存在則直接返回,不存在則添加,這樣就可以解決遞歸的很大性能。
8.對Ajax用GET請求
POST請求是通過先發送HTTP請求頭,再發送數據來實現的,GET而是沒有請求頭的,但是需要注意:GET大小限制約4K,POST則沒有限制。
9.延遲加載圖片
在頁面發起請求時,請求量過大,可以使圖片進行懶加載,當頁面滾到到圖片的位置時,再進行加載圖片。
下面給大家推薦一個圖片懶加載的插件
jquery.lazyload.js
插件下載地址:http://download.csdn.net/download/lwpxx/5179738
10.避免圖片src屬性為空
src 屬性是空字符串的圖片很常見,主要以兩種形式出現:
img.src = “”
var img = new Image();img.src = “”;
這兩種形式都會引起相同的問題:浏覽器會向服務器發送另一個請求。
技巧
1.排他思想
先排除當前所有的,再進行下一次操作;一般在進行動畫、添加樣式等時,在二次操作時先清楚前面的樣式再從新添加新的樣式,避免同時進行動畫的沖突。
2.短路運算(||)
一般在一個值需要判斷是否存在時,盡量不要使用if語句,可以使用短路運算符,可以省去代碼占用的內存。比如:
a=a||b;
a存在則使用a,a不存在則使用b。
3.運算(&&)
可以運用在條件匹配時,以便條件的多余查詢,比如判斷一個對象是否為數組時,
a && a.length&& a.length>=0
4.偽數組以及數組
當需要封裝一個非數組元素變為一個數組時,最簡單的辦法就是給其添加一個[],如果需要是一個偽數組時,可以給其設置一個length屬性。
5.節流閥
一般運用在動畫中,設定一個值,開始時設置為true,判斷其值,在進入動畫時給這個值賦值為false,在動畫結束時使用回調函數再重新賦值為true。
6.解除文本的被動選中狀態(純干貨)
當在點擊一些按鈕時,有時會出現文本被選中的情況,讓客戶看見就猶如bug一般,以下是解除這一狀態的代碼,粘貼即可。
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.巧妙使用三元運算符
當需要判斷一個值是否存在,也可以使用三元運算符使代碼更加優化。比如
obj=obj===undefined?Object:obj;
補充:
上述是自己在工作中,總結的前端優化以及一些技巧與大家分享,如果大家有什麼好的優化以及技巧希望可以多多評論,個人認為技術是需要多溝通才可以更好的進步。
