前端效能優化及技巧_javascript技巧

    前言        為何最佳化效能與前端工程師重要

          在業界有句話不知道大家有沒有聽說過，'懂得性能優化並且研究過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

   10.避免图片src属性为空

    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;

        补充：

        上述是自己在工作中，总结的前端优化以及一些技巧与大家分享，如果大家有什么好的优化以及技巧希望可以多多评论，个人认为技术是需要多沟通才可以更好的进步。