【HTML】web worker

news2024/11/17 3:01:15

Web Worker是HTML5中的一项技术,可以在后台运行JavaScript代码,以提高Web应用程序的性能并改善用户体验。它允许在独立的线程中执行耗时的操作,而不会阻塞主线程。

主线程是浏览器用来渲染页面、处理用户交互和执行JavaScript代码的线程。然而,在执行一些复杂的任务时,主线程可能会被占用并导致页面变得卡顿或不响应。

Web Worker通过将任务分配给后台线程来解决这个问题。后台线程是独立于主线程的,它可以同时执行多个任务(js脚本)而不会阻塞页面的渲染和用户交互。

使用Web Worker的基本步骤如下:

  1. 在主线程中创建一个Web Worker对象,并指定要执行的JavaScript文件。

  2. 在Web Worker脚本文件中编写逻辑代码,该文件将在后台线程中执行。

  3. 通过Web Worker对象与后台线程进行通信。主线程可以向后台线程发送消息,后台线程也可以向主线程发送消息。

  4. 后台线程执行完任务后,将结果发送回主线程,主线程可以捕获并处理这些结果。

实例如下:

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>

   </style>
</head>

<body>
   <script>
      const worker1 = new Worker('worker1.js');
      const worker2 = new Worker('worker2.js');
      const worker3 = new Worker('worker3.js');
      worker1.onmessage = e => {
         console.log(e);
      }
      worker2.onmessage = e => {
         console.log(e.data);
      }
      worker3.onmessage = e => {
         console.log(e.data);
      }
      
   </script>
</body>

</html>
// worker1.js
function fb(n) {
   if (n ==1 || n == 2) {
      return 1
   }
   return fb(n-1) + fb(n-2)
}

console.time('fb执行时间1')
const result = fb(42)
console.timeEnd('fb执行时间1')
self.postMessage('worker1')
// worker2.js 和 worker3.js 同理

在这里插入图片描述

执行时间非常接近,可以看出是同时执行多个任务。

console.time()console.timeEnd

console.time()console.timeEnd()是JavaScript中的控制台方法,可以用来测量代码的执行时间。

console.time()用于开始计时,它接受一个字符串作为参数,该字符串是一个标识符,用于标记计时器。

console.timeEnd()用于结束计时,它接受一个与之前开始计时时使用的标识符相同的字符串作为参数。

使用这两个方法的步骤如下:

  1. 在代码的起始位置,使用console.time()方法开始计时,传入一个标识符字符串,用于标记计时器。

  2. 在代码的结束位置,使用console.timeEnd()方法结束计时,传入与之前开始计时时使用的标识符相同的字符串作为参数。

  3. 在控制台中,会输出经过的时间(以毫秒为单位)。

console.time()console.timeEnd()对于测试代码的性能和优化非常有用,可以帮助你找到代码中耗时的部分,并进行针对性的优化。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1082757.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

记录一次紧急的版本切换

背景 由于一些特殊原因&#xff0c;需要前同事的代码。他并没有给我们后端一份他走时的src。因此这边需要拉到前同事的代码。 过程 查看版本信息 前同事和我们现在开发用的是一个gitee仓库。因此&#xff0c;我们可以看一下之前的开发线。 说白了&#xff0c;每一次提交&a…

【数据结构】算法之道与实践指南:深入理解二叉树的遍历和分治思想(一)

&#x1f6a9;纸上得来终觉浅&#xff0c; 绝知此事要躬行。 &#x1f31f;主页&#xff1a;June-Frost &#x1f680;专栏&#xff1a;数据结构 &#x1f525;该文章主要讲述二叉树的递归结构及分治算法的思想。 目录&#xff1a; &#x1f30d;前言&#xff1a;&#x1f30d;…

面试准备-软件工程

参考&#xff1a; 《程序员面试笔试宝典》&#xff08;何昊、叶向阳&#xff09; 标准的软件开发过程&#xff1a; 1&#xff09;可行性分析&#xff1a;要确定开发目标和总要求&#xff0c;一般要考虑技术是否可行&#xff0c;收益是否可行、用户操作是否可行&#xff0c;是…

【C++】如何使用RapidXML读取和创建XML文件

2023年10月11日&#xff0c;周三下午 目录 RapidXML的官网使用rapidXML读取XML文件中的元素的属性和值此次要读取的XML文件&#xff1a;ReadExample.xml用于读取此XML文件的C代码运行结果使用rapidXML创建XML文件用于创建XML文件的C代码 如果上面的代码无法运行运行结果​编辑…

Peter算法小课堂—DP背包问题

大家好&#xff0c;我是Peter&#xff0c;我又来啦&#x1f388;&#x1f384;✨ &#x1f388;&#x1f9e8;&#x1f389;《动态规划》专栏来啦&#xff0c;目前为止&#xff0c;此专栏已经有四篇文章啦&#x1f381;&#x1f380;&#x1f384; 1.DP概念与编程方法 DP概念…

交叉熵Loss多分类问题实战(手写数字)

1、import所需要的torch库和包 2、加载mnist手写数字数据集&#xff0c;划分训练集和测试集&#xff0c;转化数据格式&#xff0c;batch_size设置为200 3、定义三层线性网络参数w&#xff0c;b&#xff0c;设置求导信息 4、初始化参数&#xff0c;这一步比较关键&#xff0c;…

bootz启动 Linux内核涉及do_bootm_linux 函数

一. bootz启动Linux uboot 启动Linux内核使用bootz命令。当然还有其它的启动命令&#xff0c;例如&#xff0c;bootm命令等等。 本文只分析 bootz命令启动 Linux内核的过程中涉及的几个重要函数。具体分析 do_bootm_linux函数执行过程。 本文继上一篇文章&#xff0c;地址…

