缓存注入动态样式标记

Question

关于以下代码我有两个小问题：

export function loadCSS(path) {
  const head = document.getElementsByTagName('head')[0];
  const style = document.createElement('link');
  style.href = path;
  style.rel = 'stylesheet';
  head.appendChild(style);
}

1. 浏览器会从缓存中提供文件吗？
2. 这个代码是否会阻止JS的其余部分直到CSS文件加载完毕？

Answer 1

1. 浏览器可以从缓存中提供服务，为了安全起见，使用缓存清除，这意味着在您的路径中附加随机查询:(用于服务器端控制检查缓存控制（新）和到期（旧的）标题）

   style.href = path + "?" + Math.random();

2. 如果在追加之前在链接上定义了href，则会进行渲染阻止。更好的选择是添加无效的媒体属性，附加链接然后将其删除以触发下载：

   function generateLink(node){//node is some reference within head var link = document.createElement("link"); link.setAttribute("rel","stylesheet"); link.setAttribute("type","text/css"); link.setAttribute("media","invalid"); link.setAttribute("href",someHref); ((node && node.parentNode) || (document.head || document.getElementsByTagName("head")[0])) .insertBefore(link,node || null); setTimeout(function(){link.removeAttribute("media")},17); };