异步加载脚本

<script src="../static/jquery/jquery-1.9.1.min.js"></script>
<img src="images/1.jpg" alt="">
<img src="images/2.jpg" alt="">
<img src="images/3.jpg" alt="">
<img src="images/4.jpg" alt="">

右侧竖直蓝色线表示大约在420ms后DOM就绪，红色竖直线表示大约在458ms所有文件加载就绪。

异步方式async="defer"：

<script src="../static/jquery/jquery-1.9.1.min.js" async="defer"></script>
<img src="images/1.jpg" alt="">
<img src="images/2.jpg" alt="">
<img src="images/3.jpg" alt="">
<img src="images/4.jpg" alt="">

右侧竖直蓝色线表示大约在355ms后DOM就绪，红色竖直线表示大约在568ms所有文件加载就绪。

异步方式async="async"：

<script src="../static/jquery/jquery-1.9.1.min.js" async="async"></script>
<img src="images/1.jpg" alt="">
<img src="images/2.jpg" alt="">
<img src="images/3.jpg" alt="">
<img src="images/4.jpg" alt="">

右侧竖直蓝色线表示大约在340ms后DOM就绪，红色竖直线表示大约在528ms所有文件加载就绪。

以上三种方式对比可以发现，使用异步的方式明显提高了DOM渲染的速度！

这是在online条件下测试的，如果在网速慢得情况下测试将更明显，你可以把online切换完Slow 3G测试。

流行的两种异步加载库

国外：script.js 国内：load.js

script.js

【1,627个字节，不推荐】

第一步：先按照这个依赖包

bower install script.js --save

第二步：读README.md文件，学习用法

加载单个脚本

<body>
<script src="bower_components/script.js/dist/script.js"></script>
<script>
   // 加载单个脚本
   $script('bower_components/jquery/dist/jquery.js', function () {
      // foo.js is ready
      console.log(jQuery);
   })
</script>
</body>

控制台：

可见，script.js是在head标签里创建了一个script标签，将load完的脚本引入。

加载多个脚本

<body>
<script src="bower_components/script.js/dist/script.js"></script>
<script>
   // 加载多个脚本
   $script([
         'bower_components/angular/angular.js',
         'bower_components/angular-route/angular-route.js',
         'components/jsonp/jsonpSev.js',
         'app.js',
   ],function () {
      console.log(angular);
   })
</script>
</body>

虽然页面中我们是引入了所有的脚本：

但是后台却报了错误：

由于是异步加载，肯定有先加载完和后加载完，如果先加载完的脚本依赖后加载完的脚本，就像jQuery-plugins.js依赖jQuery.js一样，你要先把jQuery.js放在前面加载，然后才能加载jQuery-plugins.js，不然就会报错！

按指定顺序加载多个脚本

// 按指定顺序加载多个脚本
$script('bower_components/angular/angular.js', function () {
   $script('bower_components/angular-route/angular-route.js', function () {
      $script('components/jsonp/jsonpSev.js', function () {
         $script('app.js', function () {
            $script('moviecat/controller.js', function () {
                console.log(123);
             })
         })
      })
   })
});

这样并没有解决我的问题啊？控制台还是报错，而且这写法麻烦！

解决办法：使用angular-loader.js，只要引入这个包，它就会帮我们自动的按照依赖顺序加载这些包。

<body ng-app="MyApp">
<script src="bower_components/script.js/dist/script.js"></script>
<script src="bower_components/angular-loader/angular-loader.js"></script>
</body>
<script>
   // 加载多个脚本
   $script([
         'bower_components/angular/angular.js',
         'bower_components/angular-route/angular-route.js',
         'components/jsonp/jsonpSev.js',
         'app.js',
         'moviecat_list/controller.js',
   ],function () {
      console.log(angular);

      /*手动引导的方式*/
      // angular.bootstrap(document.querySelector("[ng-app='MyApp']"),['MyApp'])
   });
</script>

load.js

【1,641 字节，推荐】

github使用文档：https://github.com/muicss/loadjs

<body ng-app="MyApp">
<script src="bower_components/loadjs/dist/loadjs.js"></script>
<script>
   // 加载多个脚本
   loadjs([
      'bower_components/angular/angular.js',
      'bower_components/angular-route/angular-route.js',
      'components/jsonp/jsonpSev.js',
      'app.js',
      'moviecat_list/controller.js',
   ],{
      success: function() {
         console.log(123);
      },
      error:function () {
         console.log(456);
      },
      async: false // 并行获取文件，并串行加载他们
   });
</script>
</body>

posted @ 2020-08-10 11:07 刘呆哗阅读(233) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

刘呆哗

异步加载脚本

公告