在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. JMeter 四：建立高级web测试计划

    发送带有Header的请求 参考:http://jmeter.apache.org/usermanual/build-adv-web-test-plan.html#header_manager Jme ...

  2. iOS mac添加证书 不能修改“System Roots”钥匙串错误

    iOS mac添加证书 不能修改“System Roots”钥匙串错误 如图: 解决方式: 打开钥匙串---登录---,直接把证书拖过来 然后,查看--我的证书,里面,找到证书,即可

  3. vs2005下面编译自己的luars232.dll

    vc6在win7下用不了,大家建议使用vs2005...所以就装了,但是还是提示有不兼容,不过是可以用的.先凑合用,装了个2012,庞然大物!而且折腾了半天不知所云.先这样吧. 简单记录操作过程,参考 ...

  4. 08-hibernate注解-多对多双向外键关联

    多对多双向外键 双方持有对方的集合对象 其中一方设置: //教师类 @ManyToMany(mappedBy="teachers")   //mappedby表示教师交给学生来控制 ...

  5. ！HDU 1078 FatMouse and Cheese-dp-（记忆化搜索）

    题意:有一个n*n的格子.每一个格子里有不同数量的食物,老鼠从(0,0)開始走.每次下一步仅仅能走到比当前格子食物多的格子.有水平和垂直四个方向,每一步最多走k格,求老鼠能吃到的最多的食物. 分析: ...

  6. c# webbrowser 清除cookie和缓存

    由于缓存文件是特殊的文件,以及WebBrowser与IE版本有关因此删除缓存绝对不可能用一些IO函数就总可以解决的因此我的这些函数在IO操作的基础上,又针对环境进行相应的清理. static clas ...

  7. unity3d一个物体围绕另一个物体旋转

    可以使用RotateAround,代码如下: transform.RotateAround (Sun.transform.position, Vector3.down, ); 其中第一个参数是要围绕哪 ...

  8. VMware安装Centos7超详细过程（图文）

    1.软硬件准备 软件:推荐使用VMwear,我用的是VMwear 12 镜像:CentOS6 ,如果没有镜像可以在阿里云下载 https://mirrors.aliyun.com/centos/ 硬件 ...

  9. Laravel之路(事务)mysql事务

    其实关于mysql的事务(原声mysql语句),我在我的博客里面有提到(mysql的文章分类下) 今天看下基于laravel框架ORM的处理 准备: 表必须是InnoDB引擎 DB::beginTra ...

  10. Android Studio公布到Jcenter

    1.前言 拥抱开源.热爱开源,将我们觉得不错的代码开源到gihtub.将我们的库公布到jcenter\mevan等. 2.准备工作 2.1 准备 申请仓库账号 注意model为android libr ...