web worker初体验

最新推荐文章于 2024-09-11 15:33:18 发布

燕傾

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量88

点赞数

文章标签： javascript html

本文链接：https://blog.csdn.net/qq_40748288/article/details/123608019

版权

Web Worker是JavaScript中用于处理大数据和复杂计算的技术，它在后台线程运行，避免阻塞主线程，提供流畅的用户体验。通过创建Worker实例，将计算任务转移到Worker线程，主线程与Worker通过消息传递通信。本文通过一个大数累加的例子展示了如何使用Web Worker，强调了其同源限制、DOM访问限制及通信方式，并提供了完整的示例代码。

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

web worker

在浏览器中,js是单线程执行的,对于数据量大的处理会引起页面的卡顿以及浏览器的假死;web workder 可以理解为在js主线程中一个独立运行环境实体;web worker 允许把主线程需要执行的操作转接给web worker 让web woker 来执行处理数据量大的操作,在这个操作过程中,页面不会卡顿,能有较好的用户体验.

实际运用

当页面需要执行数据量大的处理(这里使用for循环来制造卡顿)

	function accumulation(){
		let count = 0;
		for(let i = 0;i<999999999999999;i++){
			count += i;
		}
		return count;
	}

上面函数执行会有相应的计算过程,计算过程中页面是不能够进行一个交互的.这时引入
web worker 能有效的解决这个问题;

	//main.js
	//1 使用脚本创建 web worker 
	cont worker = new Worker('https://woker.js');
	
	//2 需要执行计算时,向web worker 发送执行信息
	worker.postMessage({msg:"执行"});
	//5 监听web worker的消息
	worker.addEventListener('message',(e)=>{
		const { reslut } = e.data;
		//获取到了 计算结果
		console.log(reslut);
	})

3.将计算的代码放在web worker 中执行,当web worker 接受到信息执行计算操作

	//woker.js
	function accumulation(){
		let count = 0;
		for(let i = 0;i<999999999999999;i++){
			count += i;
		}
		return count;
	}
	//3 监听message事件,接受到信息后,获取到接受到的信息,执行相应的操作
	self.addEventListener('message',(e)=>{
		const { msg } =  e.data;
		if(msg === "执行"){
			const result = accumulation();
			//4 计算完成后通过消息将计算结果返回给主线程
			self.postMessage({result})
		}
	})

web worker的注意事项

同源限制:分配给web worker 线程运行的脚本文件,必须与主线程文件同源
DOM限制:worker线程所在的全局对象,无法读取主线程所在页面的DOM对象.也无法使用document,window,parent这些对象,但是worker线程中可以访问nacigator对象和location对象
通信联系:worker线程和主线程不在同一个上下文环境,他们不能直接通信,必须通过消息通信
脚本限制:worker不能执行alert,confirm方法,但是可以使用xmlHttpRequest对象发送ajax请求
文本限制: worker 线程无法读取本地文件,即不能打开本地的文件系统,它所加载的脚本必须来自网络

使用字符串使用web woker

 //1 将要在web worker 执行的代码存为字符串
 const data = `
	function accumulation(){
		let count = 0;
		for(let i = 0;i<999999999999999;i++){
			count += i;
		}
		return count;
	}
	//3 监听message事件,接受到信息后,获取到接受到的信息,执行相应的操作
	self.addEventListener('message',(e)=>{
		const { msg } =  e.data;
		if(msg === "执行"){
			const result = accumulation();
			//4 计算完成后通过消息将计算结果返回给主线程
			self.postMessage({result})
		}
	})
`;
//2 生成二进制 数据 Blob
const blob = new Blob([data]);
//2 生成 url 
const url = window.URL.createObjectURL(blob);
//3 使用url 生成web worker
const worker = new Worker(url);
...

完整代码

<!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>
  <script>
    const data = `
      function accumulation(){
        let count = 0;
        for(let i = 0;i<99999999999;i++){
          count += i;
        }
        return count;
      }
      //3 监听message事件,接受到信息后,获取到接受到的信息,执行相应的操作
      self.addEventListener('message',(e)=>{
        const { msg } =  e.data;
        console.log('接受到了消息,执行中');
        if(msg === "执行"){
          const result = accumulation();
          //4 计算完成后通过消息将计算结果返回给主线程
          console.log('计算完成,返回计算结果');
          self.postMessage({result})
        }
      })
    `;
    //生成 blob
    const blob = new Blob([data]);
    //生成 url 
    const url = window.URL.createObjectURL(blob);
    //生成web worker 
    const worker = new Worker(url);

    worker.addEventListener('message',(e)=>{
      const result = e.data.result;
      console.log(result);
    });

    worker.postMessage({msg:"执行"});

  </script>
</body>

</html>