HTML中的资源提示关键词
在HTML中，资源提示（Resource Hints）是一种改善网页加载性能的方法，通过提前通知浏览器关于资源（比如preload）的相关信息，以便提前加载。这些提示是通过<link>标签实现的，可以放在文档的<head>部分。
以下是几个常用的资源提示关键词：
preconnect：建立TCP连接到指定的域名。dns-prefetch：提前进行DNS查找。preload：指示浏览器提前加载指定的资源，可以指定as属性来指定资源类型。prefetch：指示浏览器在用户闲置时预加载指定的资源，优先级较低。prerender：指示浏览器预渲染下一个可能的导航，即使用户不会立即看到它。
例子代码：
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 预加载关键CSS -->
<link rel="preload" href="style.css" as="style">
<!-- 预获取关键JavaScript -->
<link rel="prefetch" href="script.js">
<!-- DNS预获取 -->
<link rel="dns-prefetch" href="//example.com">
<!-- 预连接 -->
<link rel="preconnect" href="https://example.com">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resource Hints Example</title>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
</header>
<main>
<p>This is an example of resource hints in HTML.</p>
</main>
</body>
</html>在这个例子中，我们使用了preload来预加载关键的CSS样式表，prefetch来预获取可能在将来某个时间点需要的JavaScript文件。dns-prefetch用于预先解析域名，而preconnect用于建立TCP连接，这些都是为了优化页面加载性能。
评论已关闭