前端优化 浏览器预处理相关优化

prefetch

• 用于预加载未来可能会用到的资源，例如下一页的 HTML、图片、字体等。浏览器会在空闲时间预加载这些资源，通常为页面已经加载完毕后
• 将响应保存到本地的prefetch cache中，但是并不会进一步解析、运行该资源

<link rel="prefetch" href="example.html">

preload

• 预加载当前页面需要的资源，例如 JavaScript、CSS、字体等。浏览器在解析 HTML 文件时就开始下载指定的资源，但不会阻塞浏览器解析和渲染，通常加载顺序仅次于 Document 本身
  • 并不会阻塞 window 的 onload 事件
  • 只会下载指定类型的资源， 比如 as=‘html’ 只会下载指定的 HTML 文档本身。浏览器不会自动下载 HTML 文档中引用的其他类型的资源
  • preload的字体资源必须设置crossorigin属性，否则会导致重复加载。
    • 原因是如果不指定crossorigin属性(即使同源)，浏览器会采用匿名模式的CORS去preload，导致两次请求无法共用缓存。
• preload 最多为 6 个。超过这个数量，额外的 preload 请求可能会被排队等待，从而降低页面加载性能

<link rel="preload" as="font" type="font/woff2" href="font.woff2" crossorigin />
<link rel="preload" as="image" href="banner.jpg" />
<link rel="preload" as="style" href="style.css" />

crossorigin

Prefetch、Preconnect 跨域资源优先级提示效果会受到 crossorigin 属性的影响

• 没有crossorigin属性：无法获取 JS 的错误上下文，也不会在 SSL 握手阶段附带 Cookies 等用户身份相关的信息
• crossorigin:“anonymous”：可以访问 JavaScript 的错误上下文，但在请求过程中的 SSL 握手阶段不会携带 Cookies 或其他用户凭据
• crossorigin:“use-credentials”：既可以访问JavaScript的错误上下文，也可以在请求过程中的SSL握手阶段携带Cookies或用户凭据。

Sec-Fetch-Mode

Sec-Fetch-Mode 请求头的主要作用是向服务器传递请求的模式

• Sec-Fetch-Mode:no-cors，表示当前资源加载的模式并非跨域资源共享模式
• Sec-Fetch-Mode:cors，表示当前资源加载的模式是跨域资源共享模式

prefetch 和 preload 二次请求原因

• 缓存过期或超出容量
• 缓存策略导致，比如 Cache-Control: no-cache
• 资源的 URL 不一致
• 用户在加载资源时可能切换了网络环境（如从 Wi-Fi 切换到移动数据），可能导致浏览器重新验证或获取资源
• 没有合法 https 证书的站点无法使用 prefetch，预提取的资源不会被缓存

dns-prefetch

• 浏览器会在加载网页时对网页中的域名进行解析缓存
• dns-prefetch 应该尽量的放在网页的前面，推荐放在 后面

<link rel="dns-prefetch" href="//cdn.www.sojson.com">
其中:
//开始是为了适配https和http,就是当前请求链接是https,那么这个//前面自动补充https,反则补充http
//也可以直接添加https等

• 在HTTPS环境下进行DNS预解析
  • a标签的自动域名解析,在HTTPS上失效

<meta http-equiv="x-dns-prefetch-control" content="on" /> //就可以让a标签在HTTPS环境下进行DNS预解析。

• 禁止隐式的域名解析:

<meta http-equiv="x-dns-prefetch-control" content="off">

preconnect（兼容性问题）

• 用于浏览器提前建立与其他域名服务器的连接，在开始实际请求资源之前，DNS 解析、TCP 握手和 TLS 协商（如果使用 HTTPS）等连接过程已经完成。

<link rel="preconnect" href="https://cdn.example.com">

prerender（兼容性问题）

• 浏览器提前下载、解析和渲染将来可能访问的页面。当用户实际访问这个页面时，由于页面已经预渲染，会几乎立即显示出来。这种方法可能会消耗大量的带宽和处理能力，因此仅在真正了解用户可能访问某个页面的场景时，才推荐使用

<link rel="prerender" href="https://example.com/about">

fetchpriority（兼容性问题）

精细化控制资源优先级

<img src="important.jpg" fetchpriority="high">
<img src="small-avatar.jpg" fetchpriority="low">
<script src="low-priority.js" fetchpriority="low"></script>