HTML5 API --- Web Worker的高级用法
程序员文章站
2023-02-08 13:50:13
web worker是html5引进的一个重要的api,它让一直受人诟病的单线程运行的javascript有了多线程的能力,有了web worker,开发者就可以把一些重量级耗时的计算任务单独放在另...
web worker是html5引进的一个重要的api,它让一直受人诟病的单线程运行的javascript有了多线程的能力,有了web worker,开发者就可以把一些重量级耗时的计算任务单独放在另外一个线程中去运行,这样就可以让多个线程同时运行,最大限度的发挥cpu多核的功能。
web worker基本的用法如下:
var worker = new worker(“background.js”); // background.js文件是事先准备好的,里面的javascript文件运行在后台,一般为重量级或耗时的运算。那么假设开发者需要动态的执行一系列的javascript程序该怎么办呢?
下面介绍一下web worker的高级用法,如何在不事先创建js文件的前提下,动态的指定javascript程序在worker中运行?
我们可以创建一个blob对象,并把javascript文本赋值给blob对象,然后通过window.url.creatobjecturl方法生成一个url,最后根据该url创建worker对象,那么刚才的javascript文本就运行在worker线程中。这样就完成了把任务动态的分配给worker线程去执行,而不需要事先创建一个javascript文件。
实例代码如下:
<html> <body> <script id="worker" type="javascript/worker"> self.postmessage("message from web worker."); </script> <script> var worker_blob = new blob([document.getelementbyid("worker").textcontent]); var worker = new worker(window.url.createobjecturl(worker_blob)); worker.onmessage = function(event) { console.log("received event: " + event.data); }; </script> </body> </html>
推荐阅读
-
使用HTML5的Notification API制作web通知的教程
-
针对HTML5的Web Worker使用攻略
-
HTML5 API --- Web Worker的高级用法
-
浅谈HTML5 Web Worker的使用
-
HTML5 基础知识,第 3 部分 HTML5 API 之应用-介绍HTML5 API 的用法和价值,Canvas 提供的创造性,以及Web storage的离线应用
-
HTML5关于上传API的一些使用(中)_html/css_WEB-ITnose
-
HTML5 API --- Web Worker的高级用法
-
使用HTML5的Notification API制作web通知的教程_html5教程技巧
-
HTML5 Web Worker的使用
-
HTML5 Web Worker的使用