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

DisplayNone發表於2019-02-16
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,增加白屏時間。所以一定要注意啊。

其實優化的細節很多，所以要好好培養自己的編碼習慣，積少成多，慢慢的不斷積累，程式碼的質量肯定就不同了。 最後祝大家身體健康。

相關文章