再谈JavaScript线程


Posted in Javascript onJuly 10, 2015

代码判断一:

<div id="div">
  click me
</div>

<script>
  var div=document.getElementById("div");
  div.addEventListener('click',function(){
   alert('You have clicked me!');
  });
  for(var i =0; i<999999999;i++){
   console.log(i);
  }
</script>

执行之,不出意外的话所有浏览器都会卡死,因为上面的for循环次数太多了,非常耗费CPU资源,而基于JavaScript单线程的事实,浏览器UI渲染被挂起而导致假死。

       现在问题来了,我就是想要实现上述代码,怎么办?

Concurrent.Thread.js
       该类库实质上还是使用setTimeout来实现一个“假的多线程”。在HTML5 WebWorker问世之前是一个很好的选择。比如我们要实现上述“代码片段一”,可以这样写(点我下载类库):

代码片段二:

<div id="div">
  click me
</div>
<script src="Concurrent.Thread.js"></script>
<script>
  Concurrent.Thread.create(function(){
    var div=document.getElementById("div");
    div.addEventListener('click',function(){
     alert('You have clicked me!');
    });
    for(var i =0; i<9999999;i++){
     console.log(i);
    }
  });
</script>

 通过该类库提供的create方法可以创建一个“新线程”。另外,给script标签的type属性设置为 text/x-script.multithreaded-js 也可以实现同样的效果:

代码片段三:

<div id="div">
  click me
</div>
<script src="Concurrent.Thread.js"></script>
<script type="text/x-script.multithreaded-js">
    var div=document.getElementById("div");
    div.addEventListener('click',function(){
     alert('You have clicked me!');
    });
    for(var i =0; i<9999999;i++){
     console.log(i);
    }
</script>

WebWorker
    针对以上浏览器卡死这种糟糕的用户体验,HTML5怎么会熟视无睹呢?

     下面我们用经典的斐波那契数列来做测试:

代码片段四:

主页面:

<div id="div"></div>
<script>
  window.onload=function(){
     var div=document.getElementById("div");
     if(typeof(Worker)!=="undefined"){//在创建WebWorker之前,先判断浏览器是否支持


  console.log("Start calculating....");
       var time1= new Date()*1;//获得当前时间戳
       var worker=new Worker("fibonacci.js");//创建WebWorker对象,并传递在新线程中将要执行的脚本的路径
       worker.onmessage=function(e){ //监听从新线程发送过来的数据
         div.innerHTML=e.data;
         var time2=new Date()*1;
         console.log("time spend:"+(time2-time1)+"ms");
       }





       worker.postMessage(36);//向新线程发送数据
     }else{
       alert("Your browser do not support WebWoker");
     }
  }
</script>

fibonacci.js:
var fibonacci=function (n){
  return n<3?n:(arguments.callee(n-1)+arguments.callee(n-2));
}
onmessage=function(e){
  var num=parseInt(e.data,10);
  postMessage(fibonacci(num));//向主页面发送数据
}

基本的使用方法已在代码中做注释了,查看控制台,可以看见很快就打印出执行时间了。所以我们得出的结论是:WebWorker适合在前端执行复杂的大量的计算。需要注意的是,WebWorker不支持跨域,本地测试还是用http协议,不要用file协议,否则不能创建Worker对象而报脚本错误 。

再谈JavaScript线程

        如果我们需要连续执行多个postMessage操作,最好不要work.postMessage一直写,像这样:

worker.postMessage(36);

    worker.postMessage(36);

    worker.postMessage(36);

       因为此时只有一个WebWorker实例,postMessage会顺序执行而不是异步执行,就不能充分发挥它的性能了。可以通过创建多个WebWorker实例来发送数据。

        需要注意的几点事项有:

        1、我们观察到WebWorker通过接受一个url来创建一个worker,而jsonp的实现原理就是通过动态插入script标签加载数据,那我们尝试用WebWorker来实现同样的事情不是更好吗?因为WebWorker是多线程的,没有阻塞,岂不美哉?但实际上经过实验,我们发现WebWorker表现并不如意。所以这并不是它擅长的事,我们还是不要让它越俎代庖的好。

        2、WebWorker在接受其他来源信息的时候,其实也给站点的安全带来了隐患,如果接收不明来源的脚本信息,可能会导致XSS注入攻击。所以这点需要防范,其实我们上面例子中使用innerHTML是不安全的,可以使用innerText或现代浏览器提供的textContent来替代,以过滤掉html标签。

