您当前的位置:主页 > 教程合集 > Html/css网站首页Html/css

前端设计中background与img的优劣对比

发布时间:2016-03-19编辑:余斗阅读:(0)字号:
    我们在前端设计特别是移动端的前端页面的时候,展示某一张图片的方法有两种:一是通过CSS的background样式,二是通过html标签中的img src加上。其实在余斗大学学习HTML的时候就一直在想这个问题,background与img究竟哪个才是最优的?我们应该在哪些情况下用? 在揭示着两个问题之前,我们先了解一个浏览器的渲染机制:html代码会被优先解析,而css代码则是在html解析完之后再执行,这也无形中告知我们,img方法会比background方法更快速的显示图片。 接下来,余斗就结合平时的需求对两者关于加载速度、FPS、动画性能这些方面进行对比。 测试前的准备 两个demo中分别使用background-image方式和img src方式对图片展示,页面中均有500个DOM,分别对速度、FPS、动画流畅性等方面进行测试比较。 一、加载速度 测试网络为wifi环境(百兆光纤),忧郁实现方式不同所以页面的代码体积大小也是不一样的。两个测试文件中,background页面完全加载成功后带小奥为337kb,儿img页面完全加载成功后大小为347kb。两个demo页面加载后的大小主要是受css和html代码影响,其中background页面中的css代码量多,html代码量少;而img页面中css代码量较少,而html代码量多。 所以余斗在页面中各放置了500个DOM,html的代码量剧增,最终会使img页面比background页面大一些。 这里使用 Navigation Timing API测试页面加载时间。测试代码如下:

    window.onload = function() {
                    setTimeout(function() {
                            var t = performance.timing;
                            console.log("页面速度: " + (t.loadEventEnd - t.responseEnd) + " ms");
                    }, 0);
    };
     
    测试数据为(ms): 前端设计中background与img的优劣对比 从上面的数据可以看出background页面和img页面加载速度差异不大,再结合前面所说的“img页面会比background页面大一些”,最终我们可以得到结论:两者加载速度差异不大。在极端情况下,img页面实现方式会稍微快一些。 二、FPS测试 两者实现方式的本质都是将图片渲染出来,在理论上来说,两者应该差别不大,但还是做了数据统计,见下表: 前端设计中background与img的优劣对比 从这里的数据显示得到结论:两者FPS差异不大。 三、动画性能 在两个demo页面中,使用css3的transform:rotate实现从0度到360度循环旋转动画。 测试得到GPU数据为: 前端设计中background与img的优劣对比 上面数据中显示,background页面实现方式GPU使用会在0~30之间波动;img页面实现方式GPU则一直保持在6.2。在比较低端手机上体验的时候,也很明显的感受到background页面的动画会出现一些卡顿,而img页面的动画则非常流畅。从这里可以得出结论:在动画方面,img实现方式比background实现方式性能会更好,可以提高动画性能。 余斗总结 结合其他一些比较重要的方面,最后做个总结: * 在对页面加载速度方面,两者差别不大; * 做动画的时候,尽量选择使用img标签,性能会更好一些; * 在SEO语义化方面,background完全不沾边,img语义清晰明了; * background结合css sprite可以优化页面加载速度; * 重要图片建议使用img标签,在页面加载时可以优先显示;
     
    文章参考自前端开发_觉唯《棋逢对手:background对比img》
关键字词HTML CSS background img
余斗余斗
  1. 转载请注明: 前端设计中background与img的优劣对比_余斗余斗_鸿运国际手机登录首页
  2. 版权声明: 本站原创文章,由 发表在 Html/css 分类下,于2016-03-19最后更新
利用CSS3实现图片的毛玻璃效果
一些实用的Html和Css技巧推荐
手机扫一扫 随身带着看
鸿运国际手机登录首页