61阅读

浏览器假死-HTML 5 Web开发:防止浏览器假死的方法

发布时间:2018-04-25 所属栏目:edge浏览器假死

一 : HTML 5 Web开发:防止浏览器假死的方法

HTML 5 Web开发:防止浏览器假死的方法

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

AD:

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

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

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

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

了解了浏览器的内核处理方式就不难理解浏览器为什么会进入假死状态了,当一段JS脚本长时间占用着处理机就会挂起浏览器的GUI更新,而后面的事件响应 也被排在队列中得不到处理,

浏览器假死 HTML 5 Web开发:防止浏览器假死的方法

DOM操作,一旦JS调用结束就会马上进行一次GUI渲染, 开始执行下一个任务,所以JS中大量的DOMIE6下一次插入大量的HTML。而如果真的弹出了 脚本 运行时间过长 的提示框则说明你的JS脚本肯定有死循环或者进行过深的递归操作了。

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

直接看代码:

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

以前的做法:

!DOCTYPEHTML htmllang= en head metacharset= UTF-8 title webworkers--calculate title head body inputid= num name= num type= text buttononclick= calculate() 计算 button br divid= result >

使用webWorkers以后:

calculate.html

!DOCTYPEHTML htmllang= en head metacharset= UTF-8 title webworkers--calculate title head body inputid= num name= num type= text buttononclick= calculate() 计算 button br divid= result >

calculate.js onmessage=function(event){ varnum=event.data; varresult=0; for(vari=0;i num;i++){ result+=i; } postMessage(result); };

webWorker需要将代码放入web玛瑙 mnwg.net服务器中, 如果使用的是localhost请用高版本的chrome浏览器打开,firefox浏览器在处理localhost的时候会出现 Could not get domain! 的错误,关于这个可以参考:https:bugzilla.mozilla.orgshow_bug.cgi?id=682450 对比上面的两种实现方式,当计算值达到100亿的时候,普通做法耗时已经很长,且一般会卡死了。

webWorkers在Chrome15下的效果

浏览器假死 HTML 5 Web开发:防止浏览器假死的方法

更正:getTime()返回的应该是毫秒(ms),而不是秒(s)。[www.61k.com)

如下图所示:

普通方法在Chrome15下的效果

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

原文:a201112051283000001283392.shtml

【编辑推荐】

使用HTML 5制作物理游戏

51CTO技术沙龙第十七期:HTML 5应用开发经验分享

HTML 5 Canvas(画布)教程之图像处理

用HTML 5打造斯诺克桌球俱乐部

使用HTML 5、CSS3和jQuery增强网站用户体验

【责任编辑:陈贻新 TEL:(010)68476606】

软件设计师考试全真模拟试题及解析

本书是按照全国计算机技术与软件专业技术资格(水平)考试《软件设计师考试大纲》的要求,参照《软件设计师教程》及近年来考试试

扩展:游戏浏览器防止假死 / web开发用什么浏览器 / web开发浏览器兼容

二 : HTML 5 Web开发:防止浏览器假死的方法

HTML 5 Web开发:防止浏览器假死的方法

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

AD:

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

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

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

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

了解了浏览器的内核处理方式就不难理解浏览器为什么会进入假死状态了,当一段JS脚本长时间占用着处理机就会挂起浏览器的GUI更新,而后面的事件响应 也被排在队列中得不到处理,

DOM操作,一旦JS调用结束就会马上进行一次GUI渲染, 开始执行下一个任务,所以JS中大量的DOMIE6下一次插入大量的HTML。而如果真的弹出了 脚本 运行时间过长 的提示框则说明你的JS脚本肯定有死循环或者进行过深的递归操作了。

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

直接看代码:

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

以前的做法:

!DOCTYPEHTML htmllang= en head metacharset= UTF-8 title webworkers--calculate title head body inputid= num name= num type= text buttononclick= calculate() 计算 button br divid= result >

使用webWorkers以后:

calculate.html

!DOCTYPEHTML htmllang= en head metacharset= UTF-8 title webworkers--calculate title head body inputid= num name= num type= text buttononclick= calculate() 计算 button br divid= result >

calculate.js onmessage=function(event){ varnum=event.data; varresult=0; for(vari=0;i num;i++){ result+=i; } postMessage(result); };

webWorker需要将代码放入web玛瑙 mnwg.net服务器中, 如果使用的是localhost请用高版本的chrome浏览器打开,firefox浏览器在处理localhost的时候会出现 Could not get domain! 的错误,关于这个可以参考:https:bugzilla.mozilla.orgshow_bug.cgi?id=682450 对比上面的两种实现方式,当计算值达到100亿的时候,普通做法耗时已经很长,且一般会卡死了。

webWorkers在Chrome15下的效果

更正:getTime()返回的应该是毫秒(ms),而不是秒(s)。

如下图所示:

普通方法在Chrome15下的效果

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

原文:a201112051283000001283392.shtml

【编辑推荐】

使用HTML 5制作物理游戏

51CTO技术沙龙第十七期:HTML 5应用开发经验分享

HTML 5 Canvas(画布)教程之图像处理

用HTML 5打造斯诺克桌球俱乐部

使用HTML 5、CSS3和jQuery增强网站用户体验

【责任编辑:陈贻新 TEL:(010)68476606】

软件设计师考试全真模拟试题及解析

本书是按照全国计算机技术与软件专业技术资格(水平)考试《软件设计师考试大纲》的要求,参照《软件设计师教程》及近年来考试试

三 : 浏览器假死

问:几天前软件升级了一下,浏览器就开始频繁假死。我用的是360的。起初是开两个页面后就不动了,之后试过IE修复、删除IE,网页可以打开到三个但仍旧频繁假死,需要等很久才会继续运行。之后重装过系统,现象没有丝毫好转。浏览器假死的现象是:开360——两个标签之后其中一个需要翻页的话点击下一页则立刻不动,标签开的过多关闭一个标签后立刻不动或再开启一个不动;开IE时两到三个页面后会出现未响应,关闭未响应的页面其他也一起关闭。木马也查过没有,毒也查过没有,除了浏览器外其他程序照常运行。另外浏览器假死现象越到晚上越严重。请诸位大侠帮忙解决。

答:flash插件引起的,把电脑上的flash插件卸载掉,然后就可以避免此问题了。
本文标题:浏览器假死-HTML 5 Web开发:防止浏览器假死的方法
本文地址: http://www.61k.com/1164064.html

61阅读| 精彩专题| 最新文章| 热门文章| 苏ICP备13036349号-1