首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >在网页上加载图片的最快方法是哪一种?

在网页上加载图片的最快方法是哪一种?
EN

Stack Overflow用户
提问于 2011-08-30 01:38:43
回答 2查看 728关注 0票数 1

我正在建设一个新的网站,并在基础阶段,我试图评估最好的方式加载图像。浏览器有2-6项的限制,它可以同时加载(映像/css/js)。通过小道消息,我听到了各种不同的方法,但没有确切的答案,实际上哪一个更快。

相对URL:

代码语言:javascript
运行
复制
background-image: url(images/image.jpg);

绝对URL:

代码语言:javascript
运行
复制
background-image: url(http://site.com/images/image.jpg);

绝对URL(带有子域):

代码语言:javascript
运行
复制
background-image: url(http://fakecdn.site.com/images/image.jpg);
  1. 浏览器是否会将我的"fakecdn“子域识别为不同的域,并同时在一个单独的线程中从它加载图像?
  2. @import CSS文件中引用的图像是否加载在单独的线程中?
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2011-08-30 01:44:24

HTTP1.1规范建议浏览器不能打开与给定域的两个以上连接。

使用持久连接的客户端应该限制它们维护到给定服务器的同时连接的数量。单用户客户端与任何服务器或代理的连接不得超过2个.

因此,如果您正在加载许多中等大小的映像,那么将它们放在单独的FQDN上可能是有意义的,这样2连接限制就不会成为瓶颈。对于小型映像,每个FQDN都需要一个新的套接字连接,这可能会超过好处。同样,对于大型图像,客户端网络带宽可能是限制因素。

如果图像总是被显示出来,那么使用数据uri可能是最简单的,因为不需要单独的连接,并且图像可以按所需的顺序包括在流中。

但是,一如既往的为性能优化,配置文件第一!

看见

  • 维基百科-数据uri
票数 3
EN

Stack Overflow用户

发布于 2011-08-30 17:23:17

对于很多小图片,社交媒体图标就是一个很好的例子,你也会想要把它们合并成一个精灵地图。这样,它们都将加载到相同的请求中,您只需在使用它们时做一些后台定位。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/7237867

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档