【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.hqwc.cn/news/132204.html

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

相关文章

QT基础 QChart绘制折线

目录 1.简单折线 2.数学折线 3.可滑动折线 1.简单折线 //![1] //! 折现段坐标QLineSeries *series new QLineSeries(); //![1]//![2] //! 添加点series->append(0, 6);series->append(2, 4);series->append(3, 8);series->append(7, 4);series->append(10, 5)…

Keil 厂商DFP pack实现原理

要想在Keil中方便地通过界面点击来导入芯片厂商提供的库&#xff0c;通常需要安装厂商提供的pack&#xff0c;如下图&#xff1a; 这个过程是如何实现的&#xff1f; 双击安装pack后&#xff0c;pack文件会将自身的内容解压到下图的目录&#xff0c;命名为厂商名字的文件夹&…

Kubernetes新增节点

1. K8S节点Hosts及防火墙设置 node3节点进行如下配置&#xff1a; #添加hosts解析&#xff1b; cat >/etc/hosts<<EOF 127.0.0.1 localhost localhost.localdomain 192.168.1.146 master1 192.168.1.147 node3 EOF #临时关闭selinux和防火墙&#xff1b; sed -i /SE…

canvas基础2 -- 形状

七巧板 七巧板本质上就是 分别由几个直线 拼成一个个图形&#xff0c;再将这些图形结合起来 var tangram [{ p: [{ x: 0, y: 0 }, { x: 800, y: 0 }, { x: 400, y: 400 }], color: "#caff67" },{ p: [{ x: 0, y: 0 }, { x: 400, y: 400 }, { x: 0, y: 800 }], col…

AlphaPose Pytorch 代码详解(一):predict

前言 代码地址&#xff1a;AlphaPose-Pytorch版 本文以图像 1.jpg&#xff08;854x480&#xff09;为例对整个预测过程的各个细节进行解读并记录 python demo.py --indir examples/demo --outdir examples/res --save_img1. YOLO 1.1 图像预处理 cv2读取BGR图像 img [480,…

Redis 的过期键 | Navicat 技术干货

Redis 是一种高性能的内存数据存储&#xff0c;以其速度和多功能性而闻名。其中一个有用的特性是为键设置过期时间的功能。在 Redis 中&#xff0c;为键设置过期时间对于管理数据和确保过时或临时数据自动从数据库中删除是至关重要的。在本文中&#xff0c;我们将探讨在 redis-…

4、在 CentOS 8 系统上安装 pgAdmin 4

pgAdmin 4 是一个开源的数据库管理工具&#xff0c;专门用于管理和操作 PostgreSQL 数据库系统。它提供了一个图形用户界面&#xff08;GUI&#xff09;&#xff0c;使用户能够轻松地连接到 PostgreSQL 数据库实例&#xff0c;执行 SQL 查询&#xff0c;管理数据库对象&#xf…

STM32物联网基于ZigBee智能家居控制系统

实践制作DIY- GC0169-ZigBee智能家居 一、功能说明&#xff1a; 基于STM32单片机设计-ZigBee智能家居 二、功能介绍&#xff1a; 1个主机显示板&#xff1a;STM32F103C最小系统ZigBee无线模块OLED显示器 语音识别模块多个按键ESP8266-WIFI模块&#xff08;仅WIFI版本有&…

java模拟GPT流式问答

流式请求gpt并且流式推送相关前端页面 1&#xff09;java流式获取gpt答案 1、读取文件流的方式 使用post请求数据&#xff0c;由于gpt是eventsource的方式返回数据&#xff0c;所以格式是data&#xff1a;&#xff0c;需要手动替换一下值 /** org.apache.http.client.metho…

QT自制软键盘 最完美、最简单、跟自带虚拟键盘一样

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 QT自制软键盘 最完美、最简单、跟自带虚拟键盘一样 Chapter1 QT自制软键盘 最完美、最简单、跟自带虚拟键盘一样一、本自制虚拟键盘特点二、windows打开系统自带软键盘三、让…

一款轻量级事件驱动型应用程序框架

QP™/C 实时嵌入式框架 &#xff08;RTEF&#xff09; 是专为实时嵌入式 &#xff08;RTE&#xff09; 系统量身定制的活动对象计算模型的轻量级实现。QP 既是用于构建由活动对象&#xff08;参与者&#xff09;组成的应用程序的软件基础结构&#xff0c;也是用于以确定性方式执…

TensorFlow入门(二十三、退化学习率)

学习率 学习率,控制着模型的学习进度。模型训练过程中,如果学习率的值设置得比较大,训练速度会提升,但训练结果的精度不够,损失值容易爆炸;如果学习率的值设置得比较小,精度得到了提升,但训练过程会耗费太多的时间,收敛速度慢,同时也容易出现过拟合的情况。 退化学习率 退化学…