前端性能優化及技巧

爲何要優化性能對於前端工程師如此重要

          在行業內有句話不知道你們有沒有據說過，‘懂得性能優化而且研究過jquery源代碼的人和不懂得性能優化寫出來的代碼對於性能的消耗會相差上百倍甚至上千倍’，如今的javascript屬於從ECMAscript3到ECMAscript5以及ECMAscript6的一個過渡的過程。在javascript的編寫不健全的時候編寫代碼方法不得當，引發的問題也是不容忽視的。

 

 

    性能優化

---

    下面將本身對於性能優化的一些看法與你們分享；

    1.精靈圖

      最基本的是儘量的將背景圖片作成精靈圖，減小圖片的請求，因此通常web工程師的另外一項基礎本能就是精靈圖的製做。

    2.css選擇器優化

        在css中要儘可能的使用子代選擇器>,少使用後代選擇器，使用後代選擇器時，搜素引擎會將全部的後代元素都進行搜索，若是咱們使用子代選擇器時，能夠將搜索的範圍縮小，從而減小DOM引擎的性能消耗。

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

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

    4.js直接操做dom節點

      當操做節點時儘可能將節點添加在元素的後面，若是插入到節點的前面時，會使插入節點以後的節點都引發迴流，而插入到後面時只須要被插入的節點回流一次就能夠了。

    可能有人不理解重繪與迴流的概念，給你們推薦一個網址：

    http://www.zhangxinxu.com/wordpress/2010/01/%E5%9B%9E%E6%B5%81%E4%B8%8E%E9%87%8D%E7%BB%98%EF%BC%9Acss%E6%80%A7%E8%83%BD%E8%AE%A9javascript%E5%8F%98%E6%85%A2%EF%BC%9F/

    5.正則匹配選擇器

       在css3以及jQuery中的屬性選擇器，這些選擇器中有的是用正則進行匹配的儘可能不要去使用，固然若是對於性能優化不進行考慮的話，這些方法仍是比較好用的，正則匹配選擇器會使DOM引擎搜索全部的標籤，很大的影響性能

    6.js獲取元素優化

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

    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;

        

        補充：

        上述是本身在工做中，總結的前端優化以及一些技巧與你們分享，若是你們有什麼好的優化以及技巧但願能夠多多評論，我的認爲技術是須要多溝通才能夠更好的進步。