HTML5之Worker Thread
传统网页中嵌入的JSP语言都是执行在UI的上下文中,一般来说这种JSP处理的都是简单逻辑,没啥问题,随着Web复杂度越来高,JSP能处理的事情也越来越复杂,如果JSP计算量比较大的话,这就会导致UI页面假死。HTML5中的WorkerThread可以缓解这个问题,Worker Thread通过UI thread创建一个新的线程来进行计算,消息和结果通过Web Message来进行通讯,由于这种异步性,UI便可以较为流畅地响应新到来的事件。
调用过程如下:
1.新的工作线程执行体放在一个单独的JS文件中,比如worker.js.
- self.onmessage = function(event){
- //do the real compute ---begin
- //
- //do the real compute ---end
- //post message back to UI thread
- self.postMessage(XXXX);
- };
self.onmessage = function(event){ //do the real compute ---begin // //do the real compute ---end //post message back to UI thread self.postMessage(XXXX); };
2.在UI的执行线程中生成一个worker对象,worker对象的构造函数参数就是worker.js
- var worker = new Worker("worker.js");
var worker = new Worker("worker.js");
3.下面就可以发送消息让worker干活了
- worker.postMessage("perise");
worker.postMessage("perise");
4.活干完了给UI发送消息,也就是第一步中的
- self.postMessage(XXXX);
self.postMessage(XXXX);
5.UI进行响应
- worker.onmessage = function(event){
- //update UI here
- };
worker.onmessage = function(event){ //update UI here };
Notes:
*在Chrome中调试的时候会出现SECURITY_ERR: DOM Exception 18,传说是Webkit的bug,没有细究,可以通过搭建一个本地的HTTP服务器来解决,把HTML文件放到本地服务器上就可以绕开这个安全问题了,我使用的是WAMP。
*也许是为了控制Worker Thread的复杂度,Chrome的Worker Thread中不能再生成新的worker thread,其实这个很容易绕开,发送一个消息到UI中,让UI生成新的Worker Thread就好,Firefox可以支持subworker,但Chrome是可以支持sharework,这种shareworker可以共享JS文件里面的全局数据
相关推荐
表格的现在还是较为常用的一种标签,但不是用来布局,常见处理、显示表格式数据。在HTML网页中,要想创建表格,就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...