h5性能優化，細節決定結果。

介紹一些最近整理的優化細節。圖片壓縮什麼的就不說了，這是優化必須作的。今天就說一下你們寫代碼時能夠培養的優化的細節點。

• 不濫用float。不濫用web字體。

Float在渲染時計算量比較大，而且會脫標、塌陷。咱們能夠用flex佈局來代替。web字體引入須要不小的消耗，最好跟設計提一下不要太多。

• css中避免多餘的樣式設置。

color、font、line-height等都是能夠繼承的，因此他們的子元素若是屬性同樣就要重複寫了，特別是font-family。

• 複雜的一個方法，能夠緩存函數的返回值。

function cached (fn) {
    var cache = Object.create(null);
    return (function cachedFn (str) {
        var hit = cache[str];
        return hit || (cache[str] = fn(str))
    })
};
var fk = function (str) {
  return str.charAt(0).toUpperCase() + str.slice(1)
}
var cacheFk = cached(fk)
// 1 step
cacheFk('ui') 
//2 step
cacheFk('ui')

這是我看vue源碼時發現的一段代碼，做用就是能夠緩存一個複雜函數的值，若是參數同樣就不重複計算。但這裏要注意的是，這個緩存函數是經過閉包來作的，因此要作一些權衡。

• 儘可能減小layout。

// 觸發兩次 layout
var newWidth = Div.offsetWidth + 50;
Div.style.width = newWidth + 'px';
var newHeight = Div.offsetHeight + 50;
Div.style.height = newHeight + 'px';

// 只觸發一次 layout
var newWidth = Div.offsetWidth + 50;
var newHeight = Div.offsetHeight + 50;
Div.style.width = newWidth + 'px';
Div.style.height = newHeight + 'px';

全部可觸發layout的操做都會被暫時放入 layout-queue 中，等到必須更新的時候，再計算整個隊列中全部操做影響的結果，如此就可只進行一次的layout，從而提高性能。

動畫元素最好脫標，不影響其餘模塊。這樣也是爲了避免影響其餘元素。

• transform代替position。

作一些css位移效果，最好用transform而不要用定位。我剛入門的時候用position作動畫卡的一匹~~~

• 選擇dom元素使用id，但不要爲設置css而定義id。

若是用id選擇器，就不要加其餘class約束。定義過多id會使重用性下降，維護更困難，因此css中不建議多用id。

• 屢次使用length的時候，要用變量保存。

var len = dom.length;
for(var i = 0;i < len;i++){}；

這樣好處就是每次循環，不用都計算dom的長度了。

• requestAnimationFrame代替setTimeout

var start = null;
var element = document.getElementById('SomeElementYouWantToAnimate');
element.style.position = 'absolute';

function step(timestamp) {
  if (!start) start = timestamp;
  var progress = timestamp - start;
  element.style.left = Math.min(progress / 10, 200) + 'px';
  if (progress < 2000) {
    window.requestAnimationFrame(step);
  }
}

window.requestAnimationFrame(step);
//window.requestAnimationFrame(callback);
返回值是一個 long 整數，請求 ID ，是回調列表中惟一的標識。是個非零值，沒別的意義。你能夠傳這個值給 window.cancelAnimationFrame() 以取消回調函數。

requestAnimationFrame就是不用設置時間的定時器，每1/60s運行一次，這是根據瀏覽器刷新幀數來定的。但兼容是個問題，用的話須要寫好兼容。

• 若是能夠，儘可能避免全局查找。

//dom = document.querySelector("#id");
function test() {
    dom = document.querySelector("#id");
}

好比上面的，若是隻作test內使用dom 就不要在全局定義，由於執行的時候會如今test函數內部做用域查找，速度會快。

• 除非不知道遍歷的長度或者遍歷對象 不要用for in

function t1(){        //20ms
        var i = 0;
       for(item in anObj) {
           i++
       }
       if( i === 100000){
           console.log('for in ok')
       }
    }
    function t2(){     //4ms
        var len = anObj.length;
        var i = 0;
        for(var i = 0 ;i < len;i++){
            i++
        }
        if( i === 100000){
            console.log('for ok')
        }
    }

這是我本身試驗循環100000個元素的數組，得出的執行時間（看代碼）。因此最好別用，通常實際也不會用到遍歷對象。若是真有特殊狀況遍歷對象，也要注意 ！！！遍歷出來的東西是否是本身。覺得for in是會遍歷其原型鏈的。

• 骨架屏

這個是加強用戶體驗，相似加強版loading。有自動化生成方案。感興趣能夠看看。

• ios禁止頁面識別手機號。Android禁止識別郵箱。

<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="email=no" />

• 頭部css 底部js。

這個你們都知道，js將阻塞解析dom,增長白屏時間。因此必定要注意啊。

其實優化的細節不少，因此要好好培養本身的編碼習慣，聚沙成塔，慢慢的不斷積累，代碼的質量確定就不一樣了。 最後祝你們身體健康。