符合中小企业对网站设计、功能常规化式的企业展示型网站建设
本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...
商城网站建设因基本功能的需求不同费用上面也有很大的差别...
手机微信网站开发、微信官网、微信商城网站...
这篇文章将为大家详细讲解有关Html5多线程开发之WebWorkers的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
创新互联公司是一家集网站建设,大余企业网站建设,大余品牌网站建设,网站定制,大余网站建设报价,网络营销,网络优化,大余网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。
我们都知道,浏览器执行js代码是单线程的,当页面脚步执行时,页面是没办法响应别的的,直到脚步的结束,而这里介绍的WebWorkers就可以改变这一切。
WebWorkers是运行在后台的js代码,独立于其他脚本,不会影响页面的性能。我们可以继续做任何愿意做的事情:点击、选取内容等等,而此时WebWorkers在后台运行。
所有主流浏览器均支持 web worker,除了 Internet Explorer。
第一步:生成worker。
调用Worker()构造函数,指定一个要在worker线程内运行的脚本的URI,例子是当前页面指定worker线程执行的脚步为script-worker.js。
var myWorker = new Worker("script-worker.js");
在script-worker.js里面我们可以执行额外的代码,这些代码的执行不会影响页面去干别的你想干的事情,这听起来很棒。
第二步:传递数据。
页面可以和worker交互传递数据,这样worker在不影响页面干有意义的事情的情况下可以默默去计算,好了告诉一下页面,使用这些数据。
//[主页面代码] myWorker.postMessage("data-from-mainpage"); //[worker代码] onmessage = function (oEvent) { console.log("主页面发送过来的数据是:"+oEvent.data)); };
上面是【主页面发送数据给worker脚本】的情况,是的,你看见了非常亲切的postMessage,好吧,我喜欢这个东西。
//[主页面代码] myWorker.onmessage = function (oEvent) { console.log("worker脚本发送过来的数据是:"+oEvent.data)); }; //[worker代码] postMessage("data-from-mainpage");
上面是【worker脚本发送数据给主页面】的情况,依旧很简单,不过这些只是API,关键在于巧妙的使用才是有益的。
此外,可能worker执行会出错,主页面通过:
myWorker.onerror=function(oEvent){};
可以监听worker发生错误。
第三步:重要几点。
worker线程能够在不干扰UI的情况下执行任务,所执行的JavaScript代码完全在另一个作用域,与当前网页中的代码不共享作用域。
Worker的全局作用域中提供了importScripts()方法,接收一个或多个指向JavaScript文件的URL,加载过程都是异步进行。
importScripts()只会在您提供绝对URI的情况下生效,执行过程也是异步的。
当我们创建WebWorkers对象后,它会继续监听消息(即使在外部脚本完成之后)直到其被终止为止,使用myWorker.terminate()方法可以终止WebWorkers,并释放浏览器/计算机资源。
第四步:重要限制。
1.无法访问DOM节点,无法访问全局变量或是全局函数,法调用alert()或者confirm之类的函数和无法访问window、document之类的浏览器全局变量;
2.不过Web Worker中的Javascript依然可以使用setTimeout(),setInterval()之类的函数,也可以使用XMLHttpRequest对象来做Ajax通信。
关于“Html5多线程开发之WebWorkers的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。