动态异步加载CSS(通过在Javascript中设置“href”属性）

在我们的网站上，我们根据显示器是否为视网膜动态加载样式表。现在，我们为页面中插入的每个<link href="stylesheet.css">使用document.write，如果显示为retina，则使用不同的css文件。

然而，这会影响性能，因为它会导致css文件同步加载，因为浏览器无法解析javascript以在上一个文件完成之前加载下一个文件。我相信，如果我们利用现代浏览器的前瞻性和异步获取资源的能力，换句话说，如果我们并行加载CSS文件，我们可以减少页面加载时间。

我目前的解决方案是为要加载的每个样式表创建一个<link id="link-tag-id" href="">标记，紧接着是一个确定retina状态的脚本，然后用适当的文件填充引号，如下所示：

document.getElementById("link-tag-id").setAttribute("href", "retina-stylesheet.css")

这似乎很好，当我在Chrome开发工具以及WebPageTest.org（运行Chrome、Firefox和IE）上检查网络瀑布时，样式表确实是并行加载的。然而，这似乎有点让人恼火。我想知道创建一个具有空href属性的<link>标签是否有任何危险，如果有，它们是什么？

更广泛地说，关于如何动态和异步加载CSS，还有其他建议吗？

谢谢你的帮助！

编辑：我刚刚发现这个也有效：

document.getElementById("link-tag-id").href = "retina-stylesheet.css"