再谈JavaScript线程

2024-04-14 04:28:19

代码判断一：

<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对象而报脚本错误。

如果我们需要连续执行多个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标签。

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

Java线程调度之线程休眠用法分析

本文实例分析了Java线程调度之线程休眠用法.分享给大家供大家参考.具体分析如下: Java线程调度是Java多线程的核心,只有良好的调度,才能充分发挥系统的性能,提高程序的执行效率. 这里要明确的一点,不管程序员怎么编写调度,只能最大限度的影响线程执行的次序,而不能做到精准控制. 线程休眠的目的是使线程让出CPU的最简单的做法之一,线程休眠时候,会将CPU资源交给其他线程,以便能轮换执行,当休眠一定时间后,线程会苏醒,进入准备状态等待执行. 线程休眠的方法是Thread.sleep
浅谈Javascript线程及定时机制

setTimeout.setInterval的使用 Javascript api文档中定义setTimeout和setInterval第二个参数意义分别为间隔多少毫秒后回调函数被执行和每隔多少毫秒回调函数被执行.但随着工作经验的积累,我们发现事实并非如此. 比如 div.onclick=function(){ setTimeout(function(){ document.getElementById('input').focus(); },0); } 就解释不通了,立即执行就立即执行呗,干嘛还
Java线程同步实例分析

本文实例讲述了Java线程同步的用法.分享给大家供大家参考.具体分析如下: 多线程的使用为我们的程序提供了众多的方便,同时它也给我们带来了以往没有考虑过的麻烦.当我们使用多线程处理共享资源时意外将会发生:比如我们一起外出就餐,每个人都是一个线程,餐桌上的食物则是共享资源,当我看到红烧鸡腿上桌后立即拿起筷子直奔目标,眼看着就得手的时候,突然---鸡腿消失了,一个距离盘子更近的线程正在得意地啃着. 为了避免上述问题的发生,Java为我们提供了"synchronized(同步化)修饰符"来避
Java中线程休眠编程实例

import java.awt.*; import java.util.*; import javax.swing.*; public class SleepMethodTest extends JFrame { /** * */ private static final long serialVersionUID = 1L; private Thread t; // 定义颜色数组 private static Color[] color = { Color.BLACK, Color.BLUE,
Java中线程用法总结

本文实例总结了Java中线程用法.分享给大家供大家参考.具体分析如下: 1.线程是基本调度单元.共享进程的资源,如内存和文件句柄.但有自己的pc(程序计数器),stack(线程栈)及本地变量 2.线程的优势: a) 充分利用多处理器 b) 可以简化模型.特定任务给特定线程.如servlets及rmi等框架. c) 对异步事件的简单处理.如socket,nio使用更复杂.而现在的操作系统支持更大数量的线程. d) 界面的更佳响应 3.内部锁:synchronized块.互斥.可重入(reentra
Java实现Linux下双守护进程

一.简介现在的服务器端程序很多都是基于Java开发,针对于Java开发的Socket程序,这样的服务器端上线后出现问题需要手动重启,万一大半夜的挂了,还是特别麻烦的. 大多数的解决方法是使用其他进程来守护服务器程序,如果服务器程序挂了,通过守护进程来启动服务器程序. 万一守护进程挂了呢?使用双守护来提高稳定性,守护A负责监控服务器程序与守护B,守护B负责监控守护A,任何一方出现问题,都能快速的启动程序,提高服务器程序的稳定性. Java的运行环境不同于C等语言开发的程序,Java程序跑在JVM
Java多线程编程中使用DateFormat类

DateFormat 类是一个非线程安全的类.javadocs 文档里面提到"Date formats是不能同步的. 我们建议为每个线程创建独立的日期格式. 如果多个线程同时访问一个日期格式,这需要在外部加上同步代码块." 以下的代码为我们展示了如何在一个线程环境里面使用DateFormat把字符串日期转换为日期对象.创建一个实例来获取日期格式会比较高效,因为系统不需要多次获取本地语言和国家. public class DateFormatTest { private final Da
Java线程之守护线程（Daemon）用法实例

本文实例讲述了Java线程之守护线程(Daemon)用法.分享给大家供大家参考.具体如下: 守护线程(Daemon) Java有两种Thread:"守护线程Daemon"与"用户线程User". 我们之前看到的例子都是用户,守护线程是一种"在后台提供通用性支持"的线程,它并不属于程序本体. 从字面上我们很容易将守护线程理解成是由虚拟机(virtual machine)在内部创建的,而用户线程则是自己所创建的.事实并不是这样,任何线程都可以是&qu
Java并发编程示例(七)：守护线程的创建和运行

Java有一种特殊线程,守护线程,这种线程优先级特别低,只有在同一程序中的其他线程不执行时才会执行. 由于守护线程拥有这些特性,所以,一般用为为程序中的普通线程(也称为用户线程)提供服务.它们一般会有一个无限循环,或用于等待请求服务,或用于执行任务等.它们不可以做任何重要的工作,因为我们不确定他们什么时才能分配到CPU运行时间,而且当没有其他线程执行时,它们就会自动终止.这类线程的一个典型应用就是Java的垃圾回收. 在本节示例中,我们将创建两个线程,一个是普通线程,向队列中写入事件:另外一个是
再谈JavaScript线程

代码判断一: <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); } &
再谈Javascript中的基本类型和引用类型(推荐)

