单线程，指的是只有一个线程，同一时间只能做一件事。JS 使用单线程的主要原因是避免 DOM 渲染的冲突，它的解决方法就是异步。

下面的例子可以体会一下 JS 单线程：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  11. </body>
  12. <script>
  13.     // 循环运行期间，JS 执行和 DOM 渲染暂时卡顿
  14.     console.log('start')
  15.     var i, sum = 0;
  16.     for (i = 0; i < 100000000; i++) {
  17.     sum += i;
  18.     }
  19.     console.log(sum);
  21.     // alert 不处理，JS 执行和 DOM 渲染暂时卡顿
  22.     console.log(1)
  23.     alert('hello')
  24.     console.log(2)
  25. </script>
  26. </html>

上面的例子中，如果打开调试面板，可以明显看到如果 for 循环未结束的话，后面的 console.log(sum) 是不会执行的。

另外还有地 23 行中，如果 alert 未确认，后面的 console.log(2) 也不会执行。

为什么 JS 是单线程？

JS 使用单线程其主要原因是要避免 DOM 渲染冲突。

首先先明确两点：

  1. 浏览器需要渲染 DOM
  2. JS 也可以修改 DOM 结构

由于浏览器和 JS 都会触及到 DOM，如果浏览器和 JS 都同时涉及到 DOM 操作的话，那就会产生冲突了。因此在 JS 执行的时候，浏览器 DOM 渲染就会暂停。

两段 JS 代码也不能同时执行，如果两端 JS 代码都修改 DOM，如果同时执行的话，也是会产生冲突的。所以需要先执行完一段 JS 代码之后，才会执行另一段 JS 代码。

因此 JS 在浏览器中应用必须是单线程的，而且与浏览器渲染共用一个进程。

虽然 H5 中的 webworker 支持多线程，但是不能访问 DOM。程序