css - 在网络上加载高分辨率图像是否有良好的非阻塞模式？

Question

我有一个样式表 ( hi-dpi.css )，它包含一堆更高分辨率的 Assets ，其中许多是内联的(数据 URI)。但目前它会阻止页面呈现。

解决这个问题的最佳方法是什么？

也许写<link rel=stylesheet>页后标记 load ？

Answer 1

在深入探讨之前，我不得不问这个问题，但在 CSS 中是否真的有必要拥有大量“高分辨率资源”？我的意思是，也许这只是我，但是......

所以这是我的建议:加载除“原始样式表”中的数据 uri 之外的所有内容(以便页面呈现仍然获取图像大小以及可能声明的其他内容)但在页面末尾有第二个文件表里面有所有实际的数据 uri。 字面意思是页面的最后一个元素

我不能完全确定这是否有效，但它应该有助于缓解问题。

原因是因为渲染引擎需要知道诸如宽度、CSS 框模型等的信息才能正确渲染，但是渲染图像对于图形引擎来说往往需要更长的时间(这是我的理解)而且我愿意是文件本身很大，所以下载需要时间。因此，通过为页面提供所有 CSS 盒模型等，它可以进行布局，并在最后加载图像。

您可能想阅读以下内容:http://developer.yahoo.com/performance/rules.html

这是我的备用选项:

在当前 CSS 中加载低分辨率图像(以便页面显示某些内容)并在页脚 CSS 中加载高分辨率图像，以便它们覆盖低分辨率图像。