HTML5学习总结-06 WebWorker
一 WebWorkder
它允许开发人员编写能够长时间运行而不被用户所中断的后台程序，去执行事务或者逻辑，并同时保证页面对用户的响应。简而言之，就是允许JavaScript创建多个线程，但是子线程完全受主线程控制，且不得操作DOM。从而，可以用webWorker来处理一些比较耗时的计算。
好处：
1 可以加载一个JS进行大量的复杂计算而不挂起主进程，并通过postMessage，onmessage进行通信
2 可以在worker中通过importScripts(url)加载另外的脚本文件
3 可以使用 setTimeout(), clearTimeout(), setInterval(), and clearInterval()
4 可以使用XMLHttpRequest来发送请求
局限性：
1 不能跨域加载JS
2 worker内代码不能访问DOM
3 各个浏览器对Worker的实现不大一致，例如FF里允许worker中创建新的worker,而Chrome中就不行
4 IE这个新特性
例子：
index.html
<!DOCTYPE html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<p id="support">你的浏览器不支持 HTML5 Web Workers</p>
<button id="stopButton" >停止任务</button>
<button id="helloButton" >发送消息</button>
<script>
window.onload = function() {
if( typeof (Worker) !== "undefined") {
document.getElementById("support").innerHTML = "你的浏览器支持HTML5 Web Workers";
worker = new Worker("worker.js");
worker.onmessage = function(e) {
console.log(e.data);
}
worker.onerror = function(e) {
console.warn(e.message, e);
}
document.getElementById("helloButton").onclick = function() {
worker.postMessage("ok");
}
document.getElementById("stopButton").onclick = function() {
worker.terminate();
};
}
} </script>
worker.js
onmessage = function(e) {
postMessage("worker says: " + e.data );
}
参考资料：
http://www.w3school.com.cn/html5/html_5_webworkers.asp
http://www.cnblogs.com/giggle/p/5350288.html
http://www.cnblogs.com/giggle/p/5350288.html
HTML5学习总结-06 WebWorker的更多相关文章
- HTML5 学习总结（一）——HTML5概要与新增标签
一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电.触摸 ...
- HTML5 学习笔记（一）——HTML5概要与新增标签
目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 1.5.HTML5优点与缺点 1.5.1.优点 1.5.2 ...
- [HTML5] 飞龙天惊-HTML5学习系列
飞龙天惊 cnblog URL:http://www.cnblogs.com/fly_dragon/ Html5 学习系列(一)认识HTML5 http://www.cnblogs.com/fly_d ...
- HTML5 学习笔记--------》HTML5概要与新增标签！
一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电. ...
- HTML5学习总结——canvas绘制象棋(canvas绘图)
一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...
- html5学习笔记一
HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg” controls=”controls”> ...
- HTML5学习笔记（一）：HTML简介
Web前端涵盖的内容较多且杂,主要由3个部分组成:HTML标记语言.CSS样式语言和JavaScript脚本语言组成,而下面我们将先学习最新的标记语言HTML5. <!DOCTYPE>标记 ...
- HTML5学习参考资料整理
给大家推荐一下学习研究HTML5必备的一些个网站,更加有利于大家对HTML5的学些和研究.如果各位童鞋还有更多的,欢迎投递资源给我们,也可以支持 我们,让我们利用大家的力量收集更多的HTML5学习资料 ...
- HTML5学习总结——HTML5入门与新增标签
一.HTML5概要 1.1.为什么需要HTML5 概念: HTML5 是继 HTML4.01, XHTML 1.0 和 DOM 2 HTML 后的又一个重要版本, 旨在消除富 Internet 程序( ...
随机推荐
- 用RxJava处理复杂表单验证问题
用RxJava处理复杂表单验证问题 无论是简单的登录页面,还是复杂的订单提交页面,表单的前端验证(比如登录名和密码都符合基本要求才能点亮登录按钮)都是必不可少的步骤.本文展示了如何用RxJava来方便 ...
- JVM内存管理------GC算法精解（复制算法与标记/整理算法）
本次LZ和各位分享GC最后两种算法,复制算法以及标记/整理算法.上一章在讲解标记/清除算法时已经提到过,这两种算法都是在此基础上演化而来的,究竟这两种算法优化了之前标记/清除算法的哪些问题呢? 复制算 ...
- 以HTML为表现的日志记录组件
日志搬家:http://www.loogn.net/blog/Article.aspx?id=21 关于日志记录,如果你不想随用随写,又不想用log4net的话,也许你可以了解一下这个! 我也是个很懒 ...
- 柯尔莫可洛夫-斯米洛夫检验（Kolmogorov–Smirnov test，K-S test）
柯尔莫哥洛夫-斯米尔诺夫检验(Колмогоров-Смирнов检验)基于累计分布函数,用以检验两个经验分布是否不同或一个经验分布与另一个理想分布是否不同. 在进行cumulative probab ...
- 0930MySQL中实现高性能高并发计数器方案（例如文章点击数）
转自http://www.jb51.net/article/56656.htm 这篇文章主要介绍了MySQL中实现高性能高并发计数器方案,本文中的计数器是指如文章的点击数.喜欢数.浏览次数等,需要的朋 ...
- Dubbo系列(2)_RPC介绍
一.本文目的 主要介绍RPC的一些概念和应用. 二.为什么要介绍RPC DUBBO是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,是阿里巴巴SOA服务化治 ...
- Kernel Methods (3) Kernel Linear Regression
Linear Regression 线性回归应该算得上是最简单的一种机器学习算法了吧. 它的问题定义为: 给定训练数据集\(D\), 由\(m\)个二元组\(x_i, y_i\)组成, 其中: \(x ...
- JavaScript的DOM操作-非重点部分
1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档(HTML文档),对象是指文档中每个元素:模型是指抽象划的东西. 2.Windows对象操作 一.属性和方法 属性(值或者 ...
- VS 远程发布IIS
<?xml version="1.0" encoding="utf-8"?><!--您 Web 项目的发布/打包进程将使用此文件.您可以通过编 ...
- 【USACO 1.2】Name That Number
给你一串数字(≤12个),每个数字可以对应3个字母,求生成的所有字符串里,在字典内的有哪些. 我做的时候想的是字典树(Trie 树),模拟数串生成的所有字符串,然后在字典树里查找一下. /* TASK ...