質問: ページがhtml(またはphp)ページにロードされた後、three.jsモジュールタイプのスクリプトタグを動的に含めようとしています。これが必要なのは、jsが3つあるページでは、Googleのpagespeedインサイトがひどく失敗し、ページにエラーとひどい速度スコアが表示されるためです。 * 私はphpreadfileを試しました-動作しますが、速度テストの動作を実際には変更していません。LCPの疑問符の結果が得られます * ページの読み込み後にxhrを使用してスクリプトを挿入しようと考えていましたが、それが解決策になるのでしょうか。 settimeoutはここではオプションではありません 何か案は?
回答: ### 答え : #### 解決: three.jsスクリプトの読み込みを管理する適切な方法は、`requestIdleCallback()`を使用することです。 ページが読み込まれ、ブラウザウィンドウがアイドル状態になると、スクリプトの読み込みが開始されます。 例: ``` function loadThreeJS(deadline){ //your three.js script } requestIdleCallback(loadThreeJS)Copy code ``` オプションのタイムアウトパラメータを渡すことができます。タイムアウト期間内にコールバックが完了しなかった場合、次のイベントループがアイドル状態のときにコールバックが再キューイングされます。 `requestIdleCallback(loadThreeJS, { timeout: 3000 })` ドキュメントはここにあります。 もう1つの方法は、Promiseを使用して、`DOMContentLoaded`イベントの後にスクリプトをロードすることです。 以下も`requestIdleCallback()`使用していますが、スクリプトタグをドキュメントに挿入するため、質問に固有のものです。ここから借用し、ブラウザで直接使用できるように調整しました。 `type=module`が必要な場合は、options変数を次のように設定します。`let options = {timeout: 3000, type: "module"}` ``` let src = "https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js" // your three.js script file source let options = {timeout: 3000} document.addEventListener("DOMContentLoaded", function(event) { new Promise((resolve, reject) => { let { timeout } = options if (typeof timeout === 'number') { timeout = Math.max(timeout, 1) if (typeof requestIdleCallback === 'function') { requestIdleCallback(loadScript, { timeout }) return } setTimeout(loadScript, timeout) return } loadScript() function loadScript () { const script = document.createElement('script') script.addEventListener('load', () => resolve(script)) script.addEventListener('error', () => reject(new Error(`Failed to load script: "${src}"`))) if (options.type) script.type = options.type if (options.charset) script.charset = options.charset if (options.id) script.id = options.id if (typeof options.noModule === 'boolean') script.noModule = options.noModule script.async = options.async !== false script.defer = options.defer !== false script.src = src document.head.appendChild(script) } }) })Copy code ``` 私のテストでのスクリプトの読み込み時間は、ThreeJSスクリプトCDNURLで15ミリ秒でした。