<script src="https://cdn.com/step1.js"></script>
<script>
(function step2() {})();
</script>
<script src="https://cdn.com/step3.js"></script>
我们都知道这个 step1、step2、step3 如果存在依赖关系的话，则必须严格按照这个顺序执行，否则就可能出错。浏览器可以并行请求 step1 和 step3 的文件，但在执行时顺序是保证的。如果我们自己通过 XMLHttpRequest 获取 step1 和 step3 的文件内容，我们就需要自行保证其顺序正确性。此外不要忘记了 step2，在 step1 以非阻塞形式下载的时候 step2 就可以被执行了，所以我们还必须人为干预 step2 让它等待 step1 完成后再执行。
如果我们已经有一整套工具来生成网站上不同页面的 <script> 标签的话，我们就需要调整一下这套工具让它对 <script> 标签做出改动：
复制代码 代码如下:
<script>
scheduleRemoteScript('https://cdn.com/step1.js');
</script>
<script>
scheduleInlineScript(function code() {
(function step2() {})();
});
</script>
<script>
scheduleRemoteScript('https://cdn.com/step3.js');
</script>
我们需要实现 scheduleRemoteScript 和 scheduleInlineScript 这两个函数，并且保证它们在第一个引用外部脚本文件的 <script> 标签之前就被定义好，然后余下的 <script> 标签都会被改写成上面这种形式。注意原本立即执行的 step2 函数被放到了一个更大的 code 函数里面了。code 函数并不会被执行，它只是一个容器而已，这样使得原本 step2 的代码不需要转义就能保留下来，但又不会被立即执行。
接下来我们还需要实现一套完整的机制，保证这些由 scheduleRemoteScript 根据地址下载回来的文件内容和由 scheduleInlineScript 直接获取到的代码能够按照正确的顺序一个接一个地执行。详细的代码我就不在这里给出了，大家有兴趣可以自己去实现。
行号反查
通过 CORS 获取内容再把代码注入页面能够突破安全限制，但会引入一个新的问题，那就是行号冲突。原本通过 error.script 可以定位到唯一的脚本文件，再通过 error.line 可以定位到唯一的行号。现在由于都是页面内嵌的代码，多个 <script> 标签并不能通过 error.script 来区分，然而每一个 <script> 标签内部的行号都是从 1 算起的，结果就导致我们无法利用异常信息定位错误所在的源代码位置。
为了避免行号冲突，我们可以浪费一些行号，使得每一个 <script> 标签中有实际代码所使用的行号区间互相不重叠。举个例子来说，假设每个 <script> 标签中的实际代码都不超过 1000 行，那么我可以让第一个 <script> 标签中的代码占用第 1–1000 行，让第二个 <script> 标签中的代码占用第 1001–2000 行（前面插入 1000 行空行），第三个 <script> 标签种的代码占用第 2001–3000 行（前面插入 2000 行空行），以此类推。然后我们使用 data-* 属性记录这些信息，便于反查。
复制代码 代码如下: