3

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

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

也许<link rel=stylesheet>在页面之后写标签load？

4

2 回答 2

0

将此脚本放在头部，它应该加载它而不会阻塞（测试）。

setTimeout(function () {
    var el = document.createElement('link'),
        sc = document.getElementsByTagName('script')[0];
    el.rel = 'stylesheet';
    el.href = 'hi-dpi.css';
    sc.parentNode.insertBefore(el, sc);
}, 30);

如果它太大，您可能必须将其分成几部分，以便并行下载。

于 2012-06-16T03:17:13.390 回答
0

在我走得更远之前，我不得不问这个问题，但真的有必要在 CSS 中拥有很多“高分辨率资产”吗？我的意思是，也许这只是我，但是......

所以这是我的建议：在“原始样式表”中加载除 data-uri 之外的所有内容（以便页面渲染仍然获得图像大小以及可能声明的其他内容），但在页面末尾有第二个文件表包含所有那里有实际的数据uri。字面上是页面的最后一个元素

我不完全确定这会起作用，但它应该有助于缓解问题。

原因是渲染引擎需要知道宽度、CSS 框模型等信息才能正确渲染，但渲染图像往往需要更长的时间来处理图形引擎（这是我的理解）加上我愿意成为文件本身就很大，所以下载需要时间。因此，通过为页面提供所有 CSS box-model 等，它可以进行布局，并在最后加载图像。

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

这是我的替代选项：

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

于 2012-06-16T03:17:29.593 回答