JavaScript 进阶（一）JS的"多线程"

时间：2021-11-20 11:28:10

这个系列的文章名为“JavaScript 进阶”，内容涉及JS中容易忽略但是很有用的，偏JS底层的，以及复杂项目中的JS的实践。主要来源于我几年的开发过程中遇到的问题。小弟第一次写博客，写的不好的地方请诸位斧正，觉得还有一些阅读价值的请帮忙分享下。这个“JavaScript 进阶”是一个系列文章，请大家鼓励鼓励，我尽快更新。另外，如果你有比较好的话题，也可以在下面评论，我们一起研究提高。

JS是多线程的吗？

多线程编程相信大家都很熟悉，比如在界面开发中，如果一个事件的响应需要较长时间，那么一般做法就是把事件处理程序写在另外一个线程中，在处理过程中，在界面上面显示类似进度条的元素。这样界面就不会卡住，并且能够显示任务执行进度。记得刚开始做前端的时候，老板交代在界面上面做一个定时器，每秒更新用户的在线时间。当时拥有Java和C++开发经验的我自信满满的说我加一个线程就可以分分钟搞定了。所以查阅文档，发现setTimeout和setInterval可以很方便的实现该功能。那时候我就认为这就是JS中的多线程。setTimeout相当于启动一个线程，等待一段时间后执行函数，setInterval则是在另外的一个线程中，每隔一段时间执行函数。这个观念在我的头脑中存在了一年左右，直到遇到了这样的一个问题。

测试人员发现一个按钮的点击响应时间较长，在响应过程中，界面卡住了，我检查代码发现代码中做了这样的事情。

  1. $("#submit").on("click", function() {
  2. bigTask(); // 这个函数需要较长时间来执行
  3. })

所以我想很简单啊，把这个函数放在另外的一个线程执行就好了啊，所以代码改成了这样， 以为可以轻松解决问题。但是事实上发现毫无用处，界面还是原来一样的行为，点击按钮之后卡住了几秒。

  1. $("#submit").on("click", function() {
  2. setTimeout(function() {
  3. bigTask()
  4. }, 0)
  5. })

这个问题我百思不得其解，最后多方查阅资料才明白了如下的内容：

  1. 浏览器中的JS是单线程的。
  2. setInterval和setTimeout并不是多线程，这两个函数根本上其实是事件触发函数

想证明setInterval和setTimeout不是多线程很简单，你可以试试这样一段代码

  1. setTimeout(function() {
  2. while(true){}
  3. }, 0)
  4. setTimeout(function() {
  5. alert("foo")
  6. }, 1000)

不出意外，你的浏览器无法响应了，页面上面的按钮不能点，Gif也不能动，那个alert肯定也出不来。这是为什么呢？

为了解释上面的问题，我们来深入解析一下浏览器。浏览器中有三个常驻的线程，分别是JS引擎，界面渲染，事件响应。由于这三个线程同时要访问DOM树，所以为了线程安全，浏览器内部需要做互斥：当JS引擎在执行代码的时候，界面渲染和事件响应两个线程是被暂停的。所以当JS出现死循环，浏览器无法响应点击，也无法更新界面。现在的浏览器的JS引擎都是单线程的，尽管多线程功能强大，但是线程同步比较复杂，并且危险，稍有不慎就会崩溃死锁。单线程的好处不必考虑线程同步这样的复杂问题，简单而安全。下面的一幅图来简要说明JS引擎的执行流程：

JavaScript 进阶（一）JS的"多线程"

JS引擎基于事件来执行代码。事件响应线程在接到事件后，把响应的代码放到JS引擎的队列中，JS引擎按顺序执行代码。在JS引擎没有代码可以执行的时候，比如图中蓝色方框的间隙中，事件线程和渲染线程得以有机会运行。基于这些信息，能够的出下面的结论

  1. setTimeout，setInterval并不是多线程，只是一个定时的事件触发器，它们在合适的时间把一些JS代码塞到JS引擎的队列中。
  2. setTimeout(aFunction, 0)，这行代码看似的意思是在0秒之后执行aFunction, 但这并不意味着立即执行。其它真正的意思是立刻把aFunction的代码放到当前JS引擎的队列中。所以当前代码块执行完成之前，aFunction的代码是得不到执行的。比如这段代码，一定是world先出来，hello后出来。尽管setTimeout的参数是0，但这并不意味着立即执行
    1. setTimeout(function() {
    2. alert("hello");
    3. }, 0)
    4. alert("world")
  3. 在一个事件的响应代码执行完成之后，即使队列中有待执行的代码，浏览器也会先执行页面渲染和响应事件，完成之后再执行队列中的代码。

异步Ajax

看到这边相信各位应该对JS的单线程以及setTimeout，setInterval的本质有所了解了，那么我们再继续讨论下一个问题，异步Ajax。上文说了，JS是单线程的，当一个函数执行的时候，JS引擎会锁住DOM树，其他事件的响应代码只能在队列中等待，并且此时页面卡死。那么异步Ajax是怎么回事呢？一个常用的开发实践就是发起一个异步的Ajax，界面显示一个进度条样式的Gif，说好的单线程呢？事实上异步Ajax确实用了多线程，只是Ajax请求的Http连接部分由浏览器另外开了一个线程执行，执行完毕之后给JS引擎发送一个事件，这时候异步请求的回调代码得以执行。它的执行流程是这样的：

JavaScript 进阶（一）JS的"多线程"

Http请求的执行在另外一个线程中，由于这个线程并不会操作DOM树，所以是可以保证线程安全的。发起Ajax请求和回调函数中间是没有JS执行的，所以页面不会卡死。

真正的多线程JS

在HTML5中，引入了Web Worker这个概念。它能够在另外一个线程中执行计算密集的JS代码而不引起页面卡死，这是真正的多线程。然而为了保证线程安全，Worker中的代码是不能访问DOM的。其具体使用方法在此不作赘述，请参考：http://www.w3school.com.cn/html5/html_5_webworkers.asp

总结

结合上面的分析，总结出出下面的一些实践供各位参考。

    1. 避免编写计算密集的前端代码。
    2. 使用异步Ajax。
    3. 避免编写一个需要较长时间来执行的JS代码，比如生成一个大型的表。遇到这种情况，可以分批执行，比如用setInterval来每秒生成20行，或是用户向下拖动滚动条时候再继续产生新的行。
    4. 在页面初始化时候不要执行很多的初始化代码，否则会影响页面渲染变慢。一些不需要立即执行的代码可以在页面渲染完成之后再执行，比如绑定事件，生成菜单之类的控件。
    5. 对于复杂页面（像淘宝首页），可以结合异步Ajax分批产生页面。先生成页面框架，页面内容自上而下用异步Ajax逐步加载并填充到框架中。这样能够让用户更早的看到页面。
    6. setTimeout(function, 0)是有用的。它可以让callback作为另外一个事件响应代码来执行。实现了当前事件的代码执行完成之后，再渲染DOM，再执行setTimeout的callback。这样能够让一部分代码延后执行，并且在这之前渲染DOM。

相关文章