web worker的了解

最新推荐文章于 2023-08-13 20:14:42 发布
最新推荐文章于 2023-08-13 20:14:42 发布
阅读量189 收藏
点赞数 1
分类专栏： 前端 javascript 技术 文章标签： webworker
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangweiren_get/article/details/80518016
版权
前端 同时被 3 个专栏收录
65 篇文章 1 订阅
订阅专栏
技术
13 篇文章 0 订阅
订阅专栏
javascript
9 篇文章 0 订阅
订阅专栏

如，MDN文档中介绍的那样，使用demo如下 

<!DOCTYPE html>

<html lang="en">


<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>webworker-demo</title>

</head>

 
<body>

<input id="first" type="text" />

<br />

<input type="text" id="second">

</body>

<script>

var myWorker = new Worker('worker.js');

first.onchange = function () {

// myWorker.terminate();

myWorker.postMessage([first.value, 2]);

console.time();

console.log('Message posted to worker');

}

 
second.onchange = function () {

// myWorker.terminate();

console.time();

myWorker.postMessage([first.value, second.value]);

console.log('Message posted to worker');

}

myWorker.onmessage = function (e) {

// result.textContent = e.data;

console.log('Message received from worker');

console.log(e.data)

console.timeEnd();

}

</script>

</html>

worker.js，为了模拟计算过程的耗时，使用代码如下：

onmessage = function (e) {

console.log('Message received from main script');

var workerResult = (e.data[0] * e.data[1]);

var now = Date.now();

while (Date.now() - now < 5 * 1000) {

//延迟五秒

}

console.log('Posting message back to main script');

postMessage(workerResult);

}

总结：我们可以把计算过程负责耗时的操作放入worker的线程中。让这个worker线程去计算，这样就计算过程中就不会卡住js线程的异步任务队列正常运行。new Worker(url), 操作时浏览器会去加载这个URL地址指向的js。

参考链接

1. MDN webworker 介绍

2. MDN webworker使用

 

