<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8" />

</head>

<body>

  <div id="log"></div>

  <script id="worker1" type="javascript/worker">

    // This script won't be parsed by JS engines because its type is javascript/worker.

    self.onmessage = function(e) {

      self.postMessage('msg from worker');

    };

    // Rest of your worker code goes here.

  </script>

  <script>

    function log(msg) {

      // Use a fragment: browser will only render/reflow once.

      var fragment = document.createDocumentFragment();

      fragment.appendChild(document.createTextNode(msg));

      fragment.appendChild(document.createElement('br'));

      document.querySelector("#log").appendChild(fragment);

    }

    var blob = new Blob([

      document.querySelector('#worker1').textContent

    ], { type: "text/javascript" })

    // Note: window.webkitURL.createObjectURL() in Chrome 10+.

    var worker = new Worker(window.URL.createObjectURL(blob));

    worker.onmessage = function(e) {

      log("Received: " + e.data);

    }

    worker.postMessage("hello"); // Start the worker.

  </script>

</body>

</html>

https://www.html5rocks.com/en/tutorials/workers/basics/#toc-inlineworkers

Inline Workers--Web workers without a separate Javascript file的更多相关文章

  1. JavaScript是如何工作的：Web Workers的构建块 + 5个使用他们的场景

    摘要: 理解Web Workers. 原文:JavaScript是如何工作的:Web Workers的构建块 + 5个使用他们的场景 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这 ...

  2. [翻译]Review——How JavaScript works：The building blocks of Web Workers

    原文地址:https://blog.sessionstack.com/how-javascript-works-the-building-blocks-of-web-workers-5-cases-w ...

  3. JavaScript 工作原理之七－Web Workers 分类及 5 个使用场景

    Web Workers 分类及 5 个使用场景 原文请查阅这里,略有删减,本文采用知识共享署名 4.0 国际许可协议共享,BY Troland. 这是 JavaScript 工作原理的第七章. 本系列 ...

  4. JavaScript 学习笔记 - Web Workers

    前言 本文仅是 Web Workers 的入门科普文章,不涉及太琐碎的知识点. 我们知道,在 Web Workers 出来之前,JavaScript 是单线程的.即使是 setTimeout 之类的看 ...

  5. [书籍翻译] 《JavaScript并发编程》第五章 使用Web Workers

    本文是我翻译<JavaScript Concurrency>书籍的第五章 使用Web Workers,该书主要以Promises.Generator.Web workers等技术来讲解Ja ...

  6. WijmoJS 使用Web Workers技术，让前端 PDF 导出效率更高效

    概述 Web Workers是一种Web标准技术,允许在后台线程中执行脚本处理. WijmoJS 的2018v3版本引入了Web Workers技术,以便在生成PDF时提高应用程序的运行速度. 一般来 ...

  7. Webpack 下使用 web workers 及 基本原理 和 应用场景

    _ 阅读目录 一:web workers的基本原理 二:web Workers 的基本用法 三:在webpack中配置 Web Workers 四:Web Worker的应用场景 回到顶部 一:web ...

  8. Web Workers

    在 Web Workers 中使用 postMessage 和 onmessage 首先,需要在客户端页面的 JavaScript 代码中 new 一个 Worker 实例出来,参数是需要在另一个线程 ...

  9. html5 Web Workers

    虽然在JavaScript中有setInterval和setTimeout函数使javaScript看起来好像使多线程执行,单实际上JavaScript使单线程的,一次只能做一件事情(关于JavaSc ...

随机推荐

  1. WWDC 2013 Session笔记 - UIKit Dynamics入门

    本文涉及到的WWDC2013 Session有 1.Session 206 Getting Started with UIKit Dynamics 2.Session 221 Advanced Tec ...

  2. HTML 特殊符号编码对照表

    HTML 特殊符号编码对照表 特殊符号 命名实体 十进制编码 特殊符号 命名实体 十进制编码 特殊符号 命名实体 十进制编码 Α Α Α Β Β Β Γ Γ Γ Δ Δ Δ Ε Ε Ε Ζ Ζ Ζ Η ...

  3. win环境变量立即生效

    执行 set PATH=C: 新打开的cmd窗口就立即生效了.

  4. 简述MVC框架模式以及在你（Android）项目中的应用

    标题是阿里电话面试的问题,一直以为自己很清楚MVC模式,结果被问到时,居然没法将MVC和Android中各个组件对应起来,所以,面试肯定挂了,不过面试也是学习的一种方式,可以知道大公司看中什么,以及自 ...

  5. javascript多态 - 类形式实现demo

    /* *多态 * 对传入的参数做判断以实现多种调用方式 */ //类形式实现 function Add(){ function zero(){ return 10; } function one(nu ...

  6. 深入理解Nginx之调试优化技巧

    在开发过程中,我们经常会碰到段错误等异常,这时我们需要有相应的机制来进行调试,特别是服务提供在线上时,面对大量的日志信息,合理的调试处理机制对于开发来说是一件非常重要的事情,幸好Nginx本身提供了很 ...

  7. Linux换源+编译内核总结

    换源: 我用的是CentOS,所以下面以其为例,其它OS做法类似,可作参考: 在主机能联网的情况下 进入存放源配置的文件夹 cd /etc/yum.repos.d 备份默认源 mv ./CentOS- ...

  8. react native windows开发环境搭建(一)

    ReactNative分为服务器端和手机端loader程序,Android版有3种代码:js代码,java代码和c++代码,主要是编写的是js代码,如果框架功能不足就需要编写原生的java代码来扩展, ...

  9. DataTable去除重复行，根据某一字段进行distinct

    网上有很多方法,比如利用视图处理: //去掉重复行 DataView dv = table.DefaultView; table = dv.ToTable(true, new string[] { & ...

  10. 从Mysql数据库中导入导出表结构

    1.从Mysql数据库中导入sql表 很简单,只需要一个命令即可搞定:[root@localhost ~]# mysql -uroot -piweb_xxx_mysql iweb < modif ...