为什么apple.com使用javascript动态加载视网膜图像而不是媒体查询？
作者：互联网
Apple.com始终首先显示标准图像,然后使用javascript加载视网膜图像(如果设备支持视网膜).
我想知道苹果为什么不直接使用CSS媒体查询来减少HTTP请求？
解决方法:
简答 – 浏览器预取.
除了使用JS之外,他们无能为力：
>进行媒体查询测试,使用JS,并在有支持的情况下填写HQ图像
>进行媒体查询测试,使用JS并填写CSS样式表(其中包含url声明),如果有支持的话.
这里的目标不是减少HTTP请求.目标是减少并发HTTP请求,对于大部分冗余的数据 – 甚至更多,如果浏览器不支持高分辨率版本,但无论如何都被迫使用该带宽.
做JS事情的好处：
>页面加载速度更快,因为它只是下载的较轻的媒体
>页面加载期间的HTTP请求更少.当您请求HQ图像时,页面的其余部分已经设置,因此“额外请求”将减慢体验而不是一点(除非他们使用DOM访问做一些愚蠢的事情,或者类似 – 但是普遍真理)
最终,< picture> spec,与< source>的srcset =和media =属性一起使用元素,将允许一个允许浏览器智能处理媒体的无JS方法,基于他们自己的内部查询和页面分析(例如：是LTE连接上的用户,还是他们在山上的2G,在某处在这一刻).
标签：javascript,css,media-queries,retina-display 来源： https://codeday.me/bug/20190715/1469451.html