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请求正式发送给服务器前执行一些链接预操做