html 防网页假死,HTML 5 Web开发：防止浏览器假死的方法

一个浏览器至少存在三个线程：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

onmessage = function(event){ var num = event.data; var result = 0; for(var

i = 0; i

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

文章来源：51CTO.COM

html 防网页假死,HTML 5 Web开发：防止浏览器假死的方法相关推荐

Web开发实用浏览器(工具)插件
1.PowerBand PowerBand是一个IE的插件(同时也支持MyIE2/Maxthon).提供了对HTML动态分析,跟踪,编辑的功能.能够方便快捷的分析HTML页面的结构,有助于网页设计人员 ...
移动web开发介绍——浏览器
前段时间了解学习了一下<移动Web手册>,觉得真的需要这种不是偏向技术.框架或工具的书籍,只是单纯的讲解一些关于移动Web最基本的知识.正好今天整理一部分之前学习过的内容,记录和分享,也方 ...
java工程编辑器中文乱码_Java Web开发项目中中文乱码解决方法汇总
Java Web项目中,解决中文乱码方法总结如下第一种情况:调用jsp页面中文显示乱码问题描述:通过浏览器调用jsp页面,在浏览器中显示的中文内容出现乱码. 解决方法:首先确认本jsp在编辑器中保存 ...
lua打开浏览器并加载网页_使用Lua做Web开发
Lua应用程序与框架 WSAPI 从Lua Web应用程序抽象Web主机服务器的API Xavante 提供WSAPI接口的Lua Web服务器 Orbit Orbit是Lua的MVC Web框架,完 ...
WEB开发中的页面跳转方法总结
1.PHP header()调转 <?php //302跳转 $url = "http://www.baidu.com/"; header("Location: $ ...
web开发时浏览器兼容性问题汇总
最近在搞leaflet在IE8下兼容性问题,特将遇到的各种情况记录如下,持续更新 1.IE8中,position设置为static时,设置top无效,需设置为absolute后,可自由设置其位置,而不 ...
web开发-myeclipse下载git服务器代码方法-学习笔记五
myeclipse下载git服务器代码方法: 1.新建git服务器账户. 2.安装myeclipse软件,安装破解工具和相关插件. 3.按照步骤下载代码和修改之后进行提交代码. 相关文档链接: 链接1 ...
WEB开发——图片浏览器
实验效果: 实验源码: <!DOCTYPE html> <html lang="en"> <head><meta charset=&quo ...
Web开发学习笔记:ngIf中使用方法判断字符串中是否包含子字符串
<p *ngFor="let item of UseTypes"><ion-select-option *ngIf="globalVariable.is ...
html clear属性值,【Web前端基础知识】clear使用方法
[摘要] 前端即网站前台部分,运行在PC端,移动端等浏览器上展现给用户浏览的网页.下面是[Web前端基础知识]clear使用方法,小编建议有准备参加考试的备考生一定要合理规划时间,仔细阅读相关规定,提 ...

html 防网页假死,HTML 5 Web开发：防止浏览器假死的方法

html 防网页假死,HTML 5 Web开发：防止浏览器假死的方法相关推荐

最新文章

热门文章