HTML5 API worker使用

一、web worker

使用Worker类加载一个外部js文件来创建一个线程,这个线程不会阻塞主线程。将大量的与DOM无关的工作放在这个worker线程里,可以优化网页的响应速度

Worker线程运行环境包含:

1.一个浏览器对象,只包含四个属性:appName,appVersion,userAgent,platform

2.一个location对象,和window里的一样,只是所有的属性是只读的

3.一个self对象指向全局工人线程对象

4.一个importScripts()方法,使工人线程可以加载外部JavaScript文件

5.所有ECMAScript对象,例如Object、Array、Data

6.XMLHttpRequest构造器

7.setTimeout和setInterval方法

8.close方法立即停止工人线程

二、使用Worker

1..创建worker线程

var worker=new Worker(‘code.js‘);//code.js指一个完全独立的js文件

2.worker线程交互。postMessage()用于传递数据,onmessage事件用于接收数据

var worker=new Worker(‘lib/code.js‘); //一定要在一个域内
var data=‘hello world‘;
worker.postMessage(data);
worker.onmessage=function(event){
     alert(event.data);
}
//lib/code.js
self.onmessage=function(event){
    self.postMessage(‘收到消息‘+event.data);
}

3.加载外部文件

  1.通过importScripts()方法加载外部文件

  2.以阻塞方式调用importScripts,在所有文件加载完成并执行之后,脚本继续运行。

  3.在UI线程之外运行,阻塞不会影响UI响应

importScripts(‘file.js‘,‘file2.js‘);
时间: 2024-12-24 14:44:35

HTML5 API worker使用的相关文章

深入 HTML5 Web Worker 应用实践:多线程编程

深入 HTML5 Web Worker 应用实践:多线程编程 HTML5 中工作线程(Web Worker)简介 至 2008 年 W3C 制定出第一个 HTML5 草案开始,HTML5 承载了越来越多崭新的特性和功能.它不但强化了 Web 系统或网页的表现性能,而且还增加了对本地数据库等 Web 应用功能的支持.其中,最重要的一个便是对多线程的支持.在 HTML5 中提出了工作线程(Web Worker)的概念,并且规范出 Web Worker 的三大主要特征:能够长时间运行(响应),理想的启

[转载]你可能不知道的5个功能强大的 HTML5 API —— html5系列

HTML5 新增了许多重要的特性,像 video.audio 和 canvas 等等,这些特性使得能够很容易的网页中包含多媒体内容,而不需要任何的插件或者 API.而其它的新元素,例如 section.article.header 和 nav 等则是用来丰富网页内容.另外还有很多强大的 JavaScript API,下面这5个 HTML5 API 你可能不知道,通过今天这篇文章可以了解一下. Fullscreen API 这个 HTML5 全屏 API 让 Web 开发者可以通过编程控制页面的全

HTML5 API's (Application Programming Interfaces)

New HTML5 API's (Application Programming Interfaces) The most interesting new API's are: HTML Geolocation HTML Drag and Drop HTML Local Storage HTML Application Cache HTML Web Workers HTML SSE HTML5 API's (Application Programming Interfaces)

你可能不知道的5个功能强大的 HTML5 API

HTML5 新增了许多重要的特性,像 video.audio 和 canvas 等等,这些特性使得能够很容易的网页中包含多媒体内容,而不需要任何的插件或者 API.而其它的新元素,例如 section.article.header 和 nav 等则是用来丰富网页内容.另外还有很多强大的 JavaScript API,下面这5个 HTML5 API 你可能不知道,通过今天这篇文章可以了解一下. Fullscreen API 这个 HTML5 全屏 API 让 Web 开发者可以通过编程控制页面的全

html5 API

1.Canvas绘图 2.postMessage跨域.多窗口传输 3.requestAnimationFrame动画 4.PageVisibility API页面可见性 5.File 本地文件操作 6.Geolocation 地理定位 7.localStorage|sessionStorage存储 8.Web Workers多线程 9.HTML5 服务器发送事件(server-sent event)

HTML5 Web Worker简单使用

Web Workers 是 HTML5 提供的一个javascript多线程解决方案,我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面. 一:如何使用Worker Web Worker的基本原理就是在当前javascript的主线程中,使用Worker类加载一个javascript文件来开辟一个新的线程,起到互不阻塞执行的效果,并且提供主线程和新线程之间数据交换的接口:postMessage,onmessage. 那么如何使用呢,我们看一个例子: //worker.jso

HTML5 Web Worker的使用

Web Workers 是 HTML5 提供的一个javascript多线程解决方案,我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面. 一:如何使用Worker Web Worker的基本原理就是在当前javascript的主线程中,使用Worker类加载一个javascript文件来开辟一个新的线程,起到互不阻塞执行的效果,并且提供主线程和新线程之间数据交换的接口:postMessage,onmessage. 那么如何使用呢,我们看一个例子: JavaScript 1

HTML5 API——无刷新更新地址 history.pushState/replaceState 方法

尽 管是上面讲到的<JavaScript高级程序设计>(第二版)中提到,BOM中的location.path/query…… (window.location)在通过JavaScript更改以后,浏览器都会通过刷新来到达你更改后的URL(location的意思就是位 置..) 而在JavaScript MVC开始流行之后,通过刷新来修改URL的方法,不禁让人感到烦躁.然而HTML5中就制定了一个这样的API,可以通过方法的方式来修改URL,而又不会使浏览器刷新,就是History API. 熟

【转】HTML5 API——无刷新更新地址 history.pushState/replaceState 方法

(window.location)在通过JavaScript更改以后,浏览器都会通过刷新来到达你更改后的URL(location的意思就是位 置..) 而在JavaScript MVC开始流行之后,通过刷新来修改URL的方法,不禁让人感到烦躁.然而HTML5中就制定了一个这样的API,可以通过方法的方式来修改URL,而又不会使浏览器刷新,就是History API. 熟悉JavaScript开发的同学,对History肯定不会陌生,其中最经典的方法就是go,通过第一个类型为整数的传输参数,可以使