动态添加script标签加载插件，web性能优化

最新推荐文章于 2025-06-19 10:01:49 发布

XiaooSe

最新推荐文章于 2025-06-19 10:01:49 发布

阅读量933

点赞数

CC 4.0 BY-SA版权

分类专栏：前端方向文章标签：插件加载 web性能优化

本文链接：https://blog.youkuaiyun.com/Wcharles666/article/details/90212655

前端方向专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种提高网页渲染效率的方法——在登录页动态异步加载不必要的js插件，如ckplayer。通过这种方式，可以避免影响页面初始化速度，实现web性能优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

登录页进入，可以把暂时不需要的js插件进行动态异步载入，提高页面渲染效率，方法如下：

这里以引入ckplayer为例

<body>
<script type="text/javascript">
    // 动态生成腳本
    // urls----script.src地址数组、callback---回调函数
    function loadScripts(urls, callback) {
      callback = callback || function () {

      };

      var loader = function (src, handler) {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = src;
        //重点！！！！script加载成功
        script.onload = function () {
          script.onload = null;
          script.onerror = null;
          handler();
        };
        script.onerror = function () {
          script.onload = null;
          script.onerror = null;
          callback({
            message: src + '依赖未加载成功！'
          });
        };
        var head = document.getElementsByTagName('body')[0];
        (head || document.body).appendChild(script);

      };
      //自执行函数，用于循环loader
      (function run() {
        if (urls.length > 0) {
          loader(urls.shift(), run);
        } else {
          callback();
        }
      })();
      console.log(document.head);
    }

    var relies = ['./ckplayer/ckplayer/ckplayer.js']
    window.onload = function () {
      loadScripts(relies, function cb(err) {
        if (err) {
          return console.log(err.message);
        }
      })
    }
  </script>
</body>