在使用Google页面速度分析器测试我的适合移动设备的页面时，它表示：
彻底消除渲染阻止的JavaScript和CSS 内容。您的页面有2个阻止CSS资源。这会导致延迟 在呈现您的页面。您的首屏内容均不包含 无需等待以下资源即可呈现页面 加载。尝试延迟或异步加载阻塞资源，或者 直接在HTML中内嵌这些资源的关键部分。
根据此google page和w3c 2018 March draft，网络很快将支持HTML导入。
请注意，Web平台很快将支持将样式表加载到 非渲染方式，无需诉诸使用 JavaScript，使用HTML导入。
将旧样式样式表转换为HTML导入有哪些方法？
我可以简单地更改...
<link rel="stylesheet" type="text/css" href="all.css"/>
<link rel='stylesheet' type='text/css' href='https://fonts.googleapis.com/css?family=etc'/>
...变成：
<link rel="import" type="text/css" href="all.css"/>
<link rel='import' type='text/css' href='https://fonts.googleapis.com/css?family=etc'/>
（何时）网络平台[主要的浏览器，例如Chrome，Edge，Firefox和apachee上的主要服务器技术，例如php 7.2]准备就绪，可以安全地将站点从rel="stylesheets"迁移到rel="import" ？
除了根据Google带来的少量性能提升外，将来还会有使用HTML导入而不是旧的rel =“ stylesheet”的停机站点吗？
答案 0 :(得分：2)
实际上不建议使用HTML导入，尽管它已在Chrome中实现。所以不要使用它。
https://dev.to/nektro/the-downfall-of-html-imports-is-upon-us-to-me
将来会推出类似的功能，称为“ HTML模块”，但即使标准本身也仍在Github上进行讨论，因此使用它需要很长时间。
https://github.com/dglazkov/webcomponents/blob/html-modules/proposals/HTML-Imports-and-ES-Modules.md
答案 1 :(得分：1)
第一个问题
目前无法解决。 HTML导入是一种在其他HTML文档中包含和重用HTML文档的方法，请参阅HTML Imports文档。
第二个问题
很难确定rel="import"何时会广泛可用，但是您可以在我可以使用网站https://caniuse.com/#search=import上轻松跟踪浏览器支持，它还会显示下一个版本发布会支持它。
第三个奖金问题
rel="import"用于导入HTML文件。
rel="stylesheets"用于导入CSS文件。
您仍然需要使用rel="stylesheets"来加载CSS文件。
答案 2 :(得分：1)
您不能简单地将stylesheet <link>转换为import <link>，因为<link rel="import">仅加载HTML文档，而不加载CSS样式表。
<link rel="import" href="imported-styles.html" async>
因此，通过HTML导入导入的样式必须包含在元素中：
imported-styles.html ：
<style>
//content of all.css
...
</style>
正确使用标准<link rel="stylesheet">：
imported-styles.html ：
<link rel="stylesheet" type="text/css" href="all.css"/>
<link rel='stylesheet' type='text/css' href='https://fonts.googleapis.com/css?family=etc'/>
请注意，如果您不想在处理其余主要HTML文档之前等待加载导入的文档，则应使用async属性。
现在only Chrome and Opera正在本地实现HTML导入。其他浏览器供应商不打算实现它，因此您需要对Edge和Firefox使用polyfill。
这是一种科学的技术，因此服务器框架并没有真正涉及。
使用HTML Imports的不利之处在于，在某些特殊情况下，行为与polyfilled实现略有不同（对于大多数polyfill都是如此）。请参见polyfill的limitatons。