Question

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

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

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

Answer 1

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

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);

如果太大，您可能必须将其拆分为部分，因此它会并行下载。

Answer 2

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

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

我并不完全确定会有效，但它应该有助于缓解这个问题。

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

您可能需要阅读此内容：http://developer.yahoo.com/performance/rules.html

这是我的ALTERNATE选项：

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

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

2 个答案: