前端性能优化之样式预加载

2024-03-15 19:22:18

html5中的link 标签包含了几个属性，其中prefetch(空闲时加载)和preload(优先加载)可以让我们在加载资源时提高用户体验。

这里我用css样式进行举例，index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="prefetch" as="style" href="./css/other.css">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

在加载index.html的样式时，我在引入index.css后加了下边一句代码

在加载了index.css后去加载了other.css 且other.css的优先级为最低Lowest。 other.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/other.css">
    <link rel="preload" as="style" href="./css/index.css">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

在加载other.html样式时，我在引入other.css后加了下边一句代码

可以看到浏览器优先加载了index.css这一文件且other.css文件其并未显示Size，原因在于已经在index.html中加载并缓存了other.css这个一样式，其详细信息：

总结：我们可以通过在首页添加prefetch让浏览器在空闲时预加载其他页面的资源，这样在打开其他页面时就节省了加载时间，而使用preload能够让我们优先加载一些重要的资源，让用户能够优先看到重要的内容，提高用户体验。注：在使用时要添加as这一属性声明资源类型其值如下

audio: Audio file.
document: An HTML document intended to be embedded inside a <frame> or <iframe>.
embed: A resource to be embedded inside an <embed> element.
fetch: Resource to be accessed by a fetch or XHR request, such as an ArrayBuffer or JSON file.
font: Font file.
image: Image file.
object: A resource to be embedded inside an <embed> element.
script: JavaScript file.
style: Stylesheet.
track: WebVTT file.
worker: A JavaScript web worker or shared worker.
video: Video file.

码农公寓

相关文章