美文网首页
网页动态加载js,优化首次加载性能

网页动态加载js,优化首次加载性能

作者: 戚培俊 | 来源:发表于2024-01-29 11:10 被阅读0次

/**
 * @description 动态加载js
 * @param url js地址
 * @returns {Promise} 返回加载状态
 */
 const loadScript =(url) => {
    return new Promise((resolve, reject) => {
        // 判断有没有加载过 有就不加载了
        let scriptList = document.getElementsByTagName('script');
        let isLoad = false;
        for (let i = 0; i < scriptList.length; i++) {
            if (scriptList[i].src === url) {
                isLoad = true;
            }
        }
        if (isLoad) {
            resolve();
            return;
        }
        
        // 动态加载js
        let script = document.createElement("script");
        script.type = "text/javascript";

        script.src = url;
        document.getElementsByTagName("head")[0].appendChild(script);

        script.onload = function () {
            resolve();
        };
    })
}

使用

let isJsZipReady = ref(false)
loadScript(new URL('../utils/jszip.min.js', import.meta.url).href).then(() => {
    console.info('jszip ready')
    isJsZipReady.value = true
})

相关文章

  • JavaScript动态加载js和css

    动态加载js 参考:javascript 性能优化 动态加载css 参考: 动态加载 css 方法实现和深入解析 ...

  • 前端优化

    网页的性能优化 网页在加载js时,可以把js放在最后加载,或者用h5的async/defer加载.在加载图片时,对...

  • 图片的懒加载和预加载

    一、懒加载 【1.1】什么是懒加载? 懒加载也就是延迟加载,指的是在长网页中延迟加载图像,是一种很好优化网页性能的...

  • 懒加载和预加载

    一、懒加载 1.1、什么是懒加载  懒加载也叫延迟加载,指的是在长网页中延迟加载图像,是一种很好优化网页性能的方式...

  • 懒加载

    一,懒加载 1.什么是懒加载 懒加载也叫延迟加载,指的是在长网页中延迟加载图像,是一种很好优化网页性能的方式。...

  • 懒加载和预加载

    一、懒加载 1.什么是懒加载 懒加载也叫延迟加载,指的是在长网页中延迟加载图像,是一种很好优化网页性能的方式。用户...

  • 懒加载和预加载

    一、懒加载 1.什么是懒加载 懒加载也叫延迟加载,指的是在长网页中延迟加载图像,是一种很好优化网页性能的方式。用户...

  • 懒加载和预加载

    一、懒加载 1.什么是懒加载 懒加载也叫延迟加载,指的是在长网页中延迟加载图像,是一种很好优化网页性能的方式。用户...

  • 资源懒加载

    #懒加载 1.什么是懒加载 懒加载也叫延迟加载,指的是在长网页中延迟加载图像,是一种很好优化网页性能的方式。用户滚...

  • 懒加载和预加载

    # 一、图片的懒加载 ### 1.概念 懒加载也叫延迟加载,指的是在长网页中延迟加载图像,是一种很好优化网页性能的...

网友评论

      本文标题:网页动态加载js,优化首次加载性能

      本文链接:https://www.haomeiwen.com/subject/lbmgodtx.html