在Web开发的时候经常会遇到浏览器不响应事件进入假死状态，甚至弹出“脚本运行时间过长“的提示框，如果出现这种情况说明你的脚本已经失控了。

一个浏览器至少存在三个线程：js引擎线程(处理js)、GUI渲染线程(渲染页面)、浏览器事件触发线程(控制交互)。

1：JavaScript引擎是基于事件驱动单线程执行的，JS引擎一直等待着任务队列中任务的到来然后加以处理，浏览器无论再什么时候都只有一个JS线程在运行JS程序。

2：GUI 渲染线程负责渲染浏览器界面，当界面需要重绘(Repaint)或由于某种操作引发回流(reflow)时,该线程就会执行。但需要注意 GUI渲染线程与JS引擎是互斥的，当JS引擎执行时GUI线程会被挂起，GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行。

3：事件触发线程，当一个事件被触发时该线程会把事件添加到待处理队列的队尾，等待JS引擎的处理。这些事件可来自JavaScript引擎当前执行的代码块如setTimeOut、也可来自浏览器内核的其他线程如鼠标点击、AJAX异步请求等，但由于JS的单线程关系所有这些事件都得排队等待JS引擎处理。

了解了浏览器的内核处理方式就不难理解浏览器为什么会进入假死状态了，当一段JS脚本长时间占用着处理机就会挂起浏览器的GUI更新，而后面的事件响应也被排在队列中得不到处理，从而造成了浏览器被锁定进入假死状态。另外JS脚本中进行了DOM操作，一旦JS调用结束就会马上进行一次GUI渲染，然后才开始执行下一个任务，所以JS中大量的DOM操作也会导致事件响应缓慢甚至真正卡死浏览器，如在IE6下一次插入大量的HTML。而如果真的弹出了“脚本运行时间过长“的提示框则说明你的JS脚本肯定有死循环或者进行过深的递归操作了。

现在如果遇到了这种情况，我们可以做的不仅仅是优化代码，html5的webWorkers提供了js的后台处理线程的API，它允许将复杂耗时的单纯js逻辑处理放在浏览器后台线程中进行处理，让js线程不阻塞UI线程的渲染。这个线程不能和页面进行交互，如获取元素、alert等。多个线程间也是可以通过相同的方法进行数据传递。

直接看代码：

例子：用户输入一个数字，进行加法运算(+=)

以前的做法：

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webworkers--calculate</title>
</head>
<body>
    <input id="num" name="num" type="text"/>
    <button onclick = "calculate()">计算</button><br />
    <div id="result" style="color:red;"></div>
    <div id="time" style="color:red;"></div>
    <script type="text/javascript" src="calculate.js"></script>
    <script type="text/javascript">
        function calculate(){
            data1 = new Date().getTime();
            var num = document.getElementById("num").value;
            var val = parseInt(num,10);
            var result =0;
            for(var i =0; i<num;i++){
                result += i;
            }
            data2 = new Date().getTime();
            document.getElementById("result").innerHTML ="计算结果："+result;
            document.getElementById("time").innerHTML ="普通 耗时："+ (data2 - data1)+"ms";
        }
    </script>
</body>
</html>

使用webWorkers以后：

calculate.html

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webworkers--calculate</title>
</head>
<body>
    <input id="num" name="num" type="text"/>
    <button onclick = "calculate()">计算</button><br />
    <div id="result" style="color:red;"></div>
    <div id="time" style="color:red;"></div>
    <script type="text/javascript" src="calculate.js"></script>
    <script type="text/javascript">
        var worker = new Worker("calculate.js");
        var data1 =0;
        var data2 =0;
        worker.onmessage = function(event){
                var data = event.data;
                data2 = new Date().getTime();
                document.getElementById("result").innerHTML ="计算结果："+data;
                document.getElementById("time").innerHTML ="workers 耗时："+ (data2 - data1)+"ms";
            };
         function calculate(){
            data1 = new Date().getTime();
            var num = document.getElementById("num").value;
            var val = parseInt(num,10);
            worker.postMessage(val);
        }
    </script>
</body>
</html>

calculate.js

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

webWorker需要将代码放入web服务器中，如果使用的是localhost请用高版本的chrome浏览器打开，firefox浏览器在处理localhost的时候会出现“Could not get domain!”的错误，关于这个可以参考：https://bugzilla.mozilla.org/show_bug.cgi?id=682450

对比上面的两种实现方式，当计算值达到100亿的时候，普通做法耗时已经很长，且一般会卡死了。

     webWorkers在Chrome15下的效果。 更正：getTime()返回的应该是毫秒（ms），而不是秒(s)。

      普通方法在Chrome15下的效果

可见webWorkers在未来的web应用中还是非常有价值的。

