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

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

    性能優(yōu)化

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

    1.精靈圖

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

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

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

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

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

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

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

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

    5.正則匹配選擇器

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

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

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

    7.內(nèi)存溢出

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

    8.對Ajax用GET請求

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

    9.延遲加載圖片

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

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

jquery.lazyload.js

   10.避免圖片src屬性為空

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

    <img src=””>

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

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

    技巧
        1.排他思想

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

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

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

 a=a||b;

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

        3.運(yùn)算（&&）

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

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

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

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

        5.節(jié)流閥

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

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

    當(dāng)在點擊一些按鈕時，有時會出現(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)需要判斷一個值是否存在，也可以使用三元運(yùn)算符使代碼更加優(yōu)化。比如

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

        補(bǔ)充：

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

最新評論