html – 哪种方式来加载巨大的图像(canvas vs img vs background

发布时间：2020-12-14 18:49:35 所属栏目：资源来源：网络整理

导读：我想要的是目前我有一个4000×4000的png图像.使用tinypng.org后,它成为一个288KB的文件. 现在我想要加载图像的斋戒方法,将其放在DOM中,并可以在其上绘制大量画布. 我测试了一些,结果令我震惊. 我测试了我做了3个测试,只检查负载速度. (423ms) canvas (138m

我想要的是

目前我有一个4000×4000的png图像.使用tinypng.org后,它成为一个288KB的文件.

现在我想要加载图像的斋戒方法,将其放在DOM中,并可以在其上绘制大量画布.

我测试了一些,结果令我震惊.

我测试了

我做了3个测试,只检查负载速度.

>(423ms)< canvas>
>(138ms)< img>
>(501ms)CSS background-image

< img>标签是最快的.

题

那么使用< img>是不好的做法标签显示一个巨大的(背景)图像,并使用一些脏CSS来绘制画布？

或者在我的情况下使用画布更好,不用担心更长的加载时间？

解决方法

很好的问题！这是相关的： When to use IMG vs. CSS background-image?

从该文章中,如果人们打算打印您的页面,则不会使用< img> – 这样会出现在印刷品上.这同样适用于< canvas>,使background-image成为逻辑解决方案.

如何通过CSS添加您的背景图片？是内联还是通过自己的样式表？如果使用自己的样式表,在测试速度之前是否尝试过compressing the CSS？

这也是有关的,我想：Do Images Load Faster in HTML or CSS?

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!