web Worker学习笔记 | 浏览器切换标签,定时器失效的解决办法

文章目录

  • web Worker
    • web Worker介绍 - 多线程解决方案
      • 浏览器多进程架构
    • web workers 的使用
      • 关闭worker
      • 引用其他js文件
    • 浏览器切换标签,定时器失效的解决办法
      • 窗口可见性 API
      • 解决定时器失效的方案

web Worker

web Worker介绍 - 多线程解决方案

Web Workers 是Html5提供的一个多线程解决方案,Web Workers可以在独立于主线程(js线程)的后台线程中,运行一个脚本操作。但是该脚本程序不能操作DOM,主要用于计算。

为什么js是单线程的,假如JS是多线程的,假设现在有2条线程,一条在dom节点上添加节点,另一条删除这个节点。
所以即使web Workers可以开启多线程,也不能操作DOM只能用于计算。

特点
1.DOM限制:没有WebAPI,该脚本程序不能操作DOM,主要用于计算
2.Worker线程和主线程不在同一个上下文环境,它们不能直接通信,必须通过消息完成
3.同源限制:分配给 Worker 线程运行的脚本,必须与主线程的脚本文件同源,否则存在跨域问题。
在这里插入图片描述

浏览器多进程架构

浏览器工作原理与实践:https://zhqwq.github.io/broswer-working-principle/guide/01.html
在这里插入图片描述

  • 浏览器进程:主要负责界面显示、用户交互、子进程管理,同时提供存储等功能。
  • 渲染进程:核心任务是将 HTML、CSS 和 JavaScript 转换为用户可以与之交互的网页
    • JS引擎线程:JavaScript引擎V8,负责处理JavaScript脚本程序。依靠任务队列来进行js代码的执行,所以js引擎会一直等待着任务队列中任务的到来,然后加以处理。
    • GUI渲染线程:负责渲染浏览器界面,解析 HTML,CSS,构建render树,布局和绘制等。
    • 计时器线程:因为JavaScript引擎是单线程的, 如果处于阻塞线程状态就会影响计时的准确。当使用setTimeout或者setInterval时,需要定时器线程计时。计时到了之后,将对应的回调放入事件队列中,等待JS执行。
      规定要求setTimeout中低于4ms的时间间隔算为4ms。
    • 异步http请求线程:负责异步请求管理,XMLHttpRequest在连通后通过浏览器新起一个线程请求。检测到状态变化时,如果有设置回调函数,异步线程就产生状态变更事件,将这个回调再放入事件队列中,等到JS执行
    • 事件触发线程控制事件循环,比如JS执行遇到计时器,AJAX异步请求等,就会将对应任务添加到事件触发线程中,在对应事件符合触发条件触发时,就把事件添加到待处理队列的队尾,等JS引擎处理。
  • GPU进程: GPU的使用初衷是为了实现3D CSS的效果,只是随后网页、Chrome的UI界面都选择采用GPU来绘制。
  • 网络进程:主要负责页面的网络资源加载。
  • 插件进程: 主要是负责插件的运行,因插件易崩溃,所以需要通过插件进程来隔离,以保证插件进程崩溃不会对浏览器和页面造成影响

渲染进程的创建时机
每次新开一个标签页,都会创建一个新的渲染进程。
但有例外,比如从A页面里面打开一个新的页面B页面,而A页面和B页面又属于同一站点的话,A和B就共用一个渲染进程。

web workers 的使用

语法:new Worker(url, [options]))

虽然 Worker API 建议 Worker 构造函数接受表示 URL 的字符串脚本,在 webpack 5 中只能使用 URL 代替。

new Worker('./worker.js');
/*
webpack5的写法
import.meta.url
*/
new Worker(new URL('./worker.js', import.meta.url));

在主线程中的使用

worker的方法描述
worker.postMessage向 worker.js 发送一个消息,消息可由任何 JavaScript 对象组成
worker.terminate立即终止当前的worker
worker.onmessage接收来自worker的消息时触发
worker.onerrorworker 出现运行中错误时,onerror 事件处理函数会被调用

在worker子线程中的使用
在网页上,window 对象可以向运行在其中的脚本暴露各种全局变量(window可省略)。
worker子线程中,全局作用域变成了WorkerGlobalScope,这个对象少了很多API,比如DOM操作、alert()方法。WorkerGlobalScope对象的属性和方法使用时也可以省略WorkerGlobalScope

属性方法
self(只读)指向当前的WorkerGlobalScope,它的值和this是一样的;
location(只读)指向当前WorkerGlobalScope的URL,它是一个Location对象;
navigator(只读)指向当前WorkerGlobalScope的Navigator对象;
importScripts()用来加载脚本,它的参数是一个或多个脚本的URL,例如:importScripts(‘a.js’, ‘b.js’),它的返回值是undefined,如果加载失败,会抛出一个NetworkError的异常;
onerror用来注册error事件的回调函数;
onlanguagechange用来注册languagechange事件的回调函数;
onoffline用来注册offline事件的回调函数;
ononline用来注册online事件的回调函数;
onrejectionhandled用来注册rejectionhandled事件的回调函数,它是Promise的一个事件;
onunhandledrejection用来注册unhandledrejection事件的回调函数, 它是Promise的一个事件;

