prefetch 和 dns-prefetch 是用于优化网页加载性能的浏览器预加载技术。

一：区别

1：preload（预加载）

A：形式 ：<link rel="preload">

B：定义：是一种浏览器预加载技术，用于指示浏览器在页面加载过程中提前获取和缓存特定资源。

C：作用：用于指定当前页面所需的关键资源，以加快页面的加载速度

D：代码：

<link rel="preload" href="styles.css" as="style">
<link rel="preload" href="script.js" as="script">
<link rel="preload" href="image.jpg" as="image">

2：Prefetch（预加载）

A：形式 ：<link rel="prefetch">

B：定义：是一种浏览器提示，它告诉浏览器在当前页面加载完成后预先加载指定资源。

C：作用：在用户访问相关页面之前提前获取资源，加快后续页面的加载速度

D：代码：

<link rel="prefetch" href="next-page.js">
<link rel="prefetch" href="next-page.css">
<link rel="prefetch" href="next-page.jpg">

3：DNS Prefetch（DNS 预解析，域名转换IP）

A：形式 ：<link rel="dns-prefetch">

B：定义：是一种浏览器提示，告诉浏览器在当前页面加载完成后预先解析指定域名的 DNS

C：作用：在需要发送请求时减少 DNS 解析时间，从而加快请求的发起速度

D：代码：

<link rel="dns-prefetch" href="//example.com">

4：preconnect（ 预连接）

A：形式 ：<link rel="preconnect">

B：定义：是一种浏览器预连接技术，用于在页面加载过程中提前建立与指定域名的连接

C：作用：可以减少建立连接的延迟，并加快后续资源的请求和加载速度

D：代码：

<link rel="preconnect" href="https://www.cqhxb.com">

二：总结

1：优化页面的加载性能，提前获取所需资源并减少延迟

2：预加载和预解析可能会占用额外的带宽和资源

3：兼容性问题，部分浏览器不支持