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


本文摘自PHP中文网,作者不言,侵删。

本篇文章给大家带来的内容是关于HTML5中一些可以优化的细节介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

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

  • 不滥用float。不滥用web字体。

Float在渲染时计算量比较大,并且会脱标、塌陷。我们可以用flex布局来代替。web字体引入需要不小的消耗,最好跟设计提一下不要太多。

  • css中避免多余的样式设置。

color、font、line-height等都是可以继承的,所以他们的子元素如果属性一样就要重复写了,特别是font-family。

  • 复杂的一个方法,可以缓存函数的返回值。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

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。

1

2

3

4

5

6

7

8

9

10

11

// 触发两次 layout

var newWidth = p.offsetWidth + 50;

p.style.width = newWidth + 'px';

var newHeight = p.offsetHeight + 50;

p.style.height = newHeight + 'px';

 

// 只触发一次 layout

var 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选择器,就不要加其他class约束。定义过多id会使重用性降低,维护更困难,所以css中不建议多用id。

  • 多次使用length的时候,要用变量保存。

1

2

var len = dom.length;

for(var i = 0;i < len;i++){};

这样好处就是每次循环,不用都计算dom的长度了。

  • requestAnimationFrame代替setTimeout

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

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运行一次,这是根据浏览器刷新帧数来定的。但兼容是个问题,用的话需要写好兼容。

  • 如果可以,尽量避免全局查找。

1

2

3

4

//dom = document.querySelector("#id");

function test() {

    dom = document.querySelector("#id");

}

比如上面的,如果只做test内使用dom 就不要在全局定义,因为执行的时候会现在test函数内部作用域查找,速度会快。

  • 除非不知道遍历的长度或者遍历对象 不要用for in

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

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禁止识别邮箱。

1

2

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

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

  • 头部css 底部js。

这个大家都知道,js将阻塞解析dom,增加白屏时间。所以一定要注意啊。

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

以上就是HTML5中一些可以优化的细节介绍的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

Html css是什么

javascript中怎么将json对象转为字符串

Html dl标签作用是什么?Html dl标签的属性介绍和使用方法详解

Html5 canvas实现粒子时钟的示例代码

一分钟带你了解css兼容ie的写法

深入浅出了解javascript的node中间件原理

css网页布局小技巧

javascript怎么将数字转换成时间

javascript如何去掉字符串重复值

Html表格的标签是什么

更多相关阅读请进入《Html》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...