关闭worker

方式1:主线程主动关闭worker.terminate()
方式2:子线程内部关闭self.close()

区别
主线程主动关闭worker,主线程与 worker 线程之间的连接都会被立刻停止。
子线程内部关闭worker,不会直接断开与主线程的连接,而是等 worker 线程当前的 Event Loop 所有任务执行完,再关闭。如果在当前Event Loop 中继续调用 postMessage() 方法,主线程还是能通过监听message事件收到消息。

引用其他js文件

这里加载的js文件不受同源策略约束

同源策略:两个 URL 的协议、域名和端口都相同。

使用importScripts()引入

// utils.js
const add = (a, b) => a + b;// worker.js(worker线程)
// 使用方法:importScripts(path1, path2, ...); importScripts('./utils.js'); // 加载需要的js文件console.log(add(1, 2)); // log 3

ESModule 模式
如果引入的js文件采用 ESModule 模式,需要在创建子线程时指定子线程的类型。

// 主线程
const worker = new Worker('/worker.js', {type: 'module'  // 指定 worker.js 的类型
});// utils.js
export default add = (a, b) => a + b;// worker.js(worker线程)
import add from './utils.js';
self.addEventListener('message', e => { postMessage(e.data);
});add(1, 2); // log 3export default self; // 只需把顶级对象self暴露出去即可

浏览器切换标签,定时器失效的解决办法

问题描述:当网页切换到了后台,大多数浏览器会进行性能优化,定时器会处于休眠或者降频状态。

解决方法
方法1:根据窗口可见性API - 控制定时器的启动与关闭
方法2:在web Workers中开启定时器 - 适合定时器需要一直存在的场景

窗口可见性 API

visibilitychange事件,当其选项卡的内容可见性变化时触发

