1

在使用谷歌页面速度分析器测试我的移动友好页面时，它说：

消除首屏内容中的渲染阻塞 JavaScript 和 CSS。您的页面有 2 个阻塞的 CSS 资源。这会导致呈现页面的延迟。如果不等待以下资源加载，则无法呈现页面上的任何首屏内容。尝试延迟或异步加载阻塞资源，或直接在 HTML 中内联这些资源的关键部分。

根据这个谷歌页面和w3c 2018 年 3 月草稿，网络将很快支持 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'/>

我的第二个问题是：

（何时）Web 平台 [Chrome、Edge、Firefox 等主要浏览器和 apachee 上的 php 7.2 等主要服务器技术] 准备好安全地将站点范围从 迁移rel="stylesheets"到rel="import"？

我的第三个额外问题是：

除了根据谷歌的小幅性能提升之外，（将来）是否会出现使用 HTML 导入与旧的 rel="stylesheet" 相比的任何站点？

4

3 回答 3

2

HTML Import 实际上已被弃用，尽管它已经在 Chrome 中实现。所以不要使用它。

https://dev.to/nektro/the-downfall-of-html-imports-is-upon-us-to-me

未来还会引入一个类似的特性，叫做“HTML Module”，但即使是标准本身也在Github上讨论，所以我们需要很长时间才能使用它。

https://github.com/dglazkov/webcomponents/blob/html-modules/proposals/HTML-Imports-and-ES-Modules.md

于 2018-08-20T22:08:57.380 回答
1

您不能简单地将 a 转换stylesheet <link>为 an，import <link>因为<link rel="import">只会加载 HTML 文档，而不是 CSS 样式表。

<link rel="import" href="imported-styles.html" async>

因此，通过 HTML Imports 导入的样式必须包含在元素中：

导入样式.html：

<style> 
    //content of all.css
    ... 
</style>

交替使用标准<link rel="stylesheet">：

导入样式.html：

<link rel="stylesheet" type="text/css" href="all.css"/>
<link rel='stylesheet' type='text/css' href='https://fonts.googleapis.com/css?family=etc'/>

请注意，async如果您不想在处理主 HTML 文档的其余部分之前等待加载导入的文档，则应使用该属性。

现在只有 Chrome 和 Opera本地实现 HTML 导入。其他浏览器供应商不打算实现它，因此您需要在 Edge 和 Firefox 中使用 polyfill。

这是一项古老的技术，因此服务器框架并不真正受到关注。

使用 HTML Imports 的缺点是，在某些特殊情况下，polyfill 实现的行为可能会略有不同（大多数 polyfill 都是如此）。请参阅polyfill的限制。

于 2018-07-10T20:57:35.420 回答
1

第一个问题

目前没有办法。HTML Imports 是一种在其他 HTML 文档中包含和重用 HTML 文档的方法，请参阅HTML Imports文档。

第二个问题

很难说何时rel="import"会广泛使用，但您可以在Can I Use网站https://caniuse.com/#search=import上轻松跟踪浏览器支持，它还显示下一个发布版本是否支持它。

第三个奖金问题

rel="import"是导入HTML文件。

rel="stylesheets"是导入CSS文件。

您仍然需要使用rel="stylesheets"来加载您的 CSS 文件。

于 2018-07-09T03:10:13.220 回答