多线程技术在服务端技术中已经发展的很成熟了,而在Web端的应用中却一直是鸡肋
在新的标准中,提供的新的WebWork API,让前端的异步工作变得异常简单。
使用:创建一个Worker对象,指向一个js文件,然后通过Worker对象往js文件发送消息,js文件内部的处理逻辑,处理完毕后,再发送消息回到当前页面,纯异步方式,不影响当前主页面渲染。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
//创建线程 work对象
var work = new Worker("work.js");
//发送消息
work.postMessage("100");
// 监听消息
work.onmessage = function(event) {
alert(event.data);
};
</script>
</head>
<body> </body>
</html>

work.js

onmessage = function (event) {
//从1加到num
var num = event.data;
var result = 0;
for (var i = 1; i <= num; i++) {
result += i;
}
postMessage(result);
}

HTML5学习之WebWork多线程处理(八)的更多相关文章

  1. HTML5学习笔记(十八):闭包

    高阶函数 JavaScript的函数其实都指向某个变量.既然变量可以指向函数,函数的参数能接收变量,那么一个函数就可以接收另一个函数作为参数,也可以返回一个函数,这种函数就称之为高阶函数. 函数作为参 ...

  2. HTML5 学习总结(一)——HTML5概要与新增标签

    一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电.触摸 ...

  3. HTML5学习总结——canvas绘制象棋(canvas绘图)

    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...

  4. HTML5 学习笔记(一)——HTML5概要与新增标签

    目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 1.5.HTML5优点与缺点 1.5.1.优点 1.5.2 ...

  5. HTML5 学习笔记--------》HTML5概要与新增标签!

      一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电. ...

  6. html5学习笔记一

    HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg”  controls=”controls”> ...

  7. [HTML5] 飞龙天惊-HTML5学习系列

    飞龙天惊 cnblog URL:http://www.cnblogs.com/fly_dragon/ Html5 学习系列(一)认识HTML5 http://www.cnblogs.com/fly_d ...

  8. 【Unity Shaders】学习笔记——SurfaceShader(八)生成立方图

    [Unity Shaders]学习笔记——SurfaceShader(八)生成立方图 转载请注明出处:http://www.cnblogs.com/-867259206/p/5630261.html ...

  9. HTML5学习笔记(一):HTML简介

    Web前端涵盖的内容较多且杂,主要由3个部分组成:HTML标记语言.CSS样式语言和JavaScript脚本语言组成,而下面我们将先学习最新的标记语言HTML5. <!DOCTYPE>标记 ...

随机推荐

  1. (原创)在service中定时执行网络操作的几点说明

    执行网络操作是耗时操作,即便是在service中也要放到子线程中执行 这里我用到了async-http-client框架来执行异步请求操作 计时用的java原生Timer和TimerTask类 本来这 ...

  2. BZOJ 4516: [Sdoi2016]生成魔咒

    Description 给出一串数字,求每次插入一个数字后本质不同的子串. Sol SAM. 在 SAM 上添加节点的时候统计一下 \(val[np]-val[par[np]]\) 就可以了... 用 ...

  3. 把strassen乘法调出来了...

    完美... 指针搞死我了 /// /// Author: zball /// No rights reserved /// (Creative Commons CC0) /// #include &l ...

  4. php preg_match($p, $str, $match)方法简介

    方法作用:匹配指定的正则表达式并将结果放在$match数组中 代码示例: $p = '/name:([\\ws]+)/'; $str = "name:steven jobs"; p ...

  5. C#之类的继承、抽象类和虚方法

    代码下载地址 类的继承: 写电池的基类:包含条码和箱体码两个字段,含有两个参数的构造函数 class Battery { public string _barCode; public string _ ...

  6. c++ 调用外部程序exe-ShellExecuteEx

    此方法最实用的调用exe. #include <ShellAPI.h> string file_path = s_run_dir+"\\ConsoleApplication1.e ...

  7. ACM/ICPC 之 用双向链表 or 模拟栈 解“栈混洗”问题-火车调度(TSH OJ - Train)

    本篇用双向链表和模拟栈混洗过程两种解答方式具体解答“栈混洗”的应用问题 有关栈混洗的定义和解释在此篇:手记-栈与队列相关 列车调度(Train) 描述 某列车调度站的铁道联接结构如Figure 1所示 ...

  8. Java for LeetCode 221 Maximal Square

    Given a 2D binary matrix filled with 0's and 1's, find the largest square containing all 1's and ret ...

  9. Metro各种流转换

    Ibuffer转byte[] ,(int)buffer.Length); Byte[]转Ibuffer WindowsRuntimeBufferExtensions.AsBuffer(bytes,,b ...

  10. SAP 透明表之间的关联字段

    VTTK-TPLST=TTDST-TPLST(装运点的关联表及描述表字段TTDST-BEZEI) VTTK-ROUTE=TVROT-ROUTE(装运线路关联表及描述表字段TVROT-BEZEI) VT ...