设置不同资源的优先级答案

【问题标题】：Setting priority on different resources设置不同资源的优先级
【发布时间】：2016-02-24 18:17:21
【问题描述】：

我正在建立一个网站，可以为多个皮肤导入多个 css 文件。有没有办法在加载页面时在样式表上设置不同的优先级。

我希望浏览器首先获取普通的 css、我的 js 和我所有的图片。之后，当页面完全启动并运行时，它可以获取我的其他可选的 css 样式表。（因为这些是由用户声明“我现在想使用深色 css”触发的）

一个例子来说明我的情况：

<!-- CSS links -->
<link rel="stylesheet" href="./css/transit.css"/>
<link rel="stylesheet" href="./css/transit_dark.css"/>

有没有办法在我的 DOMContent 被渲染后让深色样式表加载？

【问题讨论】：

很简单，只要把这行代码放在正文的末尾即可。
您可以将样式表声明为“备用”，但浏览器仍可以正常加载它。除了脚本（使用async）之外，确实没有保证的声明性方式在客户端设置资源优先级。

标签： javascript html css networking resources

【解决方案1】：

你可以用 javascript (jQuery) 做到这一点：

$( document ).ready(function() {
    $('head').append('<link rel="stylesheet" type="text/css"
    href="./css/transit_dark.css">');
)};

【讨论】：

【解决方案2】：

没有纯粹的声明性解决方案。你可以做的是：

在初始页面加载后插入样式表。不要从“DOMContentLoaded”事件开始，因为那只是 DOM。您可能希望等到页面的“加载”事件，该事件指示呈现页面所需的一切（包括 CSS 和图像）已经存在。
将其插入为rel="alternate stylesheet"，这样浏览器在选择之前不会应用它。

window.addEventListener("load", function(){
    var l = document.createElement("link")
    l.rel = "alternate stylesheet"
    l.href = "./css/transit_dark.css"
    l.title = "Transit: Dark" // a title is mandatory for alternates
    document.head.appendChild(l)
})

除了让浏览器预加载所有样式表并在其自己的 UI 中提供样式表选择器（Firefox 开箱即用）之外，使用备用样式表在语义上是一种非常好的方法。

【讨论】：