HTML5Web开发：防止浏览器假死的方法

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

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

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

事件触发线程，当一个事件被触发时该线程会把事件添加到待处理队列的队尾，等待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等。多个线程间也是可以通过相同的方法进行数据传递。

直接看代码：

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

以前的做法：

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4.      
    5.   
  
  
  
  5.     webworkers--calculate 
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7.      
    8.   
  
  
  
  8.     计算 
    9.   
  
  
  
  9.     
 
  •     
    •  
  •      
  •             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
  •                 result += i;  
  •             }  
  •             data2 = new Date().getTime();  
  •             document.getElementById("result").innerHTML ="计算结果："+result;  
  •             document.getElementById("time").innerHTML ="普通 耗时："+ (data2 - data1)+"ms";  
  •         }  
  •      
  •  
  •  

    • 使用webWorkers以后：

    calculate.html

     
 
 
 
      
  
  
  
  
    1.  
      2.   
  
  
  
    2.  
      3.   
  
  
  
    3.      
      4.   
  
  
  
    4.     webworkers--calculate 
      5.   
  
  
  
    5.  
      6.   
  
  
  
    6.  
      7.   
  
  
  
    7.      
      8.   
  
  
  
    8.     计算 
      9.   
  
  
  
    9.     
     
  •      
  •      
  •      
  •         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);  
  •         }  
  •      
  •  
  •  

    • calculate.js

     
 
 
 
      
  
  
  
  
    1. onmessage = function(event){  
      2.   
  
  
  
    2.     var num = event.data;  
      3.   
  
  
  
    3.     var result = 0;  
      4.   
  
  
  
    4.     for(var i = 0; i  
  
  
  
    5.         result += i;  
      6.   
  
  
  
    6.     }  
      7.   
  
  
  
    7.     postMessage(result);  
      8.   
  
  
  
    8. }; 
      9.

    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应用中还是非常有价值的。

    原文：http://tech.it168.com/a2011/1205/1283/000001283392.shtml

    分享名称：HTML5Web开发：防止浏览器假死的方法
    网站路径：http://www.hantingmc.com/qtweb/news48/317548.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    微信小程序知识

    同城分类信息

    迷你发光字　　 　成都包装设计公司　　 　自贡电信机房　　 　成都富士康招工　　 　边坡防护网　　 　移动服务器托管　　 　工业净化空调　　 　响应式报价　　 　成都做网站　　 　成都品牌网站建设　　 　重庆网站设计　　 　广安园林绿化公司　　 　棕树数据中心　　 　成都小程序商城　　 　品牌网站建设　　 　温江网站建设　　 　二枢服务器托管　　 　整合营销　　 　成都网站设计　　 　成都电商网站建设方案