<!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. __block和__weak的区别

    API Reference对__block变量修饰符有如下几处解释: //A powerful feature of blocks is that they can modify variables ...

  2. C++语言-07-异常处理和信号处理

    异常处理 概述 概念 异常是指在程序运行时发生的特殊情况,C++ 中提供了一套异常处理机制,标准库 提供了异常处理的基础 作用 异常提供了一种转移程序控制权的方式 与异常处理相关的关键字 throw ...

  3. 用最简单话概括SSH三框架

    Hibernate用来做持久层,因为它将JDBC做了一个良好的封装,程序员在与数据库进行交互时可以不用书写大量的SQL语句. Struts是用来做应用层的,他它负责调用业务逻辑serivce层,所以S ...

  4. go的环境变量设置

    GOROOT go的安装路劲 如:D:\Program Files\Go GOPATH go的工作路径 GOPATH可以设置多个.存放包文件.比如你引入 "xxx"包.那么go会去 ...

  5. 6、后记：PMO项目管理 - PMO项目管理办公室

    PMO项目管理办公室的作用,按笔者所简化的理解,其作用就是将项目资源标准化.规范化.文档化.然后,根据实际的项目情况,对项目间的资源内容进行协调沟通和培训,让项目组能够更快更好的完成项目建设任务. 不 ...

  6. Java中静态类型检查是如何进行的

    以下内容来自维基百科,关于静态类型检查和动态类型检查的解释: 静态类型检查:基于程序的源代码来验证类型安全的过程: 动态类型检查:在程序运行期间验证类型安全的过程: Java使用静态类型检查在编译期间 ...

  7. C#显示SQL语句格式

    --SQL SERVER生成测试环境: Create database Test; go USE [Test] GO if OBJECT_ID('Tab','U') is not null drop ...

  8. Confluent介绍（二）--confluent platform quickstart

    下载 http://www.confluent.io/download,打开后,显示最新版本3.0.0,然后在右边填写信息后,点击Download下载. 之后跳转到下载页面,选择zip 或者 tar都 ...

  9. Js 关于console 在IE 下的兼容问题

    程序员在开发代码的过程中,使用console作为调试代码过程的一种手段. 发布到测试生产环境,发现IE8 出现加载错误.使用开发者工具调试,发现可以绕过问题. 通过网络搜索和在项目中进行修正. 以下办 ...

  10. C++杂谈（二）初识vector容器与迭代器

    教科书中失踪的vector 很奇怪的一件事情,在当时学习C++的时候,老师并没有讲授容器的内容,当时参考的谭浩强老师的红皮C++也没有这个内容,不知为何.后来再学C++,发现容器是一个很重要的概念,在 ...