设置网页脚本动态顺序加载

介绍

  最近为了提升页面加载速度，寻找了一下解决方案，其中方案之一就是让页面脚本动态顺序加载，以下介绍该方案的原理以及实现。
  众所周知，浏览器加载 JavaScript 脚本，主要通过<script>元素完成。正常的网页加载流程是这样的。浏览器加载网页的流程一般如下：

1. 浏览器一边下载 HTML 网页，一边开始解析。也就是说，不等到下载完，就开始解析。
2. 解析过程中，浏览器发现<script>元素，就暂停解析，把网页渲染的控制权转交给 JavaScript 引擎。
3. 如果<script>元素引用了外部脚本，就下载该脚本再执行，否则就直接执行代码。
4. JavaScript 引擎执行完毕，控制权交还渲染引擎，恢复往下解析 HTML 网页。

  加载外部脚本时，浏览器会暂停页面渲染，等待脚本下载并执行完成后，再继续渲染。原因是 JavaScript 代码可以修改 DOM，所以必须把控制权让给它，否则会导致复杂的线程竞赛的问题。
  如果我们可以让外部脚本动态加载，自然提高了页面加载速度；

脚本的动态加载

  通过动态生成<script>元素，生成后再插入到页面当中，可实现脚本的动态加载。比如页面需要动态加载a.js和b.js；代码如下：

['a.js','b.js'].forEach(function(src){var script= document.createElement('script');
  script.src= src;
  document.head.appendChild(script);});

  以上方法动态生成的script标签不会阻塞页面渲染，不会造成浏览器假死。但若多个脚本之间约定需要顺序执行；这种方法无法保证脚本的执行顺序，哪个脚本文件先下载完成，就先执行哪个。以下给出动态顺序加载解决方案；

脚本的动态顺序加载

  如果多个脚本之间有执行顺序，可以设置async属性为false。代码如下：

['a.js','b.js'].forEach(function(src){var script= document.createElement('script');
  script.src= src;
  script.async=false;
  document.head.appendChild(script);});

  上面的代码不会阻塞页面渲染，而且可以保证b.js在a.js后面执行。不过需要注意的是，在这段代码后面加载的脚本，会因此都等待b.js执行完成后再执行。若想将脚本文件放最后执行，则可将这部分代码放在脚本最后。
  其次，若想为动态加载的脚本指定回调函数，可以借助onload方法；写法如下：

functionloadScript(src, done){var js= document.createElement('script');
  js.src= src;
  js.onload=function(){done();//回调函数};
  js.onerror=function(){done(newError('Failed to load script '+ src));};
  document.head.appendChild(js);}

参考网址：
https://www.wangdoc.com/javascript/bom/engine.html#%E6%B8%B2%E6%9F%93%E5%BC%95%E6%93%8E