wangweiren_get
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5之Web Workers多线程的使用与不足
鸭绒的博客
11-12 698
什么是Web Worker ? 当HTML页面中执行JS时，页面的状态是不可响应的，直到脚本已完成。 Web Worker是运行在后台的JavaScript，独立于其它脚本，不会影响页面的性能。您可以继续继续做任何想做的事情：点击、选取内容等，而此时web worker在后台运行。 在学习Web Worker前，我们先举个例子看看执行复杂的JS时，是不是会影响页面性能。 封装一个函数实现斐波那契数列：数学公式：F(n)=F(n-1)+F(n-1);即当前值等于前两个值之和。 代码示例： <!DOC
vue-webworker-example:Vue.js 中的 Web Worker 示例
05-31
在`vue-webworker-example-master`这个压缩包中，我们可以期待看到以下内容： - `main.js`: 主Vue应用文件，可能包含了创建和管理Worker的代码。 - `worker.js`: Worker脚本，执行实际的后台任务。 - `App.vue`: ...
WebWork 概述
用人生编写程序 用程序编写人生—— 程序人生
07-25 758
WebWork是由OpenSymphony组织开发的，致力于组件化和代码重用的拉出式MVC模式J2EE Web框架。WebWork目前最新版本是2.1，现在的WebWork2.x前身是Rickard Oberg开发的WebWork，但现在WebWork已经被拆分成了Xwork1和WebWork2两个项目。 Xwork简洁、灵活功能强大，它是一个标准的Command模式实现，并且完全从web层脱离出
关于Web Worker的一些心得
wangshu696的专栏
01-22 411
注意问题 现在在平台中线程js中不能识别Extjs的方法，原因是线程js无法引入Extjsd的方法。 Onmessage只接收数据，不能在里面直接写方法，只能调用外面的方法 Webwork.js无法访问window,docment等对象  代码案例 //创建一个线程 var worker = new Worker('test/my_task.js');         v
web worker
weixin_44208404的博客
10-18 534
第二个参数是可选的Transferable对象的数组，用于传递所有权，如果一个对象所有权被转移，在发送它的上下文中将变为不可用，并且只有在它被发送到的worker中可用。：worker线程向主线程发送消息，主线程接收；主线程向worker线程发送消息，不会终止worker与主线程正在进行的通信，而是实时接收。是使得一个web应用程序可以在与主执行线程分离的后台线程中运行一个脚本操作，这样的好处是。：worker一旦创建就会一直运行，不会被主线程的活动打断，所以用完要注意关闭。
针对HTML5的Web Worker使用攻略
09-28
HTML5的Web Worker是JavaScript实现多线程的一种技术，它允许...了解和掌握Web Worker的使用，对于开发高性能的Web应用至关重要。在实际开发中，根据具体需求选择合适的Worker类型，可以有效提升应用程序的性能和功能。
sample_webworker
05-23
【标题】：sample_webworker 【描述】：这个项目是一个示例实现，展示了Web Workers在JavaScript中的应用。Web Workers是Web应用程序中用于处理密集型计算的技术，它可以在后台线程中运行，避免阻塞主线程，提高...
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
09-28
HTML5 中的 Web Worker 可以分为两种不同线程类型，一个是专用线程 Dedicated Worker，一个是共享线程 Shared Worker。两种类型的线程各有不同的用途,感兴趣的朋友可以了解下啊，或许对你有所帮助
web-worker-example:一个简单的web worker例子
05-01
通过"web-worker-example"，你可以动手实践创建和使用Web Worker，了解其工作流程。运行http-server并访问localhost:8080，查看示例的运行效果，进一步加深理解。这个例子将帮助你掌握如何在实际项目中利用Web ...
axios-parallel:使用 Axios 和 Workers 的多线程异步请求发送器
05-29
发送异步请求 在 NodeJS 中使用和发送多个异步请求 注意：此模块适用于应用程序，而不是 Web 浏览器。 安装 npm install axios axios-parallel --save 用法 const axiosParallel = require ( 'axios-parallel' ) ; // Debug const { performance } = require ( 'perf_hooks' ) ; const { writeFileSync } = require ( 'fs' ) ; console . log ( 'Start...' ) ; ( async ( ) => { const start = performance . now ( ) ; const requests = [ ] ; // https://jsonplacehol
HTML5 WebWorker的简介、使用场景和局限性
Demon's blog
03-03 1226
简介 JavaScript 语言采用的是单线程模型，所有任务只能在一个线程上完成，一次只能做一件事。前面的任务没做完，后面的任务只能等着。随着电脑计算能力的增强，尤其是多核 CPU 的出现，单线程带来很大的不便，无法充分发挥计算机的计算能力。Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。等到 Worker 线程完成计算任务，再把结果返回给主线程。这样的
Service Workers/Web Workers/WebSockets的区别
Wopelo的博客
11-22 3885
原文戳这里前言之前在看面经的时候看到了“Service Workers”这个名词，赶紧百度了一下，发现许多博客对它的描述是“一个Service Worker是一段运行在浏览器后台进程里的脚本，他独立于当前页面，提供了那些不需要与web页面交互的功能在网页背后悄悄执行的能力。”我眉头一皱，发现这句话好熟悉，好像在w3school上看到过，随后一找，发现了“Web Workers”，w3school的描
ie9 html5 web worker,HTML5之殇
weixin_31998371的博客
06-23 113
任何新技术面临的关键问题之一是，要么被采用并且舍弃那些不能接受它的用户;要么错失新的发展机会，最终变成无关紧要的技术。比如，如果你要在网站开发中使用 HTML5 技术，这就意味着要舍弃那些仍然使用旧版 IE 的用户。不过开发者也可以通过兼容工作，让用户也能体验到 HTML5 的价值，同时也可以利用这个机会，让 HTML5 技术突显出它的重要作用。然而，并非所有的事情都能如人所愿。HTML5目前还处...
客户端请求Ajax、axios、web worker、fetch
最新发布
u013523190的博客
08-13 208
Ajax 的很好替代方案，比 Ajax 更加简单易用。基于nodejs服务器。
Web Worker使用
ZHU18670324781的博客
06-16 168
mdn官方解释是：Web Worker 为 Web 内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面。此外，它们可以使用 XMLHttpRequest（尽管和channel属性总是为空）或 fetch（没有这些限制）执行 I/O。一旦创建，一个 worker 可以将消息发送到创建它的 JavaScript 代码，通过将消息发布到该代码指定的事件处理器（反之亦然）主线程和 worker 线程相互之间使用方法来发送信息，并且通过onmessage。
Axios----web数据交互方式
m0_54435916的博客
10-08 480
axios实现ajax、axios多种参数传递方式
webworker和ajax,webWorker
weixin_39980575的博客
08-06 503
本篇文章仅供我自己学习使用，不建议从这篇文章中学习。因为文章中可能有错误。传统的js都是单线程，webworker的引入就是为了解决js只有单线程的问题。在进行科学计算，密集型计算的时候webworker不会阻塞页面，这样对用户体验会有很好的提升。但是webWorker和传统语言的多线程还不一样，webworker里面的内容和主线程内容只能通过onmessage和postmessage进行通信，不...
写一个webworker的demo，适合初学者懂的
06-02
好的，以下是一个简单的Web Worker的示例代码： ```html <!DOCTYPE html> <html> <head> <title>Web Worker Demo</title> </head> <body> <p>计算一个数的阶乘：</p> <input type="number" id="number" min="0" value="0"> <button onclick="calculate()">计算</button> <p id="result"></p> <script> function calculate() { // 获取输入的数值 var n = document.getElementById("number").value; // 创建一个新的Web Worker var worker = new Worker("worker.js"); // 发送数据给Web Worker worker.postMessage(n); // 接收Web Worker返回的结果 worker.onmessage = function(event) { document.getElementById("result").innerHTML = event.data; }; } </script> </body> </html> ``` 在上面的代码中，我们创建了一个简单的输入框和一个按钮。当用户点击按钮时，我们将输入的数值发送给一个Web Worker，并在Web Worker中计算阶乘。最后，Web Worker将计算结果发送回主线程，并在页面上显示出来。 下面是我们在`worker.js`中实现的代码： ```javascript // 接收从主线程传递过来的数据 onmessage = function(event) { var n = event.data; // 计算阶乘 var result = 1; for (var i = 1; i <= n; i++) { result *= i; } // 将结果发送回主线程 postMessage(result); }; ``` 在上面的代码中，我们定义了一个`onmessage`事件处理程序，它接收从主线程传递过来的数据。然后，我们在Web Worker中计算阶乘，并使用`postMessage`方法将结果发送回主线程。 这就是一个简单的Web Worker的示例。它演示了如何在Web Worker中执行一些计算密集型的任务，并将结果发送回主线程。希望这能帮助你了解Web Worker的基本用法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值