vue3 + element Plus实现表格根据关键字合并行,并实现行的增删改操作

根据关键字合并表格 1.实现初始化表格2.实现添加班级与学生的功能3.添加的弹窗4.删除班级5.删除学生 首先看最终实现的效果 1.实现初始化表格 <template><div class"main-page"><div class"flex-end"><div class"public-search…

Service Weaver:以单体形式编码,以微服务形式部署

分布式应用的主流架构模式演化为微服务架构已经有些年头了。微服务、DevOps、持续交付和容器技术(k8s)是构成最初云原生概念[1]的核心要素。它们相生相拌&#xff0c;共同演进&#xff0c;并推动了云计算全面进入云原生时代。 云原生应用普遍采用微服务架构&#xff0c;遗留的单…

阿里云r7服务器内存型CPU采用

阿里云服务器ECS内存型r7实例是第七代内存型实例规格族&#xff0c;CPU采用第三代Intel Xeon可扩展处理器&#xff08;Ice Lake&#xff09;&#xff0c;基频2.7 GHz&#xff0c;全核睿频3.5 GHz&#xff0c;计算性能稳定&#xff0c;CPU内存比1:8&#xff0c;2核16G起步&#…

HBase 表如何按照某表字段排序后顺序存储的方法?

首先需要明白HBase表的排序规则&#xff1a; &#xff08;1&#xff09;rowkey排序&#xff08;字典排序&#xff09;——升序 &#xff08;2&#xff09;Column排序&#xff08;字典排序&#xff09;——升序 &#xff08;3&#xff09;时间戳排序——降序 rowkey 字典序排序…

DeskHIL桌面级仿真测试平台

硬件在环测试系统&#xff0c;一直是汽车电子功能测试的重要工具。随着测试工程师对硬件在环系统的要求越来越高&#xff0c;对其高集成性、便携性的需求也愈发强烈。由于硬件在环系统设计复杂、定制化程度高等因素&#xff0c;成本一直居高不下&#xff0c;因此&#xff0c;市…

C++基础入门学习笔记

问题1&#xff1a;什么是 C 中的多态&#xff1f;如何实现多态&#xff1f; 回答1&#xff1a;C 中的多态是指同一种类型的实体&#xff0c;可以在不同的情况下表现出不同的行为。实现多态的方式有两种&#xff1a;虚函数和模板函数。虚函数是在基类中声明为虚函数的函数&…

c++视觉处理---仿射变换和二维旋转变换矩阵的函数

仿射变换cv::warpAffine cv::warpAffine 是OpenCV中用于执行仿射变换的函数。仿射变换是一种线性变换&#xff0c;可用于执行平移、旋转、缩放和剪切等操作。下面是 cv::warpAffine 函数的基本用法&#xff1a; cv::warpAffine(src, dst, M, dsize, flags, borderMode, borde…

嵌入式Linux裸机开发(七)UART串口、IIC、SPI通信

系列文章目录 文章目录 系列文章目录前言UART串口通信介绍UART配置 IIC介绍I.MX6U 的 I2C SPI介绍I.MX6U ECSPI 结语 前言 大概学完这三种通信后&#xff0c;之后就先去学系统移植&#xff0c;其他的先暂时放下 UART串口通信 介绍 串口全称叫做串行接口&#xff0c;通常也叫…

Maven创建父子工程详解

引言 在微服务盛行的当下&#xff0c;我们创建的工程基本都是父子工程&#xff0c;我们通过父工程来引入jar&#xff0c;定义统一的版本号等&#xff0c;这样我们在子工程中就可以直接引用后使用了&#xff0c;而不需要去重复的声明版本号等&#xff0c;这样会更方便对整个项目…

Linux中Locate命令查找不全

Locate locate(locate) 命令用来查找文件或目录。 locate命令要比find -name快得多&#xff0c;原因在于它不搜索具体目录&#xff0c;而是搜索一个数据库/var/lib/mlocate/mlocate.db 。这个数据库中含有本地所有文件信息。Linux系统会自动创建这个数据库&#xff0c;并且每天…

【ElasticSearch】深入探索 DSL 查询语法,实现对文档不同程度的检索,以及对搜索结果的排序、分页和高亮操作

文章目录 前言一、Elasticsearch DSL Query 的分类二、全文检索查询2.1 match 查询2.2 multi_match 查询 三、精确查询3.1 term 查询3.2 range 查询 四、地理坐标查询4.1 geo_bounding_box 查询4.2 geo_distance 查询 五、复合查询5.1 function score 查询5.2 boolean 查询 六、…

2023年中国溶瘤病毒药物上市产品、研发现状及行业市场规模前景[图]

溶瘤病毒&#xff08;Oncolyticvirus&#xff09;&#xff0c;是一类具有复制能力的肿瘤杀伤型病毒&#xff0c;溶瘤病毒根据所采用的毒株类型可以被分为天然病毒株&#xff08;野生型病毒株&#xff09;和基因改造病毒株两类&#xff0c;溶瘤病毒的种类也从最初的疱疹病毒发展…

使用c++视觉处理----canny 边缘检测、sobel边缘检测、scharr 滤波边缘检测

使用c视觉处理canny 边缘检测、sobel边缘检测、scharr 滤波边缘检测 #include <opencv2/opencv.hpp>int main() {// 读取图像cv::Mat image cv::imread("1.jpg", cv::IMREAD_GRAYSCALE); // 转为灰度图像if (image.empty()) {std::cerr << "无法加…