简单的算法-解决页面脚本异步加载顺序问题

栏目: 编程工具 · 发布时间: 5年前

内容简介：这几天稍微扫了一下假如浏览器需要引入多个JavaScript资源，我们一般会在页面上嵌入如下代码默认情况下

这几天稍微扫了一下 CoffeeScript 的部分源码，发现了一条挺有意思的算法，它解决了页面异步加载脚本时遇到的顺序问题。只是当初都没想过可以这样优雅地去处理这方面的问题。异步加载的脚本之间可能会有依赖关系，因此加载顺序就异常重要了。

一. 场景分析-同步与异步

1. 同步加载

假如浏览器需要引入多个JavaScript资源，我们一般会在页面上嵌入如下代码

<body>
  <script src="http://xxxxx.com/global.js"></script>
  <script>
    <!-- Global 全局变量是从global.js脚本中引入 -->
    window.Global.user_id = "x223345333445"
  </script>
  <script src="http://xxxxx.com/main.js"></script>
</body>
复制代码

默认情况下 script 标签里面的资源会自动加载，并且这个过程是同步的，我们并不需要担心第一个 script 标签请求完成之前浏览器就去执行第二个 script 标签中的代码(超时或者是加上了aync这些属性的情况要另当别论了)。这种场景我姑且称之为脚本的同步加载。

2. 异步加载

上述场景中 script 标签相当于自动加上了 type="text/javascript" 这样一个属性值，浏览器会自动识别这类资源并进行加载。但是如果加载的不是JavaScript资源呢？假设我们要加载CoffeeScript资源，或许就会把代码写成这样 

<body>
  <script type="text/coffeescript" src="http://xxxxx.com/global.coffee"></script>
  <script type="text/coffeescript">
    <!-- Global 全局变量是从global.coffee脚本中引入 -->
    window.Global.user_id = "x223345333445"
  </script type="text/coffeescript">
  <script src="http://xxxxx.com/main.coffee"></script>
</body>
复制代码

这种情况下，浏览器就不会自动加载 script 标签里面的资源了，毕竟浏览器无法直接解析这种类型的脚本。

如果要加载这类资源我们则需要手动编写代码来遍历所有包含属性值 type="text/coffeescript" 的 script 标签，如果是带有 src 属性则异步请求资源，如果没有 src 属性则直接获取标签包裹的内容。通过特殊的脚本来执行加载好的CoffeeScript代码。

这种场景中第一和第三个标签都需要通过发送请求来获取资源，这就会导致一种现象，如果不加特殊处理第二个标签里面的代码会比另外两个脚本先执行，而这个时候变量 Global 还没有被定义，就会导致脚本出错。这种就是异步加载脚本的场景，异步虽好，它不会堵塞页面，不过要处理各个脚本之间的依赖关系也是个头疼的问题。

二. 解决方案

在不考虑使用打包 工具 的情况下我暂且提出这三个解决方案

1. 回调

回调无疑是最为简单粗暴的方式，以上的案例中只有3个JavaScript资源，构建一条完整的回调链似乎没什么问题。不过还是会使代码变得难懂，且 恶心 。回调很简单这里就不贴代码了。

如果我把 script 标签增加到10个，并且其中包含几个内嵌脚本的话你应该不会再想用回调来解决了吧？案例如下 

<body>
  ...
  <script type="text/coffeescript" src="http://xxxxx.com/extern1.coffee"></script>
  <script type="text/coffeescript"><!-- 内嵌脚本 --></script>
  <script type="text/coffeescript" src="http://xxxxx.com/extern2.coffee"></script>
  <script type="text/coffeescript" src="http://xxxxx.com/extern3.coffee"></script>
  <script type="text/coffeescript"><!-- 内嵌脚本 --></script>
  <script type="text/coffeescript" src="http://xxxxx.com/extern4.coffee"></script>
  <script type="text/coffeescript" src="http://xxxxx.com/extern5.coffee"></script>
  <script type="text/coffeescript"><!-- 内嵌脚本 --></script>
  <script type="text/coffeescript" src="http://xxxxx.com/extern6.coffee"></script>
  <script type="text/coffeescript"><!-- 内嵌脚本 --></script>
