如果设备支持视网膜，Apple.com 总是先显示标准图像，然后使用 javascript 加载视网膜图像。
我想知道为什么苹果不直接使用 CSS 媒体查询来减少 HTTP 请求？
问问题
1026 次
3 回答
7
简短的回答——浏览器预取。
除了使用 JS 之外，他们无能为力：
- 做媒体查询测试，使用 JS，如果支持的话，填写 HQ-images
- 如果支持，请进行媒体查询测试，使用 JS 并填写 CSS 样式表（其中包含 url 声明）。
这里的目标不是减少 HTTP 请求。目标是减少并发的HTTP 请求，对于大量冗余的数据 - 如果浏览器不支持高分辨率版本，但无论如何都被迫使用该带宽，则更是如此。
做 JS 的好处：
- 页面加载速度更快，因为它只是正在下载的较轻的媒体
- 页面加载期间的 HTTP 请求更少。当你请求 HQ 图像时，页面的其余部分已经设置好了，所以“额外请求”会减慢体验一点点（除非他们对 DOM 访问等做了一些愚蠢的事情——但那是普遍真理）
最终，该<picture>规范结合元素的srcset=和media=属性<source>，将允许一种无 JS 的方法，允许浏览器智能地处理媒体，基于它们自己的内部查询和页面分析（例如：是 LTE 上的用户连接，或者他们现在在山上的某个地方使用 2G 网络）。
于 2012-08-20T06:00:08.483 回答
3
为了节省初始加载时间。特别是在无线/3g 等慢速/不稳定的连接上。
如果您查看图像替换代码 ( https://gist.github.com/2029936 ) 的美化源，特别是函数 __replaceNextQueue，您会注意到它在实际替换图像之前设置了超时。
这样做是为了确保在开始请求新图像之前浏览器事件队列已经完成，其中包括 UI 的初始绘制。这允许浏览器下载较小（文件大小）的图像，并且用户可以在开始处理较大的图像之前开始执行他们的新操作。
将较大的图像下载推迟到 UI 的初始绘制之后会节省时间，尤其是在连接速度较慢的情况下。
于 2012-08-20T06:11:17.867 回答
2
因为不是所有的图像都是通过 CSS 加载的，所以有些是 HTML 的。
于 2012-08-20T05:43:44.253 回答