多线程概念：

多线程是指从软件或硬件上实现多个线程并发执行的技术。具有多线程能力的计算机因有硬件支持而能够在

同一时间执行多于一个线程，进而提升整理处理性能。具有这种能力的系统包括对称多处理机，多核心处理器以及

芯片级多处理或同事多线程处理器，在一个程序中，这些独立运行的程序片段叫做线程，利用它编程的概念

就叫做多线程处理。

具有多线程能力的计算机因有硬件支持而能够在同一时间执行多于一个线程，进而提升整体处理性能。



Concurrent.Thread.js

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="./Concurrent.Thread.js"></script>

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <style>

    div{

        width: 100px;

        height: 100px;

        cursor: pointer;

        background: orange;

    }

    </style>

</head>

<body>

    <div id="test">测试点击</div>

    <script>

    // 将alert1拿出来，后面有异步事件队列

    //alert(1);

    Concurrent.Thread.create(function(){

        $('#test').click(function(argument){

           alert(1);

       });

    //    下面有一段特别复杂的函数

    for(var i = 0;i<1000000;i++){

        console.log(i);

    }

    })

    </script>

</body>

</html>

webwork

//index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <!-- <script src="./Concurrent.Thread.js"></script> -->

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <style>

    div{

        width: 100px;

        height: 100px;

        cursor: pointer;

        background: orange;

    }

    </style>

</head>

<body>

    <div id="test">测试点击</div>

    <script>

    // 将alert1拿出来，后面有异步事件队列

    //alert(1);

    // Concurrent.Thread.create(function(){

    //     $('#test').click(function(argument){

    //        alert(1);

    //    });

    // //    下面有一段特别复杂的函数

    // for(var i = 0;i<1000000;i++){

    //     console.log(i);

    // }

    // })

    var worker = new Worker('task.js');

    worker.onmessage=function(event){

        alert(event.data);

    }

    worker.postMessage(100000);

    </script>

    <script>

    var worker = new SharedWorker('task.js');

    worker.post.addEventListener('message',function(e){

        console.log(e.data);

    },false)

    worker.port.start();

    worker.port.postMessage('100');

    </script>

</body>

</html>


//task.js

// onmessage=function(event){

//     var num = event.data;

//     var result = 0;

//     for(var i=0;i<num;i++){

//         result+=i;

//     }

//     //向线程创建源送回消息

//     postMessage(result);

// }

onconnect = function(e){

    var port = e.ports[0];

    port.postMessage('connection success');

    port.onmessage = function(e){

        if(!e.data=='get'){

            for(var i=0;i<e.data;i++){

                result++;

            }

        }

        port.postMessage(result);

    }

}

by道理都懂，这个视频不懂

本文看自前端常用的库和实用技术之JavaScript多线程

前端常用的库和实用技术之JavaScript多线程的更多相关文章

  1. 前端常用的库和实用技术之JavaScript面向切面编程

    Aspect Oriented Programming(AOP)面向切面编程是一个比较热门的话题. AOP主要实现的目的是针对业务处理过程中的切面进行提取,它所面对的是处理过程 中的某个步骤或阶段,以 ...

  2. 前端常用的库和实用技术之JavaScript高级函数

    1.惰性载入函数 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  3. 前端常用的库和实用技术之JavaScript高级技巧

    javascript高级技巧 变量作用域和闭包 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  4. 前端常用的库和实用技术之JavaScript 模块化

    模块化概念 AMD是requirejs在推广过程中对模块化定义的规范化产出. 异步加载模块,依赖前置,提前执行 Define定义模块define(['require','foo'],function( ...

  5. javascript功能插件大集合 前端常用插件 js常用插件

    转载来源:https://github.com/jobbole/aw... 包管理器管理着 javascript 库,并提供读取和打包它们的工具.•npm – npm 是 javascript 的包管 ...

  6. python进阶05 常用问题库（1）json os os.path模块

    python进阶05 常用问题库(1)json os os.path模块 一.json模块(数据交互) web开发和爬虫开发都离不开数据交互,web开发是做网站后台的,要跟网站前端进行数据交互 1.什 ...

  7. Python常用的库简单介绍一下

    Python常用的库简单介绍一下fuzzywuzzy ,字符串模糊匹配. esmre ,正则表达式的加速器. colorama 主要用来给文本添加各种颜色,并且非常简单易用. Prettytable ...

  8. WEB前端常用网站收集

    WEB前端常用网站收集整理 w3school.w3schools 前端里.脚本之家.素材家园 17素材.frontopen NEC更好的CSS方案.一些常用的JS实例 Bootstrap  官网  h ...

  9. 【转】《高级前端3.6》JavaScript多线程——Concurrent.Thread.js, WebWork

    原文链接:http://www.cnblogs.com/woodk/articles/5199536.html JavaScript多线程,在HTML5 WebWork没出现之前很多人都是用Concu ...

随机推荐

  1. ATM+购物车结构

    ATM+购物车 1.需求分析 2.程序设计及目录设计 3.编写程序 4.调试程序

  2. 如何省略.jsx文件名

    在webpack.config.js文件夹中module.exports中添加: resolve:{ extensions:[".js", ".jsx", &q ...

  3. 当引入的类库存在一个类型时，提示“xxx”和“xxx”之间的不明确引用时，消除歧义的方法

    //using _2_命名空间和程序集.WidgetA; //using _2_命名空间和程序集.WidgetB; using System; using System.Collections.Gen ...

  4. 37-Ubuntu-用户管理-02-查看用户信息

    查看用户信息 序号 命令 作用 01 id 用户名 查看用户UID和GID信息 02 cat -n /etc/passwd 查看用户详细信息,参数-n显示行号 03 cat -n /etc/group ...

  5. 一个服务io占满，服务器无响应

    (1).服务器io占满,服务无响应, sar -q -f  /var/log/sa/sa28 上图显示plist-sz 增加了一倍 plist-sz 说明:进程列表中的进程(processes)和线程 ...

  6. UVA11021 Tribles 概率dp

    题目传送门 题意:开始有$k$只兔子,每只都是活一天就死,每只死前都会有$pi$的概率生出$i$只兔子.求$m$天后兔子死光的概率. 思路: 设$f[i]$为一只兔子在第i天死完的概率,那么答案就是$ ...

  7. TFS发布的时候出现 ENOENT: no such file or directory, stat 'E:\vsts-agent\_work\r57\a\KingEagle-Mysql-Dev\drop\12917.zip' 解决方案

    出现 ENOENT: no such file or directory, stat 'E:\vsts-agent\_work\r57\a\KingEagle-Mysql-Dev\drop\12917 ...

  8. delphi Treeview用法

    Treeview用于显示按照树形结构进行组织的数据.         Treeview控件中一个树形图由节点(TreeNode)和连接线组成.TtreeNode是TTreeview的基本组成单元.   ...

  9. 如何打造7*24h持续交付通道？阿里高级技术专家的5点思考

    我们对于研发效能的讨论,本质上是提高整个技术生态中的协同效率.如果仅从研发角度出发,技术团队要实现的终极目标是7*24小时的灵活发布窗口,以及更快的业务迭代能力. 7*24小时发布窗口的实现其实并不简 ...

  10. kafka-manager监控工具的安装和使用

    kafka-manager监控工具的使用 第一步:对kafkamanager进行下载并编译 此步骤略:可参照成功与否不详,https://www.jianshu.com/p/174b6eb10d9d ...