前端經常使用的庫和實用技術之JavaScript多線程

時間 2019-11-13

標籤前端經常使用實用技術 javascript 多線程欄目 JavaScript 简体版

原文原文鏈接

多線程概念：
多線程是指從軟件或硬件上實現多個線程併發執行的技術。具備多線程能力的計算機因有硬件支持而可以在
同一時間執行多於一個線程，進而提高整理處理性能。具備這種能力的系統包括對稱多處理機，多核心處理器以及
芯片級多處理或同事多線程處理器，在一個程序中，這些獨立運行的程序片斷叫作線程，利用它編程的概念
就叫作多線程處理。
具備多線程能力的計算機因有硬件支持而可以在同一時間執行多於一個線程，進而提高總體處理性能。

Concurrent.Thread.jshtml

<!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多線程jquery