</body>
复制代码

当然，上面的只是示范代码，正常情况下我们不可能这样去写代码。这种情况如果用回调去解决加载顺序问题的话，估计是个人都会崩溃了。我们需要寻找更好的解决方案。

2. 填充队列，队列满了再执行

为了异步加载CoffeeScript资源，我先把伪代码写成这样

// 用于运行CoffeeScript代码
function handleCoffeeScript(cfCodeString) {
 ...
}

// 用于异步请求资源，返回Promise
function ajax(url) {
}

document.querySelectorAll('[type="text/coffeescript"]').forEach((item) => {
  if (item.src) {
    ajax(item.src).then((content) => {
        handleCoffeeScript(content)
    })
  } else {
    handleCoffeeScript(item.innerHTML)
  }
})
复制代码

这代码咋一看似乎没什么问题，尤其是这10个 script 标签所涵盖的CoffeScript代码的业务逻辑彼此间没有任何依赖关系的时候，上诉代码完全可以直接使用。然而，一旦它们之间有依赖关系，这样去加载脚本就会报错。我给10个脚本分别编号1-10，假设所有脚本都能够顺利加载，那么会出现下面的情况 

2, 5, 8, 10 // 同步的内嵌脚本先加载运行

1, 3, 4, 6, 7, 9 // 需要异步请求的脚本后运行
复制代码

PS: 这只是一种情况，我们永远无法保证先发送的请求会先响应，毕竟每个接口的响应时间都不一样，假设编号1中的资源比较大响应时间较长，那么执行顺序可能会变成3, 4, 1, 6, 7, 9。

通常为了解决这种问题我们需要维护一个。 初始化一个特定长度的队列，初始值值都是undefined。由于异步脚本都会在同步脚本之后才能被执行，为此可以在每次异步请求结束时都去检测队列是否已经满了，如果满了就证明所有脚本都已经加载完毕。接着依次执行队列中的每一项所包含的CoffeeScript资源。 

// 用于运行CoffeeScript代码
function handleCoffeeScript(cfCodeString) {
 ...
}

// 用于异步请求资源，返回Promise
function ajax(url) {
 ...
}

const sources = document.querySelectorAll('[type="text/coffeescript"]')
// 初始化队列
let queue = new Array(sources.length)

// 检测队列是否已经满了
function checkQueueFull(queue) {
    for(let i = 0; i < sources.length; i ++) {
        if (queue[i] === undefined) return false
    }
    return true
}

sources.forEach((item, i) => {
  if (item.src) {
    ajax(item.src).then((content) => {
        // 队列填充
        queue[i] = content
        // 队列如果塞满的话则依次运行所有脚本
        if (checkQueueFull(queue)) {
            queue.forEach(item => handleCoffeeScript(item))
        }
    })
  } else {
    // 队列填充
    queue[i] = item.innerHTML
  }
})
复制代码

这个脚本确实能够解决异步加载资源时遇到的顺序问题了，但是它显得有点笨拙， 它必须要等到所有脚本加载完成后才能够依次去执行所有脚本 。

假设编号为5的资源并不是那么重要，而且加载时间会比较长，这种方式就会导致所有资源都需要等待编号5的资源加载完毕之后才有机会执行，这会导致脚本层面的堵塞。接下来我们进一步优化这个流程，看如何规避这种问题。

3. 填充队列，让脚本尽可能早地去运行

为了优化这个过程，**除了上述的队列我们还需要另外维护一个索引，每次异步请求完成之后检测当前索引所在位置的资源，如果这个资源已经加载好了，则执行当前位置的脚本，索引自增，再检测下一个索引所对应的资源是否能够执行，以此类推，直到遇到某个不可用的资源则停止执行。当再次发生异步请求的候重复上述过程，会根据索引值从之前停止的地方重新开启检测。**这一切可以以递归的方式实现，伪代码大概如下

// 用于运行CoffeeScript代码
function handleCoffeeScript(cfCodeString) {
 ...
}

// 用于异步请求资源，返回Promise
function ajax(url) {
}

const sources = document.querySelectorAll('[type="text/coffeescript"]')

