多线程概念：

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

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

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

就叫做多线程处理。

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



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. divide方法

    java.math.BigDecimal.divide(BigDecimal divisor, RoundingMode roundingMode) 返回一个BigDecimal,其值为(this/除 ...

  2. 一份完整的 Java 成神路线图，值得收藏！

    Java,是现阶段中国互联网公司中,覆盖度最广的研发语言. 有不少朋友问,如何深入学习Java后端技术栈,今天分享一个,互联网牛人整理出来的完整的Java成神路线图. 一:常见模式与工具 学习Java ...

  3. springcloud中config启动时候报错Caused by: java.lang.IllegalArgumentException: Could not resolve placeholder 'config.info' in value "${config.info}"

    -noverify -Dspring.output.ansi.enabled=always -Dcom.sun.management.jmxremote -Dcom.sun.management.jm ...

  4. JavaScript小实例-文本循环变色效果

    在现实生活中我们常常看到文字循环变色的效果,此效果不仅能让人们印象深刻,还提高了美观度,代码及注释如下: <!DOCTYPE html> <html> <head> ...

  5. 网络编程之 TCP-UDP的详细介绍

    一.TCP协议 1. TCP协议的特点 1.TCP是面向连接的运输层协议.这就意味着,在使用该协议之前,必须建立TCP连接.在传输数据完毕后,必须释放已经建立的TCP连接. 2.每一条TCP连接只能有 ...

  6. mysql数据库 --数据类型、约束条件

    今日内容 表的详细使用 1.创建表的完成语法 2.字段类型 整型.浮点型.字符类型.日期类型.枚举与集合类型 3.约束条件 primary key.unique.not null.default 一. ...

  7. OneDrive一直后台占用CPU的一种解决办法

    系统版本:Windows 7 ultimate x64 Onedrive版本:17.3.6998.0830 最近发现Onedrive一直在后台占用15%左右的CPU,很是觉得奇怪,网上的解决方案是删除 ...

  8. linux inode节点数报警处理

    1.问题描述 zabbix 收到一台服务器的Free inodes is less than 20% on volume / 报警 登陆服务器查看 产生原因:一般就是小文件比较多,占用大量的inode ...

  9. Sublime Text3中MarkDown的使用

    前言 当我们想要在Sublime文本编辑器中编辑markdown时,需要先安装markdown插件,因为Sublime里默认没有安装该插件,同时在编辑markdown文本时可以实时预览编辑效果. 具体 ...

  10. vue tabNav 点击

    <template> <div class="content"> <header class="tab_nav"> < ...