前言
众所周知，js是单线程的，从上往下，从左往右依次执行，当我们有耗时的任务需要处理时，便会阻塞线程造成页面卡顿等问题。web worker的目的，就是为JavaScript创造多线程环境，允许主线程将一些任务分配给子线程。在主线程运行的同时，子线程在后台运行，两者互不干扰。等到子线程完成计算任务，再把结果返回给主线程。因此，每一个子线程就好像一个“工人”（worker），默默地完成自己的工作。更多worker的介绍请戳：JavaScript标准参考教程
本文通过web worker 统计博客园总阅读量，来学习一下worker的使用，前段时间想看一下自己的博客有多少的阅读量，发现博客园好像没有提供这个统计功能，刚好之前有了解到worker，js的多线程，刚好适用于去统计总阅读量，又不影响我页面的渲染，主线程渲染页面，子线程负责循环请求博客园随笔列表进行统计，统计好了再将数据发送到主线程。详细思路如下：
主线程
1、先追加一个带id=‘statistical’的span标签，并显示“统计中...”
2、开启worker子线程开始统计，并且开始监听onmessage事件等待子线程返回数据
3、onmessage收到子线程返回的数据，更新id=‘statistical’的span标签的text值
子线程
1、循环使用XMLHttpRequest对象请求博客园随笔列表，直到最后一页（直到返回的页面没有文章数据）
2、使用正则处理、匹配数据（每篇文章的阅读量）存入全局变量中，并且判断是否最后一页，以便跳出循环
3、将收集到的数据进行数据清洗、相加得到总阅读量
4、将总阅读量推送给主线程，并结束子线程
代码编写
在开始写主线程之前，我们先实现子线程的任务
子线程
根据博客园目前的链接规则，访问个人博客主页的地址如下：http://www.cnblogs.com/huanzi-qch/，分页查看随笔列表的地址如下：https://www.cnblogs.com/huanzi-qch/default.html?page=1，并根据响应回来的页面内容格式用正则 /huanzi-qch\s+阅读[(]+[1-9]\d+[)]/g 去匹配，当然也可以用 /阅读[(]+[1-9]\d+[)]/g
我们对子线程进行如下封装，name值在主线程new Worker的时候构造：
console.log("我是我是worker 任务线程 负责统计总阅读量..");
//我的博客园地址名称
var myCnblogsName = this.name;
//监听主线程发送过来的数据
//this.addEventListener(‘message‘, function (e) {
// this.postMessage(‘主线程发送过来的数据: ‘ + e.data);
//}, false);
//监听发送报错
//this.addEventListener(‘messageerror ‘, function (e) {
// this.postMessage(‘发送数据到主线程报错: ‘ + e.data);
//}, false);
//加载其他 JS 脚本。
//this.importScripts("")：
//任务线程内部的全局变量数组，用于保存数据
var statisticsArray = [];
//发送ajax请求博客园
function getReadData(page){
//是否还要继续
var flag = false;
//使用XMLHttpRequest对象请求博客园
var xhr = new XMLHttpRequest();
xhr.open(‘GET‘, "https://www.cnblogs.com/"+myCnblogsName+"/default.html?page=" + page, false);//同步
xhr.setRequestHeader("Content-Type", "text/html; charset=utf-8"); //设置响应格式
xhr.onreadystatechange = function() {
// readyState == 4说明请求已完成
if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) {
//使用正则处理HTML字符串，需要设置全局标识
//var myRe = /huanzi-qch\s+阅读[(]+[1-9]\d+[)]/g;
var myRe = /阅读[(]+[1-9]\d+[)]/g;
var resultArray = xhr.responseText.match(myRe);
//合并到全局变量数组中
statisticsArray = statisticsArray.concat(resultArray);
//判断这个即可：resultArray.length > 0 如果还有文章集合，则返回true
if(resultArray && resultArray.length > 0){
flag = true;
}
}
};
xhr.send();
return flag;
}
//循环调用getReadData，默认最大页数 100 （100页，每页10条记录，相对于1000篇博客，已经够多了吧？）
for(var i = 1;i < 100;i++){
//如果返回false则立即跳出循环
if(!getReadData(i)){ break;}
}
//处理全局数组
for(var i = 0;i < statisticsArray.length;i++){
if(statisticsArray[i]){
//只保留数字部分
statisticsArray[i] = statisticsArray[i].match(/[1-9]\d+/)[0];
}else{
statisticsArray.splice(i, 1);
}
}
//数组求和，需要返回主线程的最终值
//向产生这个 Worker 线程发送消息。
var count = eval(statisticsArray.join("+"));
this.postMessage(count);
console.log("统计结束，总阅读量为："+count);
//关闭 Worker 线程
this.close();
主线程
刚开始我是想将子线程单独放在一个js文件里，上传到博客园后台管理的文件里，然后引入创建worker对象，不成想博客园门户地址跟保存用户上传文件的地址不同源，而worker受同源限制，导致无法创建对象
只能将子线程的代码放在同一个页面了，通过<script id="worker" type="app/worker"></script>包起来，通过读取这个script的内容成Blob二进制对象，然后二进制对象转为URL，再通过这个URL创建worker。
最后代码如下：
// 先追加一个显示标签
$("#profile_block").append("总阅读量：<span id=‘statistical‘ style=‘color: #464646;‘>统计中...</span><br/>");
//创建一个Blob，读取同个页面中的script标签
var blob = new Blob([document.querySelector(‘#worker‘).textContent]);
//这里需要把代码当作二进制对象读取，所以使用Blob接口。然后，这个二进制对象转为URL，再通过这个URL创建worker。
var url = window.URL.createObjectURL(blob);
//创建worker对象
var worker = new Worker(url ,{ name : ‘huanzi-qch‘});
//监听任务线程返回的数据
worker.onmessage = function (event) {
//设置总阅读量
$("#statistical").text(event.data);
}
//error 事件的监听函数。
worker.onerror = function (event) {
console.log(‘error：‘ + event);
}
//messageerror 事件的监听函数。发送的数据无法序列化成字符串时，会触发这个事件。
worker.onmessageerror = function (event) {
console.log(‘messageerror：‘ + event);
}
//发送数据到任务线程
//worker.postMessage(‘Hello World‘);
效果演示
将所有代码都添加到 博客侧边栏公告 并保存
小扩展：既然添加了总阅读量，不如把积分、排名也放一起显示吧！
先前往 博客设置 --> 选项 勾选上“积分与排名”，然后加入以下js代码
//隐藏博客园提供的积分与排名标签，并将内容迁移到指定位置
$("#sidebar_scorerank").hide();
$("#profile_block").append("积分：<span style=‘color: #464646;‘>"+$("#sidebar_scorerank").find(".liScore").text().match(/[1-9]\d+/)[0]+"</span><br/>");
$("#profile_block").append("排名：<span style=‘color: #464646;‘>"+$("#sidebar_scorerank").find(".liRank").text().match(/[1-9]\d+/)[0]+"</span><br/>");
总结
通过这个小例子，我们以后看自己的博客情况也更加方便了，访问有侧边公告栏的页面都会统计总阅读量（不过这样会无形增加博客园服务器的压力 <手动羞涩脸>），并且也充分的感受到了worker的威力，之前js受限于单线程模型，无法充分发挥js的潜力，现在有了worker多线程，我们可以解锁更多姿势了！
更多对worker的介绍请戳：JavaScript标准参考教程。
原文地址：https://www.cnblogs.com/huanzi-qch/p/10523912.html