Work线程

清华小菜

于 2023-03-28 10:57:50 发布

阅读量209

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/C90283/article/details/129811479

版权

JavaScript的主线程执行复杂任务会导致页面阻塞。通过使用Web Worker创建后台线程，可以实现计算密集型任务的异步处理，提高用户体验。Worker通过指定的脚本URL启动，子线程与主线程间通过postMessage进行通信，实现数据交换，即使在多线程嵌套情况下也能有效管理任务。

摘要由CSDN通过智能技术生成

在平时的运行的javascript脚本都在主线程中执行，如果当前脚本包含复杂的、耗时的代码。那么JavaScript脚本的执行将会被阻塞，甚至整个刘看齐都是提示失去响应。
例子：
假设程序需要计算、收集1~9999的之间所有质数，不采用后台线程，而是之间是使用JavaScript前台线程的计算、收集质数。代码如下。

<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 计算质数 </title>
</head>
<body>
    <p>已经发现的所有质数：<div id="result"></div></p>
    <script type="text/javascript">
        var n = 1;
        search: 
        while (n < 99999) 
        {
   
            // 开始搜寻下一个质数
            n += 1;
            for (var i = 2; i <= Math.sqrt(n); i++)
            {
   
                // 如果除以n的余数为0，开始判断下一个数字。
                if (n % i == 0)
                {
   
                    continue search;
                }
            }
            document.getElementById('result').innerHTML += (n + ", ");
        }
    </script>
</body>
</html>

浏览器久久未响应，一篇空白。最后过来七八秒全部崩出来。如果改为使用webWorker启用多线程呢？使用Worker创建贤臣非常简单，只要调用Worker的构造器就可以。
Worker(scriptURL):scriptURL用于指定所使用JavaScript脚本的路径

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script>
        var worker = new Worker('worker12.js');
        worker.onmessage = function (event) {
   
            document.getElementById("result").innerHTML += event.data + ",";
        }        
    </script>
</head>
<body>
    <