【HTML】web worker

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.mzph.cn/news/102145.shtml

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

相关文章

链接文件学习(七):英飞凌MCU Tasking编译器LSL链接文件解析 及代码变量定位方法

目录 1、Tasking的链接文件 1.1、DSRAM中的数据存放 1.2、PFlash中的代码存放 1.3、LMU 1.4、PSRAM 1.5、UCB 2、代码与变量定位 2.1、把变量放在 DSRAM

vue项目的学习周报03

学习周报 日期范围&#xff1a;2023年9月25日~2023年10月1日 学习目标&#xff1a;本周的学习目标是学习vue的基础知识 学习成果&#xff1a;在本周我完成以下任务和学习活动&#xff1a; 1.我完成了对vue.js的基础认识&#xff1b; 2.学习了通过index.js导入新的组件&#…

servlet基础知识

目录 什么是servlet概念/定义作用 servlet容器概念/是什么作用如何配置和管理 servlet生命周期有哪些生命周期每个周期中可以执行哪些操作 创建和编写servlet如何创建一个简单的servletservlet类的结构是什么样的如何处理HTTP请求和响应 servlet映射和URL模式什么是servlet映射…

服务器上部署python脚本

1.查看服务器上的python是否自带&#xff0c;一般都自带 2.将本地脚本上传到服务器 3.直接运行一下脚本看报什么错误 代码错误&#xff0c; 将f删除后报别的错误 上面是未安装依赖的错误。我们安装一下依赖 下面是编码的解决 #!/usr/bin/python # -*- coding: utf-8 -*- 先把…

公众号营业执照注销被冻结了,怎么迁移?

公众号迁移后原来内容还在么&#xff1f;通过公众号迁移&#xff0c;可以实现这些目的&#xff1a;主体变更、开通留言功能、多号合并、订阅号升级为服务号、服务号转为订阅号。公众号迁移流程&#xff1a;①办理公证&#xff1b;②提交迁移申请&#xff1b;③第三方审核&#…

macOS Sonoma 14.1beta3(23B5067a)发布

黑果魏叔10 月 11 日消息&#xff0c;苹果今日向 Mac 电脑用户推送了 macOS 14.1 开发者预览版 Beta 3 更新&#xff08;内部版本号&#xff1a;23B5067a&#xff09;&#xff0c;本次更新距离上次发布隔了 7 天。 根据官方发布的macOS Sonoma 14.1beta3更新日志&#xff0c;此…

Langchain 代理 (Agents) ,赋能超级 LLMs

原文&#xff1a;Langchain 代理 (Agents) &#xff0c;赋能超级 LLMs - 知乎 大型语言模型&#xff08;LLMs&#xff09; 非常强大&#xff0c;但它们缺乏“最笨”的计算机程序可以轻松处理的特定能力。逻辑、计算和搜索是计算机通常擅长的领域&#xff0c;但 LLMs 却遇到了困…

华为发布LampSite X室内数字化创新解决方案,释放数字世界无限潜能

【阿联酋&#xff0c;迪拜&#xff0c;2023年10月11日】2023全球移动宽带论坛&#xff08;Global MBB Forum 2022&#xff09;期间&#xff0c;华为董事、ICT产品与解决方案总裁杨超斌重磅发布了全新一代5G室内数字化产品解决方案LampSite X系列&#xff0c;助力运营商打开商业…

canvas力导布局

老规矩&#xff0c;先上效果图 <html><head><style>* {margin: 0;padding: 0;}canvas {display: block;width: 100%;height: 100%;background: #000;}</style> </head><body><canvas id"network"></canvas> </…

如何选择高防CDN和高防IP?

目录 前言 一、对高防CDN的选择 1. 加速性能 2. 抗攻击能力 3. 全球覆盖能力 4. 可靠性和稳定性 二、对高防IP的选择 1. 防御能力 2. 服务质量 3. 安全性 4. 价格 三、高防CDN和高防IP的优缺点对比 1. 高防CDN的优缺点 2. 高防IP的优缺点 总结 前言 随着互联网…

