html 防网页假死,html5 WebWorkers 防止浏览器假死

在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等。多个线程间也是可以通过相同的方法进行数据传递。

直接看代码：

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

以前的做法：

使用webWorkers以后：

calculate.html

calculate.js

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://fed.renren.com/2010/01/247#more-247

本文转载：http://www.cnblogs.com/svage/archive/2011/11/28/2266064.html

html 防网页假死,html5 WebWorkers 防止浏览器假死相关推荐

360网页如何扩展html5,360安全浏览器如何添加扩展
360安全浏览器添加扩展的方法如下: 点击浏览器上扩展中心的按钮,将会打开扩展中心的面板,如下图所示: 当鼠标移到相应扩展区域时,会显示安装到浏览器按钮,用户点击即刻开始安装. 如果安装成功则会在安装 ...
浏览器真的能“永不假死”？——六款主流浏览器防假死功能测试
作者:一石来源:家用电脑浏览器是大家上网必备的工具,而浏览器假死也是大家在上网时常常所遇到的问题,让人头疼.最近各款主流浏览器纷纷推出了最新版本,我们可以发现一个相同点就是他们都以"防假死 ...
《HTML5游戏编程核心技术与实战》一1.1 网页游戏和HTML5
本节书摘来异步社区<HTML5游戏编程核心技术与实战>一书中的第1章,第1.1节,作者: 向峰责编: 杨海玲,更多章节内容可以访问云栖社区"异步社区"公众号查看. 1 ...
《HTML5游戏编程核心技术与实战》——第1章　游戏和HTML5初探1.1 网页游戏和HTML5...
本节书摘来自异步社区<HTML5游戏编程核心技术与实战>一书中的第1章,第1.1节,作者: 向峰更多章节内容可以访问云栖社区"异步社区"公众号查看. 第1章游戏和H ...
如何去设计一个自适应的网页设计或HTMl5
如何去设计一个自适应的网页设计或HTMl5 如今移动互联网随着3G的普及,越来越火爆,更多需求跟随而来!APP应用市场和APP应用数量成倍成倍的增长!从而给移动互联网带来新的挑战! 移动设备正超过桌面 ...
转:优化js脚本设计，防止浏览器假死
原链接打不开了,复制一份保存: 在Web开发的时候经常会遇到浏览器不响应事件进入假死状态,甚至弹出"脚本运行时间过长"的提示框,如果出现这种情况说明你的脚本已经失控了,必须进行优化 ...
网页内置html5游戏,爽爆HTML5网页游戏！教你怎么精选浏览器
HTML5的超强性能给人们提供了无尽的可能,首当其冲发挥HTML5性能的必然是网页游戏.在告别笨重的Flash之后,HTML5网页游戏会带给玩家不一样的体验,特别是HTML5可允许网页与硬件直接交互, ...
3款动态网页时间时钟HTML5源码
介绍: 3款动态网页时间时钟HTML5源码网盘下载地址: http://kekewangLuo.cc/H5VLrhVBiis0 图片:
20套各种风格影视动画公司响应式企业模电影上映影讯网站模板电影软件网页CSS模板html5网页静态模板Bootstrap扁平化网站源码css3手机seo自适响应
20套各种风格影视动画公司响应式企业模电影上映影讯网站模板电影软件网页CSS模板html5网页静态模板Bootstrap扁平化网站源码css3手机seo自适响应. 不仅仅是首页,二级页面,三级页面,登 ...
Win7系统只要一打开浏览器就死机 win7打开网页浏览器卡死怎么办
Win7系统只要一打开浏览器就死机 win7打开网页浏览器卡死怎么办我们在使用电脑的时候,总是会遇到很多的电脑难题.当我们在遇到了win7电脑中的浏览器一打开就卡死,那么我们应该怎么办呢?今天我们就 ...

html 防网页假死,html5 WebWorkers 防止浏览器假死

html 防网页假死,html5 WebWorkers 防止浏览器假死相关推荐

最新文章

热门文章