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,增长白屏时间。因此必定要注意啊。

其实优化的细节不少，因此要好好培养本身的编码习惯，聚沙成塔，慢慢的不断积累，代码的质量确定就不一样了。 最后祝你们身体健康。