web workers

Web Workers实现后台脚本操作

最新推荐文章于 2025-12-01 03:02:46 发布

原创最新推荐文章于 2025-12-01 03:02:46 发布 · 247 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#web workers

知识点摘要专栏收录该内容

4 篇文章

订阅专栏

博客介绍了Web Workers的应用，使用它可让Web应用在独立于主线程的后台线程运行脚本操作。其好处是能在独立线程执行费时任务，避免主线程（通常是UI线程）被阻塞或放慢，还提及了index.html和worker.js。

通过使用Web Workers，Web应用程序可以在独立于主线程的后台线程中，运行一个脚本操作。这样做的好处是可以在独立线程中执行费时的处理任务，从而允许主线程（通常是UI线程）不会因此被阻塞/放慢。

index.html

<!DOCTYPE html>
<html lang="zh">
<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></title>
</head>
<body>
	<script type="text/javascript">
	//WEB页主线程
	var worker =new Worker("worker.js"); //创建一个Worker对象并向它传递将在新线程中执行的脚本的URL
	worker.postMessage({
        paramA: 20,
        paramB: 215
    });     //向worker发送数据
	worker.onmessage = function(evt){     //接收worker传过来的数据函数
	   console.log(evt.data);              //输出worker发送来的数据
	}
	</script>
</body>
</html>

worker.js

onmessage =function (evt){
  var d = evt.data;//通过evt.data获得发送来的数据
  console.log(evt);
  var result = d.paramA * d.paramB;
  postMessage( result );//将获取到的数据发送会主线程
}