发布网友 发布时间:2022-05-04 07:52
共2个回答
懂视网 时间:2022-04-21 15:36
在制作移动端页面时,展示图片的方法是一般是通过css background样式或者加在img src标签上。然而,久而久之习惯了使用,却忘记思考哪个才是最优的?我们是否真正理解两者之前的区别?两者对比各有什么优劣势呢? 让我们先看一下这两种方式的基本概念。background属于css方法,img属于html标签。按照浏览器的渲染机制,html标签会被优先解析,而css则是在html解析完成后再执行。从这里也能够得到一个信息:img方法比background方法能更加快速的显示图片。
接下来个人结合日常项目需求对两者关于加载速度、FPS、动画性能等方面进行对比:
两个demo中分别使用background-image方式和img src方式对图片展示,页面中均有500个DOM,分别对速度、FPS、动画流畅性等方面进行测试比较。
测试网络情况为Regular 3g(750kb/s 100ms RTT)。 由于实现方式不同所以页面的代码体积大小是不一样的。两个测试文件中,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):
平均值 | |||||||||||
backgruound | 3356 | 3352 | 3350 | 3354 | 3353 | 3354 | 3353 | 3353 | 3354 | 3352 | 3353.1 |
img | 3216 | 3238 | 3224 | 3224 | 3230 | 3222 | 3225 | 3229 | 3212 | 3215 | 3223.5 |
从上面的数据可以看出background页面和img页面加载速度差异不大,再结合前面所说的“img页面会比background页面大一些”,最终我们可以得到结论: 两者加载速度差异不大。在极端情况下,img页面实现方式会稍微快一些。
两者实现方式的本质都是将图片渲染出来,在理论上来说,两者应该差别不大,但还是做了数据统计,见下表:
平均值 | |||||||||||
backgruound | 16.0 | 17.7 | 18.6 | 17.7 | 17.3 | 16.2 | 17.7 | 20 | 19.1 | 16.9 | 17.72 |
img | 19 | 16.9 | 20 | 18.5 | 19 | 16.2 | 15.7 | 17.8 | 19 | 21 | 18.31 |
从这里的数据显示得到结论:两者FPS差异不大。
在两个demo页面中,使用css3的transform:rotate实现从0度到360度循环旋转动画。演示地址:
(img页面)
(background页面)
测试得到GPU数据为:
平均值 | |||||||||||
backgruound | 11 | 14 | 15 | 23 | 30 | 11.1 | 25 | 26.9 | 25 | 12 | 19.3 |
img | 6.2 | 6.2 | 6.2 | 6.2 | 6.2 | 6.2 | 6.2 | 6.2 | 6.2 | 6.2 | 6.2 |
上面数据中显示,background页面实现方式GPU使用会在0~30之间波动;img页面实现方式GPU则一直保持在6.2。在比较低端手机上体验的时候,也很明显的感受到background页面的动画会出现一些卡顿,而img页面的动画则非常流畅。从这里可以得出结论: 在动画方面,img实现方式比background实现方式性能会更好,可以提高动画性能。
结合其他一些比较重要的方面,最后做个总结:
感谢大家阅读,欢迎一起探讨。
热心网友 时间:2022-04-21 12:44
没有下一句,这就是一句话。
1、棋逢对手,双方不相上下。旗鼓相当。比喻双方本领相当,不相上下。
出处:南宋计有功《唐诗纪事》卷七十七,“事厄伤心否,棋逢对手无?”。
译文:不好的事情遇到了会伤心吧,双方本领相当,不相上下吗?
用法:主谓式;作谓语、宾语、分句;含褒义;指能手碰到能手。
2、将遇良才都是能力好的人;本句比喻相对二人能力相当。
出处: 明·施耐庵《水浒传》第三十四回:“两个就清风山下厮杀,乃是棋逢敌手难藏幸,将遇良才好用功。”
译文:两个人在清风山下厮杀,都是本领相当,不相上下呀。
用法:主谓式;作谓语、定语;常与棋逢对手连用。
棋逢对手的相关典故:
晚唐时期,有位名叫释尚颜的和尚非常喜欢下围棋,因下棋结识了那个时期的诗人陆龟蒙。陆龟蒙是姑苏人,自幼聪明伶俐,曾经考过进士但没有考中,但他做过湖、苏二州的从事,因不满时世后隐居松江莆里,且不受征召。
释尚颜在陆龟蒙不在的时候非常怀念这位棋友,并作过一首诗,诗中有两句为:“事厄伤心否,棋逢对手无?”表达对棋友的同情和思念。