我目前正在与一个客户合作，不幸的是，他有一个阻塞的第三方样式表，需要成功渲染他们网站的一个关键页面。在我们能设计出一个更长期的解决方案之前（假设我们能做到的话），能异步加载该文件，我想找出一种方法来最小化其影响。
这是一个常规的<link rel="stylesheet"> ，必然是定义在<head> 。这意味着，从冷缓存来看，如果用户第一次登陆这个页面，他们绝对会受到性能上的影响--这是没有办法的事情。在页面开始渲染之前，该文件需要成功穿越网络。
问题是，尽管这是一个关键页面，但它不一定是用户在一个会话中访问的第一个或唯一的页面。事实上，在遇到这个页面之前，他们极有可能会访问一些其他类型的页面。这意味着我们可以利用用户在这个页面之前很可能会访问不同的页面这一事实，并使用prefetch ，预先支付网络开销。我们可能无法异步加载文件，但在那之前，至少让我们尝试从HTTP缓存而不是从网络上加载。
定义为。
prefetch链接关系类型用于识别下一次导航可能需要的资源，用户代理应该获取该资源，这样一旦将来请求该资源，用户代理可以提供更快的响应。
...这正是prefetch 的设计目的。所以这里没有什么突破性的东西。但我想做的是非常简单地确保在需要该文件_的_页面上，我们得到一个最高优先级的CSS请求，而在_不_需要的页面上，我们得到一个完全不在关键路径上的最低优先级请求。这意味着我们的速度永远不会比基准线慢，但希望能通过提前支付网络开销而变得更快。
<link rel="<?php echo $page == 'home' ? 'stylesheet' : 'prefetch'; ?>"
href="https://third-party.com/file.css" />
现在，同一行HTML可以涵盖这两种情况，而不需要更复杂的工作流程。这个片段可以在每个模板的<head> ，保持不变。
有了这个简单的补充，我既可以在真正需要的时候承担一个完全阻塞的、跨源的资源，也可以懒洋洋地加载文件，让它坐在HTTP缓存中等待最终被调用时使用。
