javascript Worker 教程

文章目录

javascript Worker 教程

一般遇到计算量大，占用内存的高的场景，应该考虑使用 javascript Worker ，它让javascript从单线程变为了多线程。

它的最大优点是，通过多线程避免了因为大量的计算导致页面卡顿。我们看下下面这个例子。

index.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>hello world</h1>
    <input type="text">
    <script>
        let a = 1000000;
        for (let i = 0; i < a; i++) {
    
    
            console.log(i);
        }
    </script>

</body>

</html>

当你打开这个文件的时候，页面会卡死，用户无法输入任何内容，导致用户体验非常不好。

使用 Worker 也很简单，如下：

首先我们需要判断浏览器是否支持 Worker。

 if (window.Worker) {
    
    
 	// ........
 }

然后创建一个新文件worker.js，内容如下：

let a = 1000000;
for (let i = 0; i < a; i++) {
    
    
    console.log(i);
}
postMessage('执行完毕')

接着再我们index.html中调用 Worker：

        // 检测是否支持worker
        if (window.Worker) {
    
    
            var myWorker = new Worker('./worker.js');
            myWorker.onmessage = function (e) {
    
    
                console.log('接收到消息：', e);
            }
        }

刷新index.html页面执行，可以发现页面没有卡顿了，即使计算量很大。

执行方法：

index.html

标题	内容
发送消息	myWorker.postMessage()
接收消息	myWorker.onmessage=()=>{}
终止	myWorker.terminate()

worker.js

发送消息	接收消息
发送消息	postMessage()
接收消息	onmessage=()=>{}
终止	close()

使用Worker虽然很好，但依旧需要考虑它的兼容性。

javascript Worker 教程

javascript Worker 教程

文章目录

猜你喜欢