document.addEventListener('visibilitychange', function() {if (document.visibilityState === 'visible') {// 页面变为可见状态时执行的操作} else if (document.visibilityState === 'hidden') {// 页面变为不可见状态时执行的操作}
});

案例
定时器来做倒计时
实现:最终时间-开始时间就是要倒计时的时间,然后定时器每秒减1就行
存在问题:最小化后回来时间不对了
方法1:倒计时启动时记录开始时间,每次计算当前时间与开始时间的差值来计时。
方法2:页面处于不可见状态时关闭定时器,页面处于可见状态时以当前时间重新开启定时器

解决定时器失效的方案

将定时器在worker.js中打开,即使切换标签,worker线程也会在后台执行。(切换标签该标签的渲染进程还是存在的)

案例
一个 web socket 链接,为了保持活跃,需要定时向服务器发送心跳信令。主线程需要每5s执行一个操作,就算该窗口隐藏到后台也需要这个操作。

主线程中

const work = new Worker(new URL('./worker.js', import.meta.url));
work.onmessage = () => {// 接收到消息主线发送心跳
};

worker.js线程中设置定时器

onmessage =(event)=>{setInterval(()=>{postMessage('ok')},5000)
}

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

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

相关文章

服务器数据恢复—DS5300存储raid5阵列数据恢复案例

服务器存储数据恢复环境: 某单位一台某品牌DS5300存储,1个机头4个扩展柜,50块硬盘组建2组RAID5磁盘阵列(一组raid5阵列有27块成员盘,存放Oracle数据库文件;另外一组raid5阵列有23块成员盘)。存储…

大带宽独立服务器的购买和配置流程是怎样的?

在当前互联网时代,大带宽独立服务器越来越受到企业和个人用户的青睐。其稳定性和高速的数据传输速率可以为用户提供更好的互联网体验。下面我们将详细介绍如何购买和配置大带宽独立服务器。 第一步:选择合适的服务器提供商 在选择服务器提供商时&#…

CF1982D Beauty of the mountains

【题意】 Nikita 喜欢爬山。当地的山可以看作一个由 ( n m ) (n \times m) (nm) 个格子组成的 n m n \times m nm 的矩形,每一个格子都有一个初始非负高度 a i , j a_{i,j} ai,j​。 格子有两种类型: 有雪无雪 Nikita 有一种超能力:…

数组相关内容

一、数组 就是一个集合,里面存放了相同类型的数据元素 特点: 1.数组中的每个数据元素都是相同的数据类型 2.数组是由连续内存位置组成的 二、一维数组 定义方式 1.数据类型 数组名[数组长度]; 2.数据类型 数组名[数组长度]{值1&#xff0…

Jacoco的覆盖率原理

收集覆盖率信息的方法 Runtime Profiling Runtime Profiling是一种在程序运行时进行的性能分析技术,它可以帮助开发者了解程序的运行情况,识别性能瓶颈和优化程序性能。由于是在程序运行时进行,runtime profiling 能够提供实时的数据,便于理解程序在实际运行条件下的行为…

周报7.1-7.7

学习内容 了解注意力机制的相关内容,学习注意力提示、注意力汇聚、评分函数、Bahdanau注意力、多头注意力、Transformer等内容。了解Bahdanau注意力和Transformer的模型代码实现。Qt的碳汇源继续需求整改 下周计划 学习Pytorch的代码实战,学习使用Ten…

HashMap中的put()方法

一. HashMap底层结构 HashMap底层是由哈希表(数组),链表,红黑树构成,哈希表存储的类型是一个节点类型,哈希表默认长度为16,它不会每个位置都用,当哈希表中的元素个数大于等于负载因子(0.75)*哈希表长度就会扩容到原来的2倍 二. 底层的一些常量 三. HashMap的put()方法 当插入一…

ONLYOFFICE最新8.1版本——桌面编辑器简单测评

前言 大家好,我是小雨,看到最近ONLYOFFICE更新了最新的版本,更新了一下当前版本来具体的测评一下,先来看看官网提供的各类更新信息,下面是我找到的三个主页,包括功能演示链接,官网连接以及专门…

阿里云存储

传统存储面临的挑战 现如今,数据与土地、劳动力、资本、技术并称为五大生产要素,数据成为数字经济发展的重要引擎。大数据时代,数据处理的需求急剧增长,越来越多的智能设备以及新应用如区块链、机器学习训练和AI等产生大量的数据…

复分析——第10章——Θ函数应用(E.M. Stein R. Shakarchi)

第10章 Θ函数的应用 (Applications of Theta Functions) The problem of the representation of an integer n as the sum of a given number k of integral squares is one of the most celebrated in the theory of numbers. Its history may be traced back to Diopha…

CV03_mAP计算以及COCO评价标准

COCO数据集回顾:CV02_超强数据集:MSCOCO数据集的简单介绍-CSDN博客 1.1 简介 在目标检测领域中,mAP(mean Average Precision,平均精度均值)是一个广泛使用的性能评估指标,用于衡量目标检测模型…

短信验证码实现

一、设置AccessKey 创建用户并配置使用权限,使我们拥有调用 aliyunAPI 的权限,之后会生成 AccessKeyID 和 AccessKey密码,后面我们会使用到。需要注意的是 AccessKeyID 和 AccessKey密码生成后我们需要将他保存起来,否则后期无法查…

奇迹MU 骷髅战士在哪

BOSS分布图介绍 我为大家带来各地区怪物分布图。在游戏前期,很多玩家可能会不知道该去哪里寻找怪物,也不知道哪些怪物值得打。如果选择了太强的怪物,弱小的玩家可能会无法抵御攻击。如果选择了低等级的boss,收益可能并不理想。所…

智能家居安防系统教学解决方案

前言 随着科技的不断进步和智能家居概念的深入人心,智能家居安防系统作为智能家居领域的重要组成部分,其重要性日益凸显。智能家居安防系统不仅能够提供环境和人员的监测功能,还能够采取措施降低或避免人员伤亡及财产损失。因此,…

Double 4 VR虚拟情景智能互动系统在高铁乘务管理课堂上的应用

在不断进步的科技背景下,虚拟现实(VR)技术已广泛应用于教育领域。VR技术的运用为课堂教育提供了新的思路与方式,尤其在高铁乘务管理这一专业中,Double 4 VR虚拟情景智能互动系统更是发挥了其独特的优势。 一、VR技术带…

word文档没有保存就关闭了怎么恢复?找到正确的方法

昨天写教程的时候,终于完成了一个word文档,以为保存了就直接关了。word提醒我“是否保存”,我直接忽略了。动作一气呵成,毫不犹豫的关闭了。之后才发现我没有保存word文档。这种情况大家有遇到过吗?我们该如何在没有保存的情况下…

迎接AI新时代:GPT-5即将登场的巨大变革与应用前瞻

迎接AI新时代:GPT-5即将登场的巨大变革与应用前瞻 💎1. GPT-5 一年半后发布:AI新时代的来临1.1 GPT-5的飞跃:从高中生到博士生 💎2. GPT-5的潜在应用场景💎2.1 医疗诊断和健康管理💎2.2 教育领域…

Docker+Spring boot为环境变量赋值(普通变量和List变量)

DockerSpring boot为环境变量赋值(普通变量和List变量) Spring boot开发微服务,使用yml做配置文件,Docker方式部署。 在不同环境中,需要对yml中的配置进行调整,本文主要介绍在以docker run方式运行时&…

谷歌推广:精准定位潜在客户群体,提高广告转化率

借助谷歌推广,你的品牌将如火箭升空般迅速崛起。作为全球最大的搜索引擎,其影响力犹如站在巨人之肩,触及的受众规模高达数十亿人。更为重要的是,我们可以准确锁定那些最有可能对贵公司的产品或服务产生浓厚兴趣的群体。这并非普通…

【Git】取消追踪多个文件或目录

文章目录 场景方法1. 添加到 .gitignore2. 从暂存区移除 示例1. 编辑 .gitignore 文件2. 从暂存区移除文件或目录 场景 清理:不再希望某些文件被 Git 追踪。配置忽略文件:通常配合 .gitignore 文件使用,以便以后这些文件不会被重新添加到索引…