web性能优化—持续更新

web性能优化

1. preload 和 prefetch

web加载原语

<link rel="preload" as="script" />
<link rel="prefetch" />
<link rel="dns-prefetch" href="www.qq.com" />
<link rel="preconnect" href="https://cdn.shopify.com" />

• preload预加载

  preload是一个声明式fetch，用于决定页面资源的优先级（使用as），告诉浏览器预先请求当前页面需要的资源，因此可以允许前端开发者来优化当前页面资源的加载

  eg. 告诉浏览器预先请求当前页面需要的关键资源（关键脚本，字体，主要图片等）

  

  跨境电商网站shopify使用preload加载web字体

• prefetch预读取

  prefetch告诉浏览器这个资源将来可能需要，但是什么时间加载这个资源是由浏览器决定的（一般当浏览器处于空闲idle状态下加载），并且将他们存储在浏览器的缓存中

  eg. 在Google使用prefetch来预读取一些可以加快搜索结果页面渲染的关键资源

• preload和prefetch的注意事项

  1. 使用“as”或“type”属性来表示请求资源的优先级，比如使用as="style"属性，该资源的加载优先级最高。不使用as的preload的优先级将会等同于异步请求
  2. 如果preload的资源已经在缓存当中了，那么浏览器不会再去请求这个资源了，直接从缓存中去命中
  3. preload和prefetch可能会浪费用户的带宽，特别是请求的资源并没有使用
  4. preload中如果你的预加载需要 CORS 的跨域请求，那么也要加上 crossorigin 的属性
  5. preload和prefetch都是浏览器用于加载的原语，不要用prefetch作为preload的后备方案，因为他们适用于不同场景，一起使用可能导致不符合预期的二次获取

• preconnect

  preconnect 允许浏览器在一个 HTTP 请求正式发给服务器前预先执行一些操作，这包括 DNS 解析，TLS 协商，TCP 握手，这消除了往返延迟并为用户节省了时间

• DNS prefetch

  DNS prefetching 允许浏览器在用户浏览页面时在后台（浏览器处于空闲时）运行 DNS 的解析。如此一来，DNS 的解析在用户点击一个链接时已经完成，所以可以减少延迟和用户等待时间。可以在一个 link 标签的属性中添加 rel="dns-prefetch’ 来对指定的 URL 进行 DNS prefetching

  

  淘宝网中的dns-prefetch

总结：

1. preload用于告诉浏览器预先请求当前页面需要的资源，决定页面资源的优先级（以高优先级加载资源）
2. prefetch用于预加载下个页面可能需要的某个资源，并以低优先级加载
3. dns-prefetch用于让浏览器在空闲时提前将指定域名转换为IP地址
4. preconnect用于允许浏览器在一个HTTP请求正式发送给服务器前执行一些连接预操作