【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,一经查实,立即删除!

相关文章

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。启动采集…

使用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…

第五节 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…

04-RocketMQ源码解读

目录汇总&#xff1a;RocketMQ从入门到精通汇总 上一篇&#xff1a;03-RocketMQ高级原理 这一部分&#xff0c;我们开始深入RocketMQ的源码。源码的解读是个非常困难的过程&#xff0c;每个人的理解程度都会不一样&#xff0c;也不太可能通过讲解把其中的细节全部讲明白。我们今…

13私有化属性的一些注意点

目录 一、解释一下几个私有化访问的方式&#xff01;&#xff01;&#xff01; 1.类内部访问&#xff1a; 2.子类访问 3.模块内其他位置访问 4.跨模块访问 二、_y受保护属性的访问 只有跨模块这块需要注意一下&#xff01; 这个是可以访问的 但是下面这个是不可以的 …

Python皮卡丘

系列文章 序号文章目录直达链接1浪漫520表白代码https://want595.blog.csdn.net/article/details/1306668812满屏表白代码https://want595.blog.csdn.net/article/details/1297945183跳动的爱心https://want595.blog.csdn.net/article/details/1295031234漂浮爱心https://want…

Element UI怎么安装呢?

安装 :::warning 注意 后续演示将会在 Vue CLI 搭建的 Vue 项目上进行操作。如需要请查看 Vue CLI 安装 ::: 通过 YARN 命令安装 $ yarn add element-ui完整引入 代表一次性引入所有组件&#xff0c;比较省心省事&#xff0c;但是项目的打包体积也会跟着变大。 // main.js…

3.简单场景构建

在新建的项目中&#xff0c;默认存在 Main Camera 和 Directional Light两个对象。若是缺失&#xff0c;可通过选择菜单中的 Game Object->Camera 和 Geme Object->Light->Directional Light进行创建。 1.添加地形及底图 通过在Cesium面板中选择 Cesium World Terrai…

VAE模型(详细推导+实例代码)

文章目录 EM算法思路E步M步直观感觉 GMM模型VAEVAE思想从GMM到VAE公式推导重参数VAE神经网络另一个视角的VAE思想为什么引入encoder为什么要重参数噪声与重建 Discrete VAE 本文会从EM算法&#xff0c;GMM模型一步一步的的推导&#xff0c;在过渡到VAE模型&#xff0c;如果有熟…