一.基本类型和引用类型概述 js中数据类型的值包括:基本类型值和引用类型值基本数据类型:undefined;null;boolean;number;string 引用类型值:保存在内存中,js不允许直接访问内存位置,因此时操作引用而不是实际对象二.如何检测数据类型 1.基本数据类型的检测:使用typeof var s = "AAA"; alert(typeof s); //返回string 2.引用类型(对象类型)检测:使用instanceof alert(person insta
再谈javascript常见错误及解决方法

初学Javascript,每天总是被很小的问题折磨半天,今晚就有好几个小问题. 第一:全部使用双引号造成匹配错误 <input type="checkbox" onmouseover="document.getElementById("test").style.display="none":"/> 改行一直报错误:unexpected toke "}" 检查半天也没有发现错误,对照发现视频上是
再谈javascript面向对象编程

另外这篇文章是一篇入门文章,我也是才开始学习Javascript,有一点心得,才想写一篇这样文章,文章中难免有错误的地方,还请各位不吝吐槽指正吐槽Javascript 初次接触Javascript,这门语言的确会让很多正规军感到诸多的不适,这种不适来自于Javascript的语法的简练和不严谨,这种不适也来自Javascript这个悲催的名称,我在想网景公司的Javascript设计者在给他起名称那天一定是脑壳进水了,让Javascript这么多年来受了这么多不白之冤,人们都认为他是Java的
再谈javascript原型继承

真正意义上来说Javascript并不是一门面向对象的语言,没有提供传统的继承方式,但是它提供了一种原型继承的方式,利用自身提供的原型属性来实现继承. 原型与原型链说原型继承之前还是要先说说原型和原型链,毕竟这是实现原型继承的基础. 在Javascript中,每个函数都有一个原型属性prototype指向自身的原型,而由这个函数创建的对象也有一个__proto__属性指向这个原型,而函数的原型是一个对象,所以这个对象也会有一个__proto__指向自己的原型,这样逐层深入直到Object对象的
再谈JavaScript异步编程

随着前端的发展,异步这个词真是越来越常见了.假设我们现在有这么一个异步任务: 向服务器发起数次请求,每次请求的结果作为下次请求的参数. 来看看我们都有哪些处理方法: Callbacks 最先想到也是最常用的便是回调函数了,我们来进行简单的封装: let makeAjaxCall = (url, cb) => { // do some ajax // callback with result } makeAjaxCall('http://url1', (result) => { result =
再谈javascript注入黑客必备！

什么是javascript注入攻击? 1.JavaScript注入就是在浏览器地址栏中输入一段js代码,用来改变页面js变量.页面标签的内容. 使用Javascript注入,用户不需要关闭或保存网页就可以改变其内容,这是在浏览器的地址栏上完成的.命令的语法如下: javascript:alert(#command#) 例如,如果你想在http://www.example.com站点上看到一个alert警告框,那么首先在地址栏上输入URL并等待页面加载完成,然后删掉URL并输入: javascri
再谈javascript图片预加载技术(详细演示)

而本文所提到的预加载技术主要是让javascript快速获取图片头部数据的尺寸. 一段典型的使用预加载获取图片大小的例子: 复制代码代码如下: var imgLoad = function (url, callback) { var img = new Image(); img.src = url; if (img.complete) { callback(img.width, img.height); } else { img.onload = function () { callback(
再谈Javascript中的异步以及如何异步

为什么需要异步?why?来看一段代码. 问题1: for(var i=0;i<100000;i++){ } alert('hello world!!!'); 这段代码的意思是执行100...次后再执行alert,这样带来的问题是,严重堵塞了后面代码的执行,至于为什么,主要是因为JS是单线程的. 问题2: 我们通常要解决这样一个问题,如果我们需要在head里面加入script代码的话,一般会将代码写在window.onload里面(如果操作了dom的话),你有没有想过,为什么要加window.on

再谈JavaScript线程

相关推荐

随机推荐