HTML 5 Web开发:防止浏览器假死的方法
2012-02-06 16:24
274 查看
一个浏览器至少存在三个线程: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等。多个线程间也是可以通过相同的方法进行数据传递。
直接看代码:
例子:用户输入一个数字,进行加法运算(+=)
以前的做法:
使用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://tech.it168.com/a2011/1205/1283/000001283392.shtml
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等。多个线程间也是可以通过相同的方法进行数据传递。
直接看代码:
例子:用户输入一个数字,进行加法运算(+=)
以前的做法:
<!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应用中还是非常有价值的。
原文:http://tech.it168.com/a2011/1205/1283/000001283392.shtml
相关文章推荐
- html5 Web开发:防止浏览器假死的方法
- html5 Web开发:防止浏览器假死的方法
- h5鱼虾蟹源码搭建开发:防止浏览器假死的方法
- WEB前端开发学习----6.CSS 和 JS 在html的使用方法
- html移动Web开发----优化浏览器视口宽度设置
- 转:Html+Asp+Php+Jsp:4种语言禁止浏览器缓存页面的方法+真正防止html缓存的手技术
- Web开发中防止浏览器的刷新键引起系统操作重复提交
- web开发-邮件编写HTML网页正常显示实现方法-学习笔记八
- Android开发 activity里面的WebView加载js调用windows.location.reload()会弹出浏览器的解决方法
- Web开发中防止表格被撑宽的方法
- 移动前端开发中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析html代码,更好地将移动web前端页面表现出来。本文整理一些常用的meta标签
- iOS开发web加载HTML方法
- Django、MySQL开发WEB项目防止中文乱码的有效方法
- Web MVC开发程序代码的简写方法,强类型数据和Html helper使用方法。车老师代码
- iOS开发中浏览器能打开的URL,WebView打不开的处理方法
- web 开发之js---页面缓存, jsp 缓存, html 缓存, ajax缓存,解决方法
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符
- webApp开发之html5Plus---检查网络等js方法
- 《Head First Python》Chapter7 Web开发 源代码出错解决方法
- 二十一、【.Net开源框架】EFW框架Web前端开发之目录结构和使用FireBug调试方法