Preloadでブラウザにリソースを前もってFetch させる

01 HTMLタグ

<link rel="preload" href="script.js" as="script">

02 Preload（上記） ＋　リソースを通常読み込み処理

// script
let pl = document.createElement('script');
pl.src"xxx.js";
document.body.appendChild(pl);

// StyleSheet
let plStyle = document.createElement('link');
plStyle.href="xxx.css";
plStyle.rel="stylesheet";
document.head.appendChild(plStyle);

03 CSSファイルが先読みできたらすぐ実行

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

04 スクリプト　先読み

// ブラウザはxxx.js　リソースを先読み込み、実行しない
ar preloadLink = document.createElement("link");
preloadLink.href = "xxx.js";
preloadLink.rel = "preload";
preloadLink.as = "script";
document.head.appendChild(preloadLink);

// ブラウザで xxx.js リソースを実行
var preloadedScript = document.createElement("script");
preloadedScript.src = "xxx.js";
document.body.appendChild(preloadedScript);

05 as属性の値

// as属性の値

audio: オーディオファイル, as typically used in <audio>  

document: HTML ドキュメント  <frame> or <iframe>　埋め込み  

embed: <embed> エレメント　に埋め込みリソース  

fetch: fetchによるアクセスリソース もしくは XHR リクエスト（ArrayBuffer or JSONファイル）  

font: Fontファイル

image: Imageファイル

object: <object> エレメントに埋め込みリソース  

script: JavaScriptファイル

style: CSS stylesheet

track: WebVTTファイル

worker: JavaScript web worker もしくは shared worker

video: Videoファイル <video>タグ

参照元：MDN rel="preload" によるコンテンツの先読み
https://developer.mozilla.org/ja/docs/Web/HTML/Preloading_content

参照元：rel=”preload” によってリソースを先読みさせる
https://laboradian.com/rel-preload/