<!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. 安装和使用cocoapods

    第一步:查看自己电脑的Ruby环境:gem sources -l 1.如果已经是taobao镜像了[https://ruby.taobao.org/],此时不需要环境的修改了,直接进入第二步 2.(1 ...

  2. Web应用程序系统的多用户权限控制设计及实现-权限模块【10】

    前五章均是从整体上讲述了Web应用程序的多用户权限控制实现流程,本章讲述Web权限管理系统的权限配置模块.页面模块涉及到的数据表为权限表.权限配置模块是按照用户组和页面,栏目结合组成的.通过配置一个用 ...

  3. C++语言-06-文件操作

    C语言文件操作 C++语言是C语言的超集,是在C语言的基础上增加了面向对象的特性而创造出来的,最初被命名为带类的C.所以C++语言中包含了C语言的思想,如:C++语言中文件操作的原理与步骤与C语言基本 ...

  4. 1.2 基础知识——关于猪皮（GP，Generic Practice）

    摘要: 这是<CMMI快乐之旅>系列文章之一.说起猪皮(GP,Generic Practice),真的让人又爱又恨,中文翻译叫通用实践.CMMI标准中每个级别包含几个PA,每个PA又包含几 ...

  5. Play Framework 完整实现一个APP（一）

    A blog engine project yabe. 1.创建工程 >play new yabe 设置Application Name: Yet Another Blog Engine. 2. ...

  6. 面试题整理:C#（二）

    1.类,接口的区别 从定义的角度类描述一个实体,包括状态.属性和动作接口定义一类动作,没有实现,也没有状态信息从程序的角度接口是函数声明:类是函数实现接口可以有属性,不能有字段一个子类只能继承一个父类 ...

  7. C#实现函数默认值和C#4.0实现默认值

    static void Main(string[] args) { SayHello(); SayHello("侯志强"); Console.ReadKey(); } C#.0实现 ...

  8. windows 远程桌面研究

    最近因为一个监控相关的项目,深入研究了一下 windows 的 远程桌面的相关知识. 1. 如何让关闭了远程桌面连接的用户,对应的 session 立即退出 windows server. 大家使用 ...

  9. 004.UDP--拼接UDP数据包,构造ip头和udp头通信(使用原始套接字)

    一.大致流程: 建立一个client端,一个server端,自己构建IP头和UDP头,写入数据(hello,world!)后通过原始套接字(SOCK_RAW)将包发出去. server端收到数据后,打 ...

  10. mysql 错误 1221 Incorrect usage of union and order by

    今天有个项目出现了问题 问题原因是union和order by 的问题.关于这个问题的解决方案可以猛击下面的链接. http://blog.csdn.net/gtuu0123/article/deta ...