<link rel="preload">
可以用来预渲染资源。 虽然它本身不是严格意义上的“渲染”,而是“预加载”,但在很多情况下,它能起到和预渲染类似的效果,因为它允许浏览器提前加载关键资源,从而加快页面的渲染速度。
<link rel="prerender">
虽然名字听起来像预渲染,但它实际上是预先加载并渲染一个指定的页面到一个隐藏的浏览器标签页中。 这样,当用户点击链接跳转到该页面时,浏览器可以直接显示预渲染好的页面,从而实现瞬间加载的效果。 然而, prerender
已经被弃用,并且现代浏览器已经不再支持它。 使用它可能会导致性能问题,因为它会消耗额外的资源来渲染可能不会被访问的页面。
所以,如果你想实现类似预渲染的效果,最好的选择是使用 <link rel="preload">
,并结合其他优化策略,例如:
- 预加载关键资源: 使用
<link rel="preload">
预加载关键的 CSS、JavaScript 和字体文件。例如:
<link rel="preload" href="styles.css" as="style">
<link rel="preload" href="script.js" as="script">
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
-
使用
as
属性:as
属性指定资源的类型,这有助于浏览器优化加载优先级。 -
使用
type
属性 (可选): 对于字体文件,使用type
属性可以进一步优化加载。 -
使用
crossorigin
属性 (可选): 对于跨域资源,使用crossorigin
属性可以确保资源被正确加载。 -
延迟加载非关键资源: 对于非关键的资源,可以使用 JavaScript 延迟加载,或者使用
<link rel="preload">
结合 JavaScript 来控制加载时机。
总而言之,虽然没有直接的 HTML 标签可以实现预渲染(除了已被弃用的 prerender
),但 <link rel="preload">
可以帮助你提前加载关键资源,从而加快页面渲染速度,达到类似预渲染的效果。 避免使用 prerender
,因为它已经过时并且可能带来性能问题。