preload/prefetch

preload/prefetch

preload

• 使浏览器优先加载页面必要的资源，脚本、样式、字体等
• 可以用 link 标签，也可以在响应头里加 Link: url;rel=preload as=[as]
• 对于脚本类型，只加载，不执行
• 对于字体类型，要加上 crossorigin，否则会重复下载
• 判断是否支持

  function check() {
    const link = document.createElement('link')
    const relList = link.relList
    return relList && relList.supports && relList.supports('preload')
  }
  

• IE和Firefox不支持
• 如果加载的资源在 onload 时间后 3s 内没有使用，会有warning

prefetch

• 提前加载之后的页面可能会使用的资源
• 其他的点和 preload 差不多

async/defer/脚本动态插入

async

• 不阻塞解析
• 加载完后立刻执行

defer

• 不阻塞解析
• 所有都加载完后，按标签位置顺序执行，执行的时机是在DOM解析完成之后，但在 DOMContentLoaded 前

动态插入

• 默认异步加载，加载完后立刻执行
• 可改变 script 的 async=false 使其按加载顺序执行