U盘怎么设置为只读?U盘怎么只读加密?

当将U盘设置为只读模式时&#xff0c;将只能查看其中数据&#xff0c;无法对其中数据进行编辑、复制、删除等操作。那么&#xff0c;怎么将U盘设置成只读呢&#xff1f; U盘如何设置成只读&#xff1f; 有些U盘带有写保护开关&#xff0c;当打开时&#xff0c;U盘就会处于只读…

京东商品品牌数据采集接口,京东商品详情数据接口,京东API接口

采集京东商品品牌数据的方法如下&#xff1a; 打开网页。在首页【输入框】中输入目标网址批量输入多个关键词并搜索。创建【循环列表】&#xff0c;采集所有商品列表中的数据。编辑字段。创建【循环翻页】&#xff0c;采集多页数据。设置滚动和修改【循环翻页】XPath。启动采集…

DHCP自动分配IP原理

DHCP自动分配IP原理 1.采用UDP通信方式 2.服务器IP&#xff1a;255.255.255.255&#xff1b; 服务器端口&#xff1a;67, 设备接收端口&#xff1a;68 3.设备向服务器发送DISCOVER信息 4.设备收到服务器回应&#xff0c;且解析正确 5.设备向服务器发送REQUEST请求消息 6.设备接…

Vue Elememt 链接后端

get&#xff1a; //async 标记为异步请求 // get 直接获取路径并 axios.get(api/user/selectUserAll,{ params:{ "tiaoshu":this.tiaoshu, "pageSize":this.currentPage, } }) .then((res…

使用docker安装db2

使用docker安装db2 1. 前言1.1 关于docker的安装1.2 安装db2版本选择参考 2. 拉取镜像3. 启动镜像4. 进入容器&#xff0c;切换用户4.1 进入容器4.2 切换用户4.3 其他命令 5. 可视化工具DBeaver连接db25.1 连接5.2 简单使用 1. 前言 1.1 关于docker的安装 关于Linux上docker的…

【考研408常用数据结构】C/C++实现代码汇总

文章目录 前言数组多维数组的原理、作用稀疏数组 链表单向链表的增删改查的具体实现思路约瑟夫环问题&#xff08;可不学&#xff09;双向链表 树二叉搜索树中序线索二叉树哈夫曼树的编码与译码红黑树B树B树 堆顺序与链式结构队列实现优先队列排序算法&#xff08;重点&#xf…

go语言教程3:数组、切片和指针

文章目录 高维数组切片指针 go语言教程&#xff1a;安装入门➡️for循环 高维数组 前面已经讲到过基本的数组声明方式 var a [3]int // a是长度为3的数组&#xff0c;内容为0 var b [3]int{1, 2, 3} c : [3]int{1,2,3}由于数组只需要内部元素有着相同类型&#xff0c;所以自…

Typescript 笔记:循环

1 for循环 和c很类似 for ( init; condition; increment ){statement(s); }举例&#xff1a; var num:number 5; var i:number; var factorial 1; for(i num;i>1;i--) {factorial * i; } console.log(factorial) 2 for... in 循环 用于一组值的集合或列表进行迭代…

第五节 C++ 循环结构(算法)

文章目录 前言介绍1. for 语句1.1 语法结构1.2 语法流程的执行过程1.2.1 案例 1:循环的正序输入和倒序输入1.2.2 案例2 : 求1~n的平方数1.2.3 案例 3: 求输入a和b,求a~b区间数. 1.3 for 循环案例练习1.3.1 求最大值与最小值1.3.2 计算奇数和和偶数和1.3.3 计算平均气温与最高气…

Stable diffusion 用DeOldify给黑白照片、视频上色

老照片常常因为当时的技术限制而只有黑白版本。然而现代的 AI 技术,如 DeOldify,可以让这些照片重现色彩。 本教程将详细介绍如何使用 DeOldify 来给老照片上色。. 之前介绍过基于虚拟环境的 基于DeOldify的给黑白照片、视频上色,本次介绍对于新手比较友好的在Stable diff…