Web Worker无阻塞UI的牛逼技术,html5,可惜无法敢于UI

众所周知,JavaScript是单线程的,JS和UI更新共享同一个进程的部分原因是它们之间互访频繁,但由于共享同一个进程也就会造成js代码在运行的时候用户点击界面元素而没有任何响应这样的情况,这么糟糕的用户体验HTML5怎么会不修订了,这样Web Worker诞生了。

Web Worker进程加载的js运行的时候不仅不会影响浏览器UI,而且也不会影响其它Web Worker进程加载的JS代码。由于Web Worker进程加载的js运行的时候不会影响浏览器UI,也就说明Web Worker中加载的js不能修改用户界面,而每个Web Worker都有自己的全局运行环境,因为它加载的js不能修改用户界面,所以它能操作的对象主要只包括以下几个部分

  • 一个浏览器对象,只包含四个属性:appName,appVersion,userAgent,platform
  • 一个location对象(和window里的一样,但是里面所有的属性是只读的)
  • 一个self对象指向全局Web Worker线程对象
  • 一个importScripts()方法使Web Worker能够加载外部js文件
  • 所有的ECMAScript对象
  • XMLHttpRequest构造器
  • setTimeout()和setInterval()方法

这里先特意讲一个importScript方法,它是以阻塞方法加载js的,只有所有文件加载完成之后接下来的脚本才能继续运行

事实上,Web Worker适合于那些纯数据的,或者说与浏览器UI没关系的长运行脚本。

下面附上最基本的demo事例,我相信聪明的你一看就会了

简单建立一个html页面,页面代码如下而所示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <script type="text/javascript"> var worker = new Worker("webworker.js"); //这句话将让浏览器去加载webworker.js worker.postMessage(‘主线程发起的数据请求!‘); //把数据传递给webworker.js worker.onmessage = function (event) { console.log(event.data); //来自work的数据保存在event.data //接下来就可以对它event.data进行序列化等数据处理啦 }; </script> </body> </html>

上面代码加载的webworker.js的代码如下所示:

