preload & prefetch

时间 2019-12-05 标签 preload prefetch

原文地址在个人笔记里，以为还行就给个 star 吧：）

关于 preload 和 prefetch 早有耳闻，知道它们能够优化页面加载速度，然具体状况却了解很少。搜索了相关的资料后对其有了些认识，在此记录一下。css

preload

一般在页面中，咱们须要加载一些脚本和样式，而使用 preload 能够对当前页面所需的脚本、样式等资源进行预加载，而无需等到解析到 script 和 link 标签时才进行加载。这一机制使得资源能够更早的获得加载并可用，且更不易阻塞页面的初步渲染，进而提高性能。html

使用方式

将 link 标签的 rel 属性的值设为 preload，as 属性的值为资源类型（如脚本为 script，样式表为 style）git

<head>
  <meta charset="utf-8">
  <title>preload example</title>
  <!-- 对 style.css 和 index.js 进行预加载 -->
  <link rel="preload" href="style.css" as="style">
  <link rel="preload" href="index.js" as="script">

  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div id="app"></div>

  <script src="index.js"></script>
</body>

prefetch

与 preload 同样，都是对资源进行预加载，可是 prefetch 加载的资源通常不是用于当前页面的，即将来极可能用到的这样一些资源，简单点说就是其余页面会用到的资源。固然，prefetch 不会像 preload 同样，在页面渲染的时候加载资源，而是利用浏览器空闲时间来下载。当进入下一页面，就可直接从 disk cache 里面取，既不影响当前页面的渲染，又提升了其余页面加载渲染的速度。github

使用方式

同 preload 很类似，无需指定 as 属性：浏览器

<head>
  <meta charset="utf-8">
  <title>preload example</title>
  <!-- 对 style.css 和 index.js 进行 preload 预加载 -->
  <link rel="preload" href="style.css" as="style">
  <link rel="preload" href="index.js" as="script">

  <!-- 对资源进行 prefetch 预加载 -->
  <link rel="prefetch" href="next.css">
  <link rel="prefetch" href="next.js">

  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div id="app"></div>

  <script src="index.js"></script>
</body>

总结

对当前页面须要的资源，使用 preload 进行预加载，对其它页面须要的资源进行 prefetch 预加载。app