Worker 实现 js 多线程

有以下情景： 使用js 求 10000 之内的 质数，并把这些质数全部显示在 页面上

不使用 Worker 的写法：

 1 <div id="show">
 2
 3 </div>
 4
 5         <script type="text/javascript">
 6             var show = document.getElementById(‘show‘);;
 7             var num = 0;
 8             var br = 0;
 9             search:
10                 while (num <= 10000) {
11                     num += 1;
12                     for (var j = 2; j <= Math.sqrt(num); j++) {
13                         console.log(‘num%j=‘ + (num % j));
14                         if (num % j == 0) {
15                             continue search;
16                         }
17                     }
18                     // 大量的 运算导致了 dom 渲染阻塞
19                     if (br % 5 == 0) {
20                         show.innerHTML += "<br/>";
21                     }
22                     show.innerHTML += (num + "&nbsp;&nbsp;");
23                     br++;
24                 }
25         </script>

大量的运算导致了 dom 渲染等待延迟。

使用 Worker：

定义 worker.js 文件（名字任意）

 1 var num = 0;
 2
 3 search:
 4     while (num <= 10000) {
 5         num += 1;
 6         //console.log(num);
 7         for (var j = 2; j <= Math.sqrt(num); j++) {
 8             console.log(‘num%j=‘ + (num % j));
 9             if (num % j == 0) {
10                 continue search;
11             }
12         }
13
14
15         postMessage(num); // 向 有 该js 的worker 传递 数据，数据可以是复杂类型
16
17     }

html 页面

 1         <div id="show">
 2
 3         </div>
 4         <script type="text/javascript">
 5             var show = document.getElementById(‘show‘);
 6             var br = 0;
 7             var worker = new Worker("js/worker.js"); // 构造Worker对象
 8             worker.onmessage = function(event) {
 9                 if (br % 5 == 0) {
10                     show.innerHTML += "<br/>";
11                 }
12                 show.innerHTML += event.data + ",";
13                 br++;
14             }
15         </script>