如何同时使用rel ="preload"和rel ="preload".和rel ="stylesheet"对于相同的标签? [英] How to use both rel="preload" and rel="stylesheet" for the same tag?

问题描述

Google Pagespeed测试与样式表一起使用时无法识别预加载.我尝试过

Google Pagespeed test doesn't recognize preload when it is used together with stylesheet. I tried

<link rel="preload stylesheet" href="http://www.example.com/style.css" />

，它仍然显示考虑用于优先获取当前在页面加载中稍后请求的资源".如果我从rel属性中删除样式表，它将识别出预加载.

and it still shows "Consider using to prioritize fetching resources that are currently requested later in page load.". If I remove stylesheet from rel attribute, it recognizes the preload.

我当时想尝试一下:

<link rel="preload" rel="stylesheet" href="http://www.example.com/style.css" />

但是我不确定您是否可以为同一链接标记具有2个相同的属性.这行得通吗?

but I am not sure if you can have 2 the same attributes for the same link tag. Would this work?

推荐答案

要异步加载CSS样式，您应将其表示为预加载样式表.每当您单独使用 rel ="preload" 时，它在页面加载时都不会转换为样式表，而是保持为 preload ，因此要将其表示为样式表，您应该使用另一个属性，例如 as ，该属性指示元素的类型，在您的情况下，它应该是 style .然后，您需要在加载过程完成时告诉浏览器，您需要将其视为样式表，因此必须定义另一个属性，例如 onload ，然后定义其实际关系.

For loading CSS styles asynchronously, you should indicate it, as a preload stylesheet. Whenever you use rel="preload" alone, it won't transform to stylesheet on page load and it will remain as preload, so to indicate it as stylesheet you should use another attribute such as as which indicate the type of element and in your case, it should be style. Then you need to tell the browser whenever the loading process got finished you need to consider this as a stylesheet, so you have to define another attribute like onload and then define its real relation.

所以您必须像这样导入它:

so you have to import it like this:

<link rel="preload" as="style" onload="this.rel='stylesheet'" href="http://www.example.com/style.css">

注意::您可以在此处了解更多信息在Google开发人员中.

NOTE: You can read more about it here in google developers.

因为到目前为止，Firefox中不支持 preload (根据

Since preload is not supported in firefox until now (according to this), the only way to do it, is to declare it twice in the one rel tag or two separate tags.

<link rel="preload" as="style" href="http://www.example.com/style.css">
<link rel="stylesheet" href="http://www.example.com/style.css">

或

<link rel="stylesheet" rel="preload" as="style" href="http://www.example.com/style.css">

注意::由于@JohnyFree在Google页面速​​度中测试了第二个(其中一个带有一行)，因此该代码不会被识别为有效的preload 样式，而格式根据 W3有效..

NOTE: As @JohnyFree tested the second one (one with a line through) in the Google page speed, it won't be recognized as valid preload style, whilst the format is valid according to W3.org.

这篇关于如何同时使用rel ="preload"和rel ="preload".和rel ="stylesheet"对于相同的标签?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！