javascript Worker 教程

最新推荐文章于 2024-05-29 09:33:19 发布

一拖再拖一拖再拖

最新推荐文章于 2024-05-29 09:33:19 发布

阅读量698

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_41974199/article/details/130649500

版权

JavaScript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

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);
            }
        }