今天比较累了,想睡觉了,先写这么多吧。

Javascript 相关文章推荐
Javascript 获取字符串字节数的多种方法
Jun 02 Javascript
jQuery 学习第七课 扩展jQuery的功能 插件开发
May 17 Javascript
用方法封装javascript的new操作符(一)
Dec 25 Javascript
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
Jan 24 Javascript
js Calender控件使用详解
Jan 05 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
Jul 09 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
Oct 27 Javascript
vue实现可增删查改的成绩单
Oct 27 Javascript
jQuery实现页面滚动时智能浮动定位
Jan 08 Javascript
详解原生JS回到顶部
Mar 25 Javascript
Nuxt的动态路由和参数校验操作
Nov 09 Javascript
vue脚手架项目创建步骤详解
Mar 02 Vue.js
javascript实现判断鼠标的状态
Jul 10 #Javascript
javascript检查浏览器是否已经启用XX功能
Jul 10 #Javascript
javascript实现确定和取消提示框效果
Jul 10 #Javascript
javascript实现的简单的表单验证
Jul 10 #Javascript
jQuery原生的动画效果
Jul 10 #Javascript
简述Jquery与DOM对象
Jul 10 #Javascript
JavaScript声明变量名的语法规则
Jul 10 #Javascript
You might like
PHP如何编写易读的代码
2007/07/10 PHP
IP138 IP地址查询小偷实现代码
2010/02/15 PHP
php错误级别的设置方法
2013/06/17 PHP
php selectradio和checkbox默认选择的实现方法详解
2013/06/29 PHP
php实现处理输入转义字符的代码
2015/11/08 PHP
Yii2实现上下联动下拉框功能的方法
2016/08/10 PHP
jQuery 中关于CSS操作部分使用说明
2007/06/10 Javascript
js数组循环遍历数组内所有元素的方法
2014/01/18 Javascript
node.js中的querystring.escape方法使用说明
2014/12/10 Javascript
jQuery带进度条全屏图片轮播特效代码分享
2020/06/28 Javascript
javascript常见数字进制转换实例分析
2016/04/21 Javascript
深入理解setTimeout函数和setInterval函数
2016/05/20 Javascript
JS实现iframe自适应高度的方法示例
2017/01/07 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
2020/02/28 Javascript
js+css实现扇形导航效果
2020/08/18 Javascript
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
2020/12/25 Vue.js
[45:15]Optic vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
在Python中使用poplib模块收取邮件的教程
2015/04/29 Python
Python中struct模块对字节流/二进制流的操作教程
2017/01/21 Python
Django与JS交互的示例代码
2017/08/23 Python
Python中表示字符串的三种方法
2017/09/06 Python
详解python字节码
2018/02/07 Python
Python制作exe文件简单流程
2019/01/24 Python
python3.6实现学生信息管理系统
2019/02/21 Python
网易2016研发工程师编程题 奖学金(python)
2019/06/19 Python
python分割一个文本为多个文本的方法
2019/07/22 Python
超实用的 30 段 Python 案例
2019/10/10 Python
pytorch SENet实现案例
2020/06/24 Python
HTML5和以前HTML4的区别整理
2013/10/20 HTML / CSS
Mio Skincare中文官网:肌肤和身体护理
2016/10/26 全球购物
Photobook澳大利亚:制作相片书,婚礼卡,旅行相簿
2017/01/12 全球购物
中国海淘族值得信赖的海淘返利网站:55海淘
2017/01/16 全球购物
家长会演讲稿范文
2014/01/10 职场文书
群众路线教师自我剖析材料
2014/09/29 职场文书
Python爬虫基础之初次使用scrapy爬虫实例
2021/06/26 Python
python可视化大屏库big_screen示例详解
2021/11/23 Python