多线程技术在服务端技术中已经发展的很成熟了，而在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. jquery版悬浮模块demo

    在做在线客服时,代码就是按照该模块命名.现在,我要添加一个返回主页的功能,我觉得再复制一遍之前的代码,那个量有点多,如果我再添加一个功能,那个量会很多……现在我用创建对象字面量的方式来创建(其实我还想 ...

  2. C#高级编程笔记 Day 1， 2016年8月 30日 名词定义

    1.C# 中的命名空间 namespace,我觉得和Java中的package 差不多,相当于一个"包" 一样. 2.修饰符 static 修饰方法表示方法不能在类的实例化上执行, ...

  3. mysql 之基本操作

    已经在板子内部把所有的环境都搭好了,现在的要求是对Mysql 进行一些基本的操作. 在这之前,记录几个要点以防以后忘记. 一,准备工作. 1. 将usr/share/mysql 目录下的 my-lag ...

  4. 数据统计表插件，highcharts插件的简单应用

    highcharts插件的简单应用,非常全能好用的一个数据统计表插件. $(function () { $('#container').highcharts({ chart:{ type:" ...

  5. phpcms模板标签整理

    {template "content","header"} 调用根目录下phpcms\template\content\header文件 {CHARSET} 字 ...

  6. pip/matplot/pandas的安装和使用

    pip可以很方便的安装python的各种工具库,如pandas,matplotlib,scikit等,最大优点是它会自动解决库之间的依赖性,把所有需要的库都安装好,比起手工一个一个安装方便多了. 1. ...

  7. linux下合并两个文件夹

    一.我想把自己自定义的软件统一放到man手册路径里.如何和现有的/usr/local/share文件夹合并起来,原来的文件还在? (1)下面是解压出的自定义的bashdb调试软件==>

  8. js apply 和 call

    http://www.cnblogs.com/KeenLeung/archive/2012/11/19/2778229.html

  9. [转载]C++虚函数浅析

    原文:http://glgjing.github.io/blog/2015/01/03/c-plus-plus-xu-han-shu-qian-xi/ 感谢:单刀土豆 C++虚函数浅析 JAN 3RD ...

  10. Delphi XE5 android 获取网络状态

    unit Androidapi.JNI.Network; interface function IsConnected: Boolean; function IsWiFiConnected: Bool ...