有没有办法加载脚本标签并在页面完全加载后执行它包含的脚本？

Question

我试图在页面加载到我的 html（或 php）页面后动态包含一个 three.js 模块类型的脚本标记。这是我需要的，因为 google pagespeed 洞察力在一个有三个 js 的页面上严重失败，导致页面出现错误和糟糕的速度分数。

• 我已经尝试过 php readfile - 有效，但并没有真正改变速度测试的行为，我得到 LCP 的问号结果

• 我正在考虑在页面加载后尝试使用 xhr 插入脚本，这可能是一个解决方案吗？

settimeout 在这里不是一个选项

有什么想法吗？

Answer 1

管理加载three.js 脚本的正确方法是使用requestIdleCallback()。

一旦页面被加载并且浏览器窗口空闲，脚本就会开始加载。

例子：

function loadThreeJS(deadline){
    //your three.js script
}

requestIdleCallback(loadThreeJS)

您可以传入一个可选的超时参数，如果在超时时间内回调没有完成，它将重新排队等待下一个事件循环空闲时的回调。

requestIdleCallback(loadThreeJS, { timeout: 3000 })

可以在here找到文档。

另一种方法是使用 Promise 并在 DOMContentLoaded 事件之后加载脚本。

以下也使用requestIdleCallback()，但更具体到您的问题，因为它将脚本标签插入到文档中。借自here，直接在浏览器中使用：

如果您需要脚本元素具有type=module，请像这样设置选项变量：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)
        }
    })
})

ThreeJS 脚本 CDN URL 的测试脚本加载时间为 15 毫秒。