這篇文章主要介紹了前端性能優(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.內存溢出
一般在遞歸運行時，會產(chǎn)生內存溢出，造成在運行遞歸時性能大幅度下降，在運行結束后內存會被系統(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)化以及技巧希望可以多多評論，個人認為技術是需要多溝通才可以更好的進步。
公眾號
事業(yè)單位
當前位置：
公考類
招聘類
各類考試