微网站对比,注册公司代理找哪家,2022年企业所得税税率表一览,北京编程培训机构哪个好通过async方式在浏览器中调用web worker
近年来#xff0c;网络应用程序变得越来越复杂#xff0c;增加了越来越多的功能。因此#xff0c;性能和响应性已成为 Web 开发人员关注的重点。解决这个问题的一个办法是使用web worker。
web worker简介
web worker是一个 javas…通过async方式在浏览器中调用web worker
近年来网络应用程序变得越来越复杂增加了越来越多的功能。因此性能和响应性已成为 Web 开发人员关注的重点。解决这个问题的一个办法是使用web worker。
web worker简介
web worker是一个 javascript api这使得开发人员可以在浏览器后台中运行脚本而不会阻塞用户界面。
这也意味着一些类似执行复杂的计算等耗时长的任务能在后台中运行而不会影响web的性能。
web worker通过创建一个单独的执行线程来工作该线程在后台运行脚本。这个线程与主线程完全分离主线程负责绘制网页和响应用户输入。这意味着后台脚本可以独立于主线程运行,而不会阻塞它。
使用web worker的好处
在Web应用程序中使用 web worker 可以有以下好处
改进性能 通过在后台运行长期运行的任务web worker 可以提高Web应用程序的性能。这是因为主线程不会被长时间运行的任务阻塞这使它能够继续呈现网页并响应用户输入。提高反应能力 web worker 还可以提高Web应用程序的响应能力。通过在后台运行任务用户界面保持响应性即使应用程序正在执行长时间运行的任务。更好的用户体验 通过改进性能和响应能力web worker 可以为Web应用程序提供更好的用户体验。用户更有可能继续使用快速和响应的应用程序而不是缓慢和不响应的应用程序。
实现一个异步调用方式
让我们以下面例子来介绍
创建一个web worker
要创建一个web worker 我们需要创建一个新的 javascript 文件该文件将包含我们希望在后台运行的代码。
在这个例子中我们将创建一个 worker.js 文件。 . self.onmessage function(event) {// 从事件中检索数据const requestData event.data;//执行异步API调用performAPICall(requestData).then(responseData {// 将响应数据送回主线程self.postMessage(responseData);}).catch(error {// 处理在API调用期间发生的任何错误console.error(Error:, error);});
};在这个文件中,我们定义一个叫做onmessage的方法当web worker从主线程收到消息时将调用。
创建API调用
接下来我们需要创建将进行API调用的代码。
在这个例子中我们将使用performAPICall() 方法去调用fetch方法调用api。
function performAPICall() {// 创建一个封装异步API调用的promisereturn new Promise((resolve, reject) {// 使用fetch或任何其他合适的方法执行API调用fetch(http://example.com, {method: GET,headers: {Content-Type: application/json,},}).then(response {if (response.ok) {resolve(response.json());} else {reject(API call failed with status: response.status);}}).catch(error {reject(error);});});
}创建主线程
现在我们已经创建了 web worker 和 API 调用我们需要创建将与 web worker 进行通信的主线程。
在这个例子中让我们创建一个 app.js 文件。
// 创建一个worker
const worker new Worker(worker.js);// 发送数据
worker.postMessage(API Call);// 监听webworker传递过来的数据
worker.onmessage function (event) {// 从事件中检索响应数据const responseData event.data;// 处理答复数据processResponse(responseData);console.log(Response Arrived, responseData);
};function processResponse(responseData) {// 处理和处理来自API调用的响应数据let ulElem document.getElementById(listing);ulElem.innerHTML ;for (let i 0; i 10; i) {let elem li${responseData[i].title}/liulElem.innerHTML elem;}
}我们使用 postMessage() 向 web worker 发送消息而后web worker将启动API调用功能。
在上面的代码中我们创建了一个Worker 的新实例并定义了一个叫做onmessage的方法用于将消息发送回主线程。
processResponse(responseData) 是一个处理响应数据并帮助以列表格式显示的函数。
运行代码
要运行代码,我们需要创建一个HTML文件其中需要引入 app.js 文件。
!DOCTYPE html
htmlheadtitleWeb Worker Example/title
/headbodyscript srcapp.js/script
/body/html当我们在浏览器中打开这个HTML文件时web worker 将开始在后台进行·API·调用。一旦·API·调用完成web worker 将响应发送回主线程在那里我们可以根据需要处理数据。
常见需求
web worker可用于各种应用程序包括
游戏 web worker可以在基于网络的游戏中进行复杂的计算例如物理模拟或人工智能算法。通过在后台运行这些计算游戏可以保持响应性即使在执行复杂任务时也是如此。视频和音频处理 web worker可以用于处理视频或音频数据的应用程序如视频编辑软件或音频处理工具。通过在后台运行这些任务,即使在处理大量数据时应用程序也可以保持响应性。数据可视化 web worker可以用于执行数据可视化的应用程序如图表或图表。通过在后台运行这些任务即使在处理大量数据时应用程序也可以保持响应性。
