HTML5学习(17)Web Workers

什么是 Web Worker?

当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。

web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。

实例地址

检测浏览器是否支持 Web Worker

在创建 web worker 之前,请检测用户的浏览器是否支持它:

if(typeof(Worker)!=="undefined")
{
    // 是的! Web worker 支持!
    // 一些代码.....
}
else
{
    //抱歉! Web Worker 不支持
}

创建 Web Worker 对象

下面的代码检测是否存在 worker,如果不存在,- 它会创建一个新的 web worker 对象,然后运行 "demo_workers.js" 中的代码:

if(typeof(w)=="undefined")
{
    w=new Worker("demo_workers.js");
}

然后我们就可以从 web worker 发送和接收消息了。

向 web worker 添加一个 "onmessage" 事件监听器:

w.onmessage=function(event){
    document.getElementById("result").innerHTML=event.data;
};

终止 Web Worker

当我们创建 web worker 对象后,它会继续监听消息(即使在外部脚本完成之后)直到其被终止为止。

如需终止 web worker,并释放浏览器/计算机资源,请使用 terminate() 方法:

w.terminate();

Web Workers 和 DOM

由于 web worker 位于外部文件中,它们无法访问下列 JavaScript 对象:

  • window 对象
  • document 对象
  • parent 对象

原文地址:https://www.cnblogs.com/1016391912pm/p/12630215.html

时间: 2024-08-29 18:49:13

HTML5学习(17)Web Workers的相关文章

HTML5中的Web Workers

https://www.cnblogs.com/yanan-boke/p/6954390.html https://segmentfault.com/a/1190000014938305 HTML5 工作线程原理 传统上的线程可以解释为轻量级进程,它和进程一样拥有独立的执行控制,一般情况下由操作系统负责调度.而在 HTML5 中的多线程是这样一种机制,它允许在 Web 程序中并发执行多个 JavaScript 脚本,每个脚本执行流都称为一个线程,彼此间互相独立,并且由浏览器中的 JavaScri

HTML5学习笔记 Web存储

HTML5 web存储,一个比cookie更好的本地存储方式. 什么是html5 Web存储 使用HTML5可以在本地存储用户的浏览器数据. 早些时候,本地存储使用的是cookies.但是Web存储需要更加安全与快速.这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它可以存储大量数据,而不影响网站的性能. 数据以键值对存在,web网页的数据只允许该网页访问使用. localStorage 和sessionStorage localStorage :没有时间限制的数据存储 se

HTML5新特性 Web Workers 实现多线程

引子:(JS单线程) 什么是webworker? Web Worker为Web应用程序提供了一种能在后台中运行的方法.通过Web Worker可以生成多个线程同时运行,并保证页面对用户的及时响应,完全不会影响用户的正常操作. 单线程:单线程在程序执行时,所走的程序路径按照连续顺序排下来,前面的必须处理好,后面的才会执行.简单的说就是处理事务的任务链,当只有一条链,所有的事情都在这一条链上执行时,那就是单线程. 优点:单线程较多线程来说,系统稳定.扩展性极强.软件丰富. 缺点:只有一个线程,代码顺

HTML5学习之Web存储

在客户端存储数据 HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前,这些都是由 cookie 完成的.但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高. 在 HTML5 中,数据不是由每个服务器请求传递的,而是只有在请求时使用数据.它使在不影响网站性能的情况下存储大量数据成为可能. 对于不同的

html5 Web Workers.RP

虽然在JavaScript中有setInterval和setTimeout函数使javaScript看起来好像使多线程执行,单实际上JavaScript使单线程的,一次只能做一件事情(关于JavaScript单线程可以看看setTimeout()和setInterval() 何时被调用执行),看个简单的例子证明一下 <!DOCTYPE html> <html> <head> <title>Web Workers</title> </head

HTML5 Web Workers

HTML5 web workers是运行在后台的JavaScript,不会影响页面的性能. 什么是web worker? 当在HTML页面中执行脚本时,页面的状态是不可响应的,直到脚本运行完成. 而在HTML5 中的web worker是运行在后台的JavaScript,独立于其它的脚本,不会影响页面的性能.您可以继续做任何其它愿意做的事件,如:点击,选择内容等等, 而此时web worker是在后台运行的,所以不会影响页面的性能. 实例: <!DOCTYPE html><html>

【HTML5】Web Workers

什么是 Web Worker? 当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成. web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能.您可以继续做任何愿意做的事情:点击.选取内容等等,而此时 web worker 在后台运行. 计数器: <!DOCTYPE html> <html> <body> <p>计数: <output id="result"><

Html5之高级-12 Web Workers(概述、 API)

一.Web Workers 概述 Web Workers 简介 - Web Workers 是运行在后台的 JavaScript - 充分利用多核 CPU 的优势 - 对多线程支持非常好 - 不会影响页面的性能 - 不能访问Web页面 和 DOM API 二.Web Workers API Web Workers API - 检测浏览器对 Web Worker 的支持性 - 创建 Web Worker 文件 - 创建 Web Worker 对象 - 与 Web Worker 进行通信 - onM

Html5之web workers多线程

Web Workers 是 HTML5 提供的一个javascript多线程解决方式,我们能够将一些大计算量的代码交由web Worker执行而不冻结用户界面. 1.首先看一个实例: 1)js文件(test.js) var fibonacci =function(n) { return n <2? n : arguments.callee(n -1) + arguments.callee(n -2); }; onmessage =function(event) { var n = parseIn