不使用额外的js文件创建 web workers

简介: ### 问题 web workers 需要将要执行的代码,定义为单独的js,然后通过以下方式来引用 ``` new Worker('some/path/process.js') ``` 但是,当工程本身需要将所有的代码进行编译并合并成一个文件时,这种单独的js的方式,就还需要一些特殊处理。 或者,当页面就是一个单独的html,不希望引用额外的js文件时,web work

问题

web workers 需要将要执行的代码,定义为单独的js,然后通过以下方式来引用

new Worker('some/path/process.js')

但是,当工程本身需要将所有的代码进行编译并合并成一个文件时,这种单独的js的方式,就还需要一些特殊处理。

或者,当页面就是一个单独的html,不希望引用额外的js文件时,web workers本身的初始化方式都会有些不方便。

解决

根据 Worker 的 API,可以基于 Blobs 构建 Worker 实例。

目前,没有什么官方指导的方式,可以通过script标签来定义要执行的代码:

  • html部分
<div id="counter"></div>
<script id="myWorker" type="text/js-worker">
    // 因为type不是text/javascript, 所以不会被js引擎处理
    var i = 0;
    setInterval(function() {
        i++;
        postMessage(i);
    }, 1000);
</script>
  • js部分
var myWorker = null,
var workerData = new Blob([document.getElementById('myWorker').textContent], {
    type: "text/javascript"
});

function init() {
    // 创建worker,包含"js-worker"中定义的代码
    var myWorker = new Worker(window.URL.createObjectURL(workerData));

    myWorker.onmessage = function (e) {
        document.getElementById('counter').innerHTML = e.data;
    };
}

init();

这样,就可以把worker执行的代码,嵌套在当前的页面中,而不用单独的js文件。

更进一步方便,还可以再避免定义单独的script标签,直接将function转换为Blob的方式,如下:

function fn2workerURL(fn) {
  var blob = new Blob(['('+fn.toString()+')()'], {type: 'application/javascript'})
  return URL.createObjectURL(blob)
}

修改开始的例子,就可以按以下方式来写:

  • 纯js部分

var myWorker = null;

var myWorker = function() {
    var i = 0;
    setInterval(function() {
        i++;
        postMessage(i);
    }, 1000);
}

var workerData = new Blob(['(' + myWorker.toString() + ')()'], {
    type: "text/javascript"
});

function init() {
    if (typeof (Worker) === undefined) {
        alert('No webworker supported');
        return false;
    }

    myWorker = new Worker(window.URL.createObjectURL(workerData));
    myWorker.onmessage = function (e) {
        document.getElementById('counter').innerHTML = e.data;
    };
}

init();
相关文章
|
1天前
|
数据可视化 Shell Linux
shell+crontab+gitlab实现ecs服务器文件的web展示
本文通过把ecs服务器上的文件定时上传至gitlab,实现文件的页面可视化和修改历史。技术点:shell、crontab、gitlab。
23 3
|
9天前
|
数据处理 API UED
Web Workers
Web Workers 是一种在后台线程中运行脚本的技术,它的主要作用是提高Web应用程序的性能。通过使用Web Workers,我们可以将一些耗时的任务(如计算、数据处理等)转移到后台线程中执行,从而避免阻塞主线程,提高用户体验。
19 8
|
11天前
|
JavaScript 前端开发 Java
MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、Google Web Toolkit、Google Closure、Ember、Batman 以及 Ext JS。
MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、Google Web Toolkit、Google Closure、Ember、Batman 和 Ext JS 都是 JavaScript 框架,用于开发 Web 应用程序。它们分别提供了不同的功能和特性,以帮助开发者更高效地构建和维护 Web 应用程序。
9 2
|
15天前
|
Web App开发 JavaScript 前端开发
构建现代Web应用:Vue.js与Node.js的完美结合
在当今快速发展的Web技术领域,选择合适的技术栈对于开发高效、响应迅速的现代Web应用至关重要。本文深入探讨了Vue.js和Node.js结合使用的优势,以及如何利用这两种技术构建一个完整的前后端分离的Web应用。不同于传统的摘要,我们将通过一个实际的项目示例,展示从搭建项目架构到实现具体功能的整个过程,着重介绍了Vue.js在构建用户友好的界面方面的能力,以及Node.js在处理服务器端逻辑和数据库交互中的高效性。通过本文,读者不仅能够理解Vue.js与Node.js各自的特点,还能学习到如何将这两种技术融合应用,以提升Web应用的开发效率和用户体验。
|
16天前
|
数据采集 机器学习/深度学习 JavaScript
画【Python折线图】的一百个学习报告(二、pyecharts引入js文件)
画【Python折线图】的一百个学习报告(二、pyecharts引入js文件)
27 0
|
22天前
|
XML JSON JavaScript
|
24天前
|
存储 JavaScript 前端开发
只使用简单的 JavaScript 创建文件共享型网站
只使用简单的 JavaScript 创建文件共享型网站
28 0
只使用简单的 JavaScript 创建文件共享型网站
|
24天前
|
前端开发 JavaScript 开发者
Web前端开发中的JavaScript闭包应用
JavaScript闭包是Web前端开发中常见的概念,它可以帮助开发者解决作用域问题,提高代码的可读性和可维护性。本文将介绍JavaScript闭包的基本概念和应用,以及如何在Web前端开发中使用闭包。
19 3
|
28天前
|
JavaScript Android开发
AutoJs4.1.0实战教程---js文件打包发布成APK文件
AutoJs4.1.0实战教程---js文件打包发布成APK文件
14 0
AutoJs4.1.0实战教程---js文件打包发布成APK文件
|
29天前
|
移动开发 JavaScript
echarts生成图表并下载为PDF文件(附带js源码地址)
echarts生成图表并下载为PDF文件(附带js源码地址)
19 0

相关产品

  • 云迁移中心