???????????????preload??????????????????prefetch????????????

Posted 2020-11-18

?????????OLE   ??????   prope   ??????   site   ?????????   ?????????   etc   ??????   

????????????

????????????VUE????????????????????????SSR????????????????????????html?????????????????????preload???prefetch????????????????????????????????????????????????preload???prefetch?????????

 

???????????????

???????????????preload???prefetch???????????????????????????????????????????????????

?????????Chrome?????????????????????????????????????????????????????????????????????????????????????????????

??????????????????????????????

Highest ??????
Hight ???
Medium ??????
Low ???
Lowest ??????

?????????????????????HTML???CSS?????????????????????????????????????????????????????????????????????

??????JS????????????????????????????????????????????????????????????????????????????????????????????????

??????1????????????????????????????????????????????????????????????????????????????????????

??????2????????????????????????????????????????????????????????????????????????????????????

??????3????????????????????????????????????????????????????????????????????????????????????????????????

????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? Chrome ????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????

??????preload ?????? “as” ?????????????????????????????????????????? “type” ???????????????????????????????????????????????????preload as="style" ??????????????? as=“script” ??????????????????

???????????? “as” ????????? preload ???????????????????????????????????????

 

preload

????????????

?????????????????????preload???link????????????rel?????????

<link rel=“preload”> 

??????preload ????????????????????????????????????????????????????????????????????????(?????????????????????)???????????????????????????

?????????????????????????????????

??????1???????????????????????????????????????????????????document???onload??????

??????2???????????????????????????????????????????????????font??????????????????????????????????????????

????????????

???????????? link ??????????????????????????????????????????

<link rel="preload" href="/path/to/style.css" as="style">

????????????????????????????????????????????? link ?????????????????? head ??????

<script>
const link = document.createElement(???link???);
link.rel = ???preload???;
link.as = ???style???;
link.href = ???/path/to/style.css???;
document.head.appendChild(link);
</script>

????????????

?????????????????? preload ?????????????????????????????????????????? link ????????????????????????????????????????????????????????????????????????

const isPreloadSupported = () => {
  const link = document.createElement(???link???);
  const relList = link.relList;
  if (!relList || !relList.supports) {
    return false;
  }
  return relList.supports(???preload???);
}

????????????

???????????? preload ?????????????????????????????????????????????????????????????????????????????????????????????????????????????????? preload?????????????????????????????????????????????????????????

??????Preload ??? as ?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? ?????????Preload????????????????????????????????????????????????????????????????????????????????????????????????????????? as ????????????????????? Accept ?????????????????????????????? as ????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????

?????????????????? as ???????????????????????? as ???????????? preload ????????? XHR ??????????????????????????????????????????????????????????????????????????????????????????????????????

??????Preload ??????????????????????????? onload ????????????????????????????????????????????????????????????????????????

<link rel="preload" href="..." as="..." onload="preloadFinished()">

???????????????????????????preload????????????????????????

<link rel="preload" href="style.css" onload="this.rel=stylesheet">

???????????????preload ???????????? windows ??? onload ??????

??????????????????????????????preload?????????????????? crossorigin ??????

<link rel="preload" as="font" crossorigin href="https://at.alicdn.com/t/font_zck90zmlh7hf47vi.woff">

??????????????????

??????1????????????as??????

?????????????????? preload ??????????????????????????? “as” ?????????????????????????????????

??????2???????????????

??????preload ???????????? crossorigin ?????????????????? ????????? preload ??????????????? crossorigin ????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????(??????????????????????????????)

????????????

????????????????????? preload ????????? Chrome ??? console ????????? onload ?????? 3s ???????????????

 

prefetch

?????????????????????prefetch???link????????????rel?????????

<link rel=“prefetch”>

??????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????

????????????

??????preload ????????????????????????????????????????????????????????????????????????????????????

??????prefetch ???????????????????????????????????????????????????????????????????????????????????????

?????????VUE SSR?????????????????????????????????????????????preload???????????????????????????????????????prefetch

<link rel="preload" href="./manifest.js" as="script">
<link rel="preload" href="./vendor.js" as="script">
<link rel="preload" href="./app.js" as="script">
<link rel="prefetch" href="./vendor-async.js">
<link rel="prefetch" href="./user.js">
<link rel="prefetch" href="./comment.js">
<link rel="prefetch" href="./category.js">
<link rel="prefetch" href="./post.js">
<link rel="prefetch" href="./home.js">

???????????????????????????????????????????????????????????? preload????????????????????????????????????????????????????????? prefetch

??????????????????

??????preload ??? prefetch ????????????????????????????????????????????????????????????

<link rel="preload"   href="https://at.alicdn.com/t/font_zck90zmlh7hf47vi.woff" as="font">
<link rel="prefetch"  href="https://at.alicdn.com/t/font_zck90zmlh7hf47vi.woff" as="font">

???????????? preload ??? prefetch ?????????????????????????????????????????????????????????????????? preload ??? prefetch ???????????????????????????????????????