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

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>
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值