多线程概念：

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

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

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

就叫做多线程处理。

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



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. ajaxFileUpload.js插件支持多文件上传的方法

    前提条件:ajaxFileUpload.js插件多文件上传步骤:1.修改源码,(源码只支持单个文件的上传):复制代码 代码如下: //修改前代码------- //var oldElement = j ...

  2. 022_IO流

    对象流 // FileInput.FileOutputStream(节点流)ObjectInputStreamObjectOutputStream 序列化 把内存的数据信息永久的保存在硬盘中,这个过程 ...

  3. Ubuntu12.04开机自动挂载windows分区

    最近使用Ubuntu12.04时不知到怎么搞的原本能自动识别的Windows的C .D .E盘突然间无法识别了,于是上网搜了一下Ubuntu12.04下自动挂载Windows NTFS分区的方法. 还 ...

  4. Java多态的实现机制是什么，写得非常好！

    作者:crane_practice www.cnblogs.com/crane-practice/p/3671074.html Java多态的实现机制是父类或接口定义的引用变量可以指向子类或实现类的实 ...

  5. 【牛客提高训练营5A】同余方程

    题目 吉老师的题做不动啊 首先\([l_1,r_1],[l_2,r_2]\)并不是非常好做,我们考虑将其拆成前缀信息 设\(solve(n,m)=\sum_{i=0}^n\sum_{j=0}^m[m| ...

  6. zabbix--添加用户

    用户和用户组   概述 Zabbix 中的所有用户都通过 Web 前端去访问 Zabbix 应用程序.并为每个用户分配唯一的登陆名和密码. 所有用户的密码都被加密并储存于 Zabbix 数据库中.用户 ...

  7. Flatty Shadow图标自动产生器——在线生成各种扁平化 ICON

    在扁平化风格越来越流行的今天,网页.软件界面和图标的设计大都采用了扁平化风格.特别是扁平化图标的设计,摒弃了一切3D元素的设计,阴影.纹理.透视神马的统统不要,让图标简洁高效,富有现代感. 今天给大家 ...

  8. 微信小程序中实现左右滑动图片翻页

    页面代码 <swiper class="container" indicator-dots="{{indicatordots}}" autoplay=&q ...

  9. Vue-cli开发笔记一----------项目的结构

    配置文件package.json: 搜索了配置的原理:https://segmentfault.com/a/1190000000344102 里面讲到:npm会在package.json文件中找scr ...

  10. ajax 工作原理

    Ajax的优缺点及工作原理? 定义和用法: AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).Ajax 是一种用于创建快速动态网 ...