首页 > 编程语言 >javascript 高级编程系列 - Web Workers

javascript 高级编程系列 - Web Workers

时间:2023-02-14 17:45:19浏览次数:42  
标签:Web Workers javascript worker message data event

Web workders的规范让javascript在后台运行脱离了UI线程,从而解决了大量计算阻塞UI线程导致卡死的问题。
在Web workers没有出现之前,我们可以使用window.setTimeout 异步方式将计算包裹其中,来解决这种问题。

1. 使用 Web Workers

Web Worder所执行的javascript代码完全在另一个作用域中,与当前网页中代码不共享作用域。在web worker中的全局对象是worker对象本身,也就是在这个特殊的作用域中,this 和 self 引用的都是worder对象,web worker本身是一个最小化
的运行环境。

  • 最小化的navigator对象
  • 只读location对象
  • seTimeout(), setInterval(), clearTimeout(), clearInterval() 方法
  • XMLHTTPRequest构造函数
// 加载要执行的文件,并创建worker
const worker = new Worker("demo.js");

// 给worker内部脚本发送消息
worker.postMessage({
  type: "command",
  message: "start!"
});

// worker 监听来自内部脚本的message事件
worker.onmessage = function (event){
  const data = event.data;
  // handle data
}

// worker 内部的javascript执行遇到错误,会触发error事件
worder.onerror = function(event){
  console.log(`Error: ${event.filename} (${event.lineno}: ${event.message})`)
}

// 立即停止 worker
worker.terminate();

demo.js
当页面在worker对象上调用postMessage() 时,数据会以异步的方式传递各位worker,进而触发worker中的message事件,
Worder完成工作后再通过调用postMessage() 把数据再发回页面。

self.onmessage = function(event){
  const data = event.data;
  // handle data
  data.sort((a,b) => a-b);
  // post message to page
  self.postMessage(data);
  // 停止worker
  self.close()
}

2. 包含其他脚本

在worker中无法操作Dom,但是可以通过api加载脚本

// web worker 内部代码 demo.js
importScripts("file1.js", "file2.js");

标签:Web,Workers,javascript,worker,message,data,event
From: https://www.cnblogs.com/xiaodi-js/p/17120404.html

相关文章

  • WebUploader 文件上传,兼容ios和安卓
    varupImg=WebUploader.create({auto:true,swf:'webuploader-0.1.5/Uploader.swf',//图片接收服务端。server:contextPath+'simpleUpload',//......
  • Web上传大文件的三种解决方案
    ​ 前言:因自己负责的项目(jetty内嵌启动的SpringMvc)中需要实现文件上传,而自己对java文件上传这一块未接触过,且对Http协议较模糊,故这次采用渐进的方式来学习文件上传的......
  • webpack4基本使用和url-loader压缩图片
    执行npminit-y,创建package.json文件最基本的配置文件entry:入口文件output:出口,出口里面添地址,和导出的包的名字mode是模式默认production,可以选择为development,也......
  • JavaScript对象属性的特性高级功能
    “usestrict”/创建一个对象最简单的方式:创建一个Object的实例,然后再为它添加属性和方法/varperson=newObject();person.name=“Hongbin”;person.age=21;per......
  • Web开发的那点事--开发流程
    第0步:可行性分析拿到项目,项目是否可行。产品技术可行性/法律/第1步:需求分析收集和整理需求,知道项目要做什么。可能的产物:需求分析文档、功能点文档、性能分析第2步:制作......
  • Web开发的那点事--软件复用
    复用的战场1.前台CSS,JavaScript/jquery/AJAXHTML/JSP2.后台增删改查几乎一样。复用的级别代码:一行代码或几行代码函数:一个函数类:工具类组件:一个小的功能模块,比如......
  • 报表开发工具FastReport .Net 如何在移动端生成Web报表应用?
    FastReport.Net是一款全功能的WindowsForms、ASP.NET和MVC报表分析解决方案,使用FastReport.NET可以创建独立于应用程序的.NET报表,同时FastReport.Net支持中文、英语等14......
  • JavaScript 大文件上传下载解决方案
    ​ javaweb上传文件上传文件的jsp中的部分上传文件同样可以使用form表单向后端发请求,也可以使用ajax向后端发请求    1.通过form表单向后端发送请求     ......
  • 使用webrtc-streamer在html页面中显示tp-link摄像头实时视频
    在Windows环境下运行webrtc-streamer服务端,并通过前端页面html通过浏览器查看摄像头实时画面摄像头配置视频需要设置成H264格式,视频需要设置成H264格式,视频需要设置成H2......
  • eclipse 为javaWeb项目更改jdk版本的正确姿势
    1.情景展示在使用eclipse进行web项目开发时,针对公司以前的老项目,从SVN下载下来后,我们往往会需要更换jdk版本,使其与本地jdk版本保持一致。如何切换jdk版本?2.具体实现第一步:切......