HTML5中一些可以优化的细节介绍

介绍一些最近整理的优化细节。图片压缩什么的就不说了，这是优化必须做的。今天就说一下大家写代码时可以培养的优化的细节点。

不滥用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 stepcacheFk( ui ) //2 stepcacheFk( ui )

这是我看vue源码时发现的一段代码，作用就是可以缓存一个复杂函数的值，如果参数一样就不重复计算。但这里要注意的是，这个缓存函数是通过闭包来做的，所以要做一些权衡。

尽量减少layout。

// 触发两次 layoutvar newWidth = p.offsetWidth + 50;p.style.width = newWidth + px var newHeight = p.offsetHeight + 50;p.style.height = newHeight + px // 只触发一次 layoutvar newWidth = p.offsetWidth + 50;var newHeight = p.offsetHeight + 50;p.style.width = newWidth + px p.style.height = newHeight + px 

所有可触发layout的操作都会被暂时放入 layout-queue 中，等到必须更新的时候，再计算整个队列中所有操作影响的结果，如此就可只进行一次的layout，从而提升性能。

动画元素最好脱标，不影响其他模块。这样也是为了不影响其他元素。

transform代替position。

做一些css位移效果，最好用transform而不要用定位。我刚入门的时候用position做动画卡的一匹~~~

选择dom元素使用id，但不要为设置css而定义id。

如果用id选择器，就不要加其他html' target='_blank'>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) { 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++){ 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,增加白屏时间。所以一定要注意啊。

其实优化的细节很多，所以要好好培养自己的编码习惯，积少成多，慢慢的不断积累，代码的质量肯定就不同了。

以上就是HTML5中一些可以优化的细节介绍的详细内容，其它编程语言

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。