0. 前言
在一个页面中，会有许多的耗时操作，这些耗时操作会影响界面的流畅度，可能会出现卡顿的情况，那么，什么是耗时操作呢？就是一些耗费时间的操作，比如你的for循环，创建节点等，当然，我说的不是你就只创建一个节点，就创建一个节点，耗费不了多少时间，可是，你要创建很多呢？
那我们可以把你所耗时的那些操作，放在子线程里，等它运行完毕，回调到主线程，相当于异步操作，让子线程的操作进行着，主线程该干嘛干嘛去。
主线程和子线程.png
1. 简介
Web Worker的基本原理就是在当前 javascript 的主线程中，使用 Worker 类加载一个 javascript 文件来开辟一个新的线程，也可以说成子线程，起到互不阻塞执行的效果。
2. 改进前代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" id="box" value="点击我" />
<h1 id="num"></h1>
<script type="text/javascript">
//在子线程 模拟一个耗时操作
for (var i = 0; i < 1000000000; i++) {
}
num.innerHTML = i;
box.onclick = function () {
alert("哈哈哈哈哈哈");
}
</script>
</body>
</html>
改版前.gif
改版前那个for循环耗时操作，还是要耗费时间的，而且我在连续点击，会弹出很多次，在for循环结束后，你点击了几次，就会弹出几次，以为它被for循环阻塞住了做成了影响。
3. 改进后代码
主线程
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" id="box" value="点击我" />
<input type="button" value="停止子线程的耗时操作" id="stop1" />
<h1 id="num"></h1>
<script type="text/javascript">
//创建一个worker对象（创建一个子线程）
var webworker;
if (typeof Worker != "undefined") {
//参数是耗时操作
webworker = new Worker("./webworker.js");
//监听子线程中运行的耗时操作，如果运行完毕，
//回调到这里（主线程）更新UI代码
webworker.onmessage = function (e) {
num.innerHTML = e.data;
}
} else {
throw new Error ("不支持Worker对象");
}
box.onclick = function () {
alert("哈哈哈哈哈哈");
}
stop1.onclick = function () {
webworker.terminate();
}
</script>
</body>
</html>
子线程
(function () {
//在子线程 模拟一个耗时操作
for (var i = 0; i < 1000000000; i++) {
}
//耗时操作完毕后，调用postMessage方法回到主线程，
//并且把数据传回去
postMessage(i);
})();
改进后.gif
我把耗时操作放在另一个文件里，然后，我主线程该干嘛干嘛，这样两者也不会造成阻塞，流畅度也很好，解决了耗时操作可能会造成的阻塞影响。
4. 结束语
快过新年了，大家都在买着回家的票，而我今天刚买到回家到票，听说唐山今天下雪了，是不是有句话“瑞雪兆丰年”，哈哈，提前祝大家新年快乐哈，看到的记得给我点赞，发红包啊！！！
网友评论