多线程概念：

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

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

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

就叫做多线程处理。

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



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. JAVA求回文数

    Manacher算法(马拉车算法)时间复杂度O(n) 用过中心检测法(就是上面说的O(n2) O(n^2)O(n )的算法)的都知道对于奇数回文串和偶数回文串的处理是不同的,奇数回文串有2n+1 2n ...

  2. java8如何对List<Bean>进行去重和覆盖

    背景:有一批数据源从kafka给过来,接收到后需要处理,然后入库,我们用一个线程消费下来,一次消费30000条, 按照对象的概念,可以用List<Person>来表示,因为某种原因,需要根 ...

  3. XVIII Open Cup named after E.V. Pankratiev. GP of SPb

    contest Link A. Base i − 1 Notation solved by sdcgvhgj 238 求出a+b的2进制后从低位到高两位两位地转化为i-1进制 i-1进制的第2k位和第 ...

  4. vue中的import {} from '@/api/api'

    例:import {queryDepartTreeList, searchByKeywords} from '@/api/api' 首先查看vue.config.js文件,在这个文件里面定义了定义了@ ...

  5. Mariadb 10.2.8版本GTID主从环境搭建以及切换

    1.首先搭建主从 主环境:192.168.1.117 从环境:192.168.1.123 a.首先以二进制包的形式安装好MariaDB (忽略不计) b.配置环境的变量 通配 [mysqld] bin ...

  6. 论文阅读笔记：《Generating Question-Answer Hierarchies》

    题目: <Generating Question-Answer Hierarchies> 作者: Kalpesh Krishna & Mohit Iyyer What: 1.SQU ...

  7. 影响RAKsmart服务器稳定性的相关因素

    RAKsmart美国服务器近年来凭借着成熟的技术和性价比吸引着广大站长,那RAKsmart服务器稳定性怎么样呢?有什么影响因素呢?下面来了解一下吧. 因素一:服务器配置 服务器能正常运营是建立在服务器 ...

  8. BCZM: Chapter 2

    2.1 二进制数中 1 的个数 实现一个函数,输入一个无符号整数,输出该数二进制中的1的个数.例如把9表示成二进制是1001,有2位是1,因此如果输入9,该函数输出2 分析与解法 解法1:利用十进制和 ...

  9. 在Vue项目中，添加的背景图片在服务器上不显示，如何处理

    遇到的问题: 在vue项目开发过程中,我们常常会在页面中添加背景图片.可是当我们在样式中添加了背景图片,编译打包部署到服务器上时,发现图片并不能显示出来,这是为什么呢~~~ 我们一般写的css样式如下 ...

  10. 面向对象oop 和类

    面向对象与面向过程的区别 面向对象:面向对象的思维模式说白了就是分类思维模式.思考问题首先会解决问题需要哪些分类,然后对这些分类进行单独思考.最后,才对某个分类下的细节进行面向过程的思索 自我理解(领 ...