onmessage = function (event) { var data = event.data;//这是接收过来的数据 console.log(data);//注意啦 这里不能用alert来替换console.log 因为alert是会阻塞ui 所以wobworker没有使用alert的权限哦 postMessage(data + ‘ --- js回复过来的数据哦!‘);//这里可以把数据传递给主线程哦 }; onerror = function (event) { console.log(‘Error:‘ + event.filename + ‘(‘ + event.lineno + ‘):‘ + event.message); //event.filename 错误的文件名 //event.lineno 错误的行号 //event.message完整的错误消息 }

那么Web Worker的主要用处在哪儿呢,它的优点有哪些呢,下面总结一下哈

  • 可以加载一个JS进行大量的复杂计算而不挂起主进程,并通过postMessage,onmessage进行通信,使用ternimate方法停止工作
  • 可以在worker中通过importScripts(url)加载另外的脚本文件

它的主要缺点在哪儿呢

  • 不能跨域加载JS
  • worker内代码不能访问DOM
  • 因为它是html5中新的API,所以各个浏览器支持都不一样哦!

web worker来加载数据还是比较慢的,即便是大数据量情况下也没任何优势,可能是Worker初始化新起线程比较耗时间。除了在加载过程中是无阻塞的之外没有任何优势

下面再附上我写的一个例子,主要是发挥Web Worker的特长

html界面代码如下所示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <script type="text/javascript"> var worker = new Worker(‘fibonacci.js‘); worker.addEventListener(‘message‘, function (event) { console.time(‘总共花费的时间为:‘); console.log(‘结果:‘ + event.data); console.timeEnd(‘总共花费的时间为:‘); }, false); worker.postMessage(40); </script> </body> </html>

上面代码中加载的fibonacci.js代码如下所示

var fibonacci = function (n) { return n < 2 ? n : arguments.callee(n - 1) + arguments.callee(n - 2); }; onmessage = function (event) { var n = parseInt(event.data, 10); console.log(‘传过来的值为:‘+n); postMessage(fibonacci(n)); }; onerror = function (event) { console.log(‘Error:‘ + event.filenme + ‘(‘ + event.lineno + ‘):‘ + event.message); }

大家运行后可以发现chrome控制台的结果如下图所示:

——————————————————————————————————————————————————————

下边这个例子比较经典:

main.html页面为主线程

<script>

//开辟一个新线程

var worker = new Worker(‘worker.js‘);

worker.postMessage(40) ;

worker.onmessage = function(ev){

console.log(ev);

worker.terminate() //终止一个worker线程

};

</script>

worker.js 开辟的新线程

//新线程

//定义递归函数

var fibonacci =function(n) {

return n <2? n : arguments.callee(n -1) + arguments.callee(n -2);

};

onmessage = function(ev){

var param = parseInt(ev.data,10) ;

//把地柜函数的计算交给新线程,计算完之后用postMessage把结果传回给主线程

postMessage(fibonacci(param))

}

这样就可以实现主线程和新开辟的线程之间的信息交互。复杂的计算就交给了worker.js。页面不用卡死。新线程会在处理完计算之后把数据传回给主线程(有点异步请求的感觉)。

总结我们

时间: 2024-10-13 15:57:12

Web Worker无阻塞UI的牛逼技术,html5,可惜无法敢于UI的相关文章

探真无阻塞加载javascript脚本技术,我们会发现很多意想不到的秘密

原文:探真无阻塞加载javascript脚本技术,我们会发现很多意想不到的秘密 下面的图片是我使用firefox和chrome浏览百度首页时候记录的http请求 下面是firefox: 下面是chrome: 在浏览百度首页前我都将浏览器的缓存全部清理掉,让这个场景最接近第一次访问百度首页的情景. 在firefox的请求瀑布图里有个表现非常之明显:就是javascript文件下载完毕后,有一段时间是没有网络请求被处理的,这段时间过后http请求才会接着执行,这段空闲时间就是所谓的http请求被阻塞

无阻塞加载脚本

一个页面,从被请求访问,到用户可以看到页面.操作页面,到最后页面完全加载完毕,中间需要经历一个相当奇幻的过程,这个过程的速度被"web性能师"孜孜不倦.前赴后继的优化.本文讨论的是其中一个优化. 浏览器线程和阻塞 虽然大家耳熟能详的一句话是: JavaScript是单线程的. 但是: 浏览器当然不是单线程的. 浏览器的多线程中,有的线程负责加载资源,有的线程负责执行脚本,有的线程负责渲染界面,有的线程负责轮询.监听用户事件. 这些线程,根据浏览器自身特点以及web标准等等,有的会被浏览

无阻塞加载js,防止因js加载不了影响页面显示

浏览器加载静态资源和js的方式都是线性加载,所以一般情况可以将js放到</body>前,防止UI线程的阻塞. 而某些时候我们既希望js在整个网页的头部就加载,又担心js阻塞导致网站加载缓慢,就可以用到无阻塞加载js技术. Dynamic Script Elements 动态脚本元素 DOM允许我们使用Javascript动态创建HTML的几乎所有文档内容,一个新的<script>元素可以非常容易的通过标准DOM创建: var script = document.createElem

web worker原理

什么是 web worker? 我们一直强调JavaScript是单线程的,但是web worker的出现使得JavaScript可以在多线程上跑,只是web worker本身适合用于一些复杂的.耗费cpu的运算,不能操作window.document.parent对象,所以说本质上的JavaScript还是单线程的. 这里,我们仅仅举一个简单的例子,看看web worker是怎么运行的,毕竟是html5的规范,目前浏览器的支持还不是很好. web worker就是运行在后台的JavaScrip

HTML5 Web Worker简单使用

Web Workers 是 HTML5 提供的一个javascript多线程解决方案,我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面. 一:如何使用Worker Web Worker的基本原理就是在当前javascript的主线程中,使用Worker类加载一个javascript文件来开辟一个新的线程,起到互不阻塞执行的效果,并且提供主线程和新线程之间数据交换的接口:postMessage,onmessage. 那么如何使用呢,我们看一个例子: //worker.jso

HTML5 Web Worker的使用

Web Workers 是 HTML5 提供的一个javascript多线程解决方案,我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面. 一:如何使用Worker Web Worker的基本原理就是在当前javascript的主线程中,使用Worker类加载一个javascript文件来开辟一个新的线程,起到互不阻塞执行的效果,并且提供主线程和新线程之间数据交换的接口:postMessage,onmessage. 那么如何使用呢,我们看一个例子: JavaScript 1

通过一次实验来了解HTML5的 Web Worker

web worker 是运行在后台的 JavaScript,不会影响页面的性能. 当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成. web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能.您可以继续做任何愿意做的事情:点击.选取内容等等,而此时 web worker 在后台运行. 以上是W3School对WebWorker的定义,讲的非常明确.在这段解释中,我一眼就看到了一句话“执行脚本时,页面状态是不可响应的”,这让我想到了BO

HTML5新增的一些属性和功能之八——web Worker

Web Workers 为什么用web workers? 浏览器的原理中决定了页面打开只有一个主线程--UI渲染线程,如果线程中有耗时的程序(js)会阻塞线程,使得页面中其他的UI无法渲染,我们一般把js文件放在body结束之前,或者优化算法复杂度.但是根本上解决还是线程的问题.在HTML5中新增了web Workers的方法,用来解决JavaScript多线程的问题.把一些耗时的程序放在单独的js中,和浏览器的UI渲染线程同步执行. 如何用: 1.首先把需要单独执行的js代码单独放在一个js文

通过分析iframe和无阻塞脚本关系能让我们更懂iframe

在我上篇文章里,我提到一种使用iframe完成无阻塞脚本加载的方式,因为我对iframe的偏见很大,所以上篇文章里我没有展开讨论这个问题. 文章发表后有位网友问了我这样一个问题,下面是他问题的原文,首先看他发给我的截图,如下所示: 我一个电商后台系统,用的表格控件是flexigrid,,里面是个iframe来的,每一个tab就是一个iframe,现在遇到的问题就是,如果其中一个或者多个iframe在加载数据,还没加载完,如果这个时候,我再去开一个tab,也是查找数据,可能数据量很大,或者提交数据