html5 webwork的更多相关文章

  1. 【转】《高级前端3.6》JavaScript多线程——Concurrent.Thread.js, WebWork

    原文链接:http://www.cnblogs.com/woodk/articles/5199536.html JavaScript多线程,在HTML5 WebWork没出现之前很多人都是用Concu ...

  2. HTML5学习之WebWork多线程处理（八）

    多线程技术在服务端技术中已经发展的很成熟了,而在Web端的应用中却一直是鸡肋 在新的标准中,提供的新的WebWork API,让前端的异步工作变得异常简单. 使用:创建一个Worker对象,指向一个j ...

  3. HTML5:离线存储(缓存机制)-IndexDB

    https://www.w3.org/TR/IndexedDB/ .. <!DOCTYPE html> <html> <head> <meta charset ...

  4. 前端面试题总结：HTML5，JS，CSS3，兼容性。

    1. 请写出至少20个HTML5标签 <article><aside> <audio><video> <canvas><datalis ...

  5. 使用HTML5开发Kinect体感游戏

    一.简介 我们要做的是怎样一款游戏? 在前不久成都TGC2016展会上,我们开发了一款<火影忍者手游>的体感游戏,主要模拟手游章节<九尾袭来 >,用户化身四代,与九尾进行对决, ...

  6. 读书笔记：《HTML5开发手册》--HTML5新的结构元素

    读书笔记:<HTML5开发手册> (HTML5 Developer's CookBook) 虽然从事前端开发已有很长一段时间,对HTML5标签也有使用,但在语义化上面理解还不够清晰.之前在 ...

  7. HTML5 Boilerplate - 让页面有个好的开始

    最近看到了HTML5 Boilerplate模版,系统的学习与了解了一下.在各种CSS库.JS框架层出不穷的今天,能看到这么好的HTML模版,感觉甚爽.写篇博客,推荐给大家使用.   一:HTML5 ...

  8. 戏说HTML5

    如果有非技术人员问你,HTML5是什么,你会怎么回答? 新的HTML规范... 给浏览器提供了牛逼能力,干以前不能干的事...(确切地说应该是给浏览器规定了许多新的接口标准,要求浏览器实现牛逼的功能. ...

  9. nw.js桌面软件开发系列 第0.1节 HTML5和桌面软件开发的碰撞

    第0.1节 HTML5和桌面软件开发的碰撞 当我们谈论桌面软件开发技术的时候,你会想到什么?如果不对技术本身进行更为深入的探讨,在我的世界里,有这么多技术概念可以被罗列出来(请原谅我本质上是一个Win ...

随机推荐

  1. Codeforces 276E(树状数组)

    题意:一棵树有n个节点,1是根节点,根节点的子节点是单链,然后如今有两种操作0 v x d表示距离节点v为d的节点权值都加x,操作1 v问v节点的权值,初始节点权值都是0. 题解:看了别人的题解才会的 ...

  2. maven的profile 目录、变量打包

    <project> <build> <finalName>maven-project</finalName> <resources> < ...

  3. （八）Oracle学习笔记—— 触发器

    1. 触发器简介 触发器在数据库里以独立的对象存储,类似于过程(procedure)和函数(function),都有声明,执行和异常处理过程的PL/SQL块.它与存储过程和函数不同的是,存储过程与函数 ...

  4. Linux命令-网络命令:last

    last 统计linux系统所有用户的登录时间(多次登录信息)

  5. Ajax高级应用---Comet

    非常适合处理体育比赛的分数和股票报价 1.HTTP流 将输出缓存中的内容一次性全部发送到客户端的功能是实现HTTP流的关键所在.

  6. 全栈工程师的武器——MEAN(转)

    MongoDB MongoDB也就是常说的NoSQL数据库.可以认为它是文档结构的数据库,而不是由行.列.表组成的数据库.基本的用法是存储JSON数据,这很适合JavaScript程序.它是非关系型. ...

  7. 点滴积累【JS】---JS小功能（onmousemove鼠标移动坐标接龙DIV)

    效果: 思路: 利用onmousemove事件,然后获取鼠标的坐标,之后把DIV挨个遍历,最后把鼠标的坐标赋给DIV. 代码: <head runat="server"> ...

  8. Atitit.http连接合并组件   ConnReducerV3 新特性

    Atitit.http连接合并组件   ConnReducerV3 新特性 D:\0workspace\AtiPlatf_cms\src\com\attilax\util\ConnReducerV2. ...

  9. PCIe学习笔记（15）--- TLP的ROUTING方式

    PCIE是POINT TO POINT的,不像PCI,是SHARED-BUS,总线上的数据,是被所有EP DEV看到的. 这一点与USB2.0比较类似,是广播方式的(BROADCASTING) USB ...

  10. Vivado的helloword程序：软件工程部分

    建立工程 Export结束后,会自动启动SDK.界面如下.可以看到工程浏览器Project Explorer中已经有一个硬件平台hw_platform_0,里面有一系列配置和初始化文件.不要修改这些文 ...