// 创建一个等长的队列
let queue = new Array(sources.length)

// 脚本执行索引
let index = 0

// 执行函数，采用递归的方式，检测队列中当前索引的资源是否可用，如果可用则调用`handleCoffeeScript`方法来处理相关的内容，递增索引，并调用自身
function execute() {
    param = queue[index]
    if(param !== undefined) {
        handleCoffeeScript(content)
        index ++
        execute()
    }
}

sources.forEach((item, i) => {
  if (item.src) {
    ajax(item.src).then((content) => {
        queue[i] = content
        // 每次脚本加载完成都触发执行脚本，具体是否需要执行需要执行脚本来判断
        execute()
    })
  } else {
    queue[i] = item.innerHTML
  }
})
复制代码

我们来幻想一个比较极端的场景，假设1号和9号的异步请求都是慢请求，9号脚本的耗时比1号脚本长许多（假设是5s），那么加载程序运行起来会有以下表现

PS：简单起见，我暂时用脚本的状态来对队列中的每一项进行占位。

  • 同步脚本率先被加载进队列，但先不执行
[undefined, "Available", undefined, undefined, "Available", undefined, undefined, "Available", undefined, "Available"]
复制代码
  • 除了1号，9号脚本之外，其他异步脚本都加载完成并塞进队列中
[undefined, "Available", "Available", "Available", "Available", "Available", "Available", "Available", undefined, "Available"]
复制代码
  • 1号脚本加载完成
// 1号脚本加载完毕
["Available", "Available", "Available", "Available", "Available", "Available", "Available", "Available", undefined, "Available"]
复制代码

后续脚本会依次运行，但由于9号脚本加载时间太长，所以在对应的位置会停止执行，并等待

// 然后依次执行
["Executed", "Available", "Available", "Available", "Available", "Available", "Available", "Available", undefined, "Available"]

["Executed", "Executed", "Available", "Available", "Available", "Available", "Available", "Available", undefined, "Available"]

.....

["Executed", "Executed", "Executed", "Executed", "Executed", "Executed", "Executed", "Executed", undefined, "Available"]
复制代码
  • 等9号脚本加载完毕，继续执行余下脚本
["Executed", "Executed", "Executed", "Executed", "Executed", "Executed", "Executed", "Executed", "Available", "Available"]

["Executed", "Executed", "Executed", "Executed", "Executed", "Executed", "Executed", "Executed", "Executed", "Available"]

["Executed", "Executed", "Executed", "Executed", "Executed", "Executed", "Executed", "Executed", "Executed", "Executed"]
复制代码

这个脚本的性能会比之前的脚本好上一些了，起码它不会等到所有资源都加载完毕之后才去执行。

一方面，2-10号的资源都需要依赖1号资源，它保证了1号资源加载并执行完毕之前不会执行任何其他的脚本。另一方面，加载9号脚本需要比较长的时间，而我们并不需要等到它加载完了才去运行其他脚本，而是会让在它之前的能够执行的脚本先行执行。只有10号脚本会等待9号脚本。

总结

这篇文章简单地对异步加载脚本可能遇到的问题以及相关的解决方案做了个简单的阐述，虽说真实环境可能再也不会遇到这种问题了，不过了解一下算法还是有好处的，说不定哪天遇到类似的场景就派上用场了。

本文只是用JavaScript写了些伪代码，算法流程也只是用文本来简单阐述，可能会导致有些地方表达不够到位。如果想更全面地了解这个加载脚本我建议直接看 Coffeescript 里面的源代码。


以上所述就是小编给大家介绍的《简单的算法-解决页面脚本异步加载顺序问题》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍
A Byte of Python

A Byte of Python

Swaroop C H / Lulu Marketplace / 2008-10-1 / USD 27.98

'A Byte of Python' is a book on programming using the Python language. It serves as a tutorial or guide to the Python language for a beginner audience. If all you know about computers is how to save t......一起来看看 《A Byte of Python》 这本书的介绍吧!

码农工具
图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

  • New
  • 文章
  • 话题
  • 教程
    • 关注 码农网 公众号
    版权所有，保留一切权利！© 2018-2024 码农网 粤ICP备17054400号-3