我们都知道JS是一种单线程语言,即使是一些异步的事件也是在JS的主线程上运行的(具体是怎么运行的,可以看我另一篇博客JS代码运行机制)。像setTimeout、ajax的异步请求,或者是dom元素的一些事件,都是在JS主线程执行的,这些操作并没有在浏览器中开辟新的线程去执行,而是当这些异步操作被操作时或者是被触发时才进入事件队列,然后在JS主线程中开始运行。

首先说一下浏览器的线程,浏览器中主要的线程包括,UI渲染线程,JS主线程,GUI事件触发线程,http请求线程。

JS作为脚本语言,它的主要用途是与用户互动,以及操作DOM。这决定了它只能是单线程,否则会带来很复杂的同步问题。(这里这些问题我们不做研究)

但是单线程的语言,有一个很致命的确定。如果说一个脚本语言在执行时,其中某一块的功能在执行时耗费了大量的时间,那么就会造成阻塞。这样的项目,用户体验是非常差的,所以这种现象在项目的开发过程中是不允许存在的。

其实JS为我们提供了一个Worker的类,它的作用就是为了解决这种阻塞的现象。当我们使用这个类的时候,它就会向浏览器申请一个新的线程。这个线程就用来单独执行一个js文件。

var worker = new Worker(js文件路径);

那么这个语句就会申请一个线程用来执行这个js文件。

当然,在主线程中有一些方法来实现对新线程的控制和数据的接收。在这里,我们只说比较常用的几个方法。

 1 //postMessage(msg);
2 //postMessage方法把在新线程执行的结果发送到浏览器的js引擎线程里
3 worker.onmessage = function(){
4 //获取在新线程中执行的js文件发送的数据 用event.data接收数据
5 console.log( event.data )
6 };
7 setTimeout( function(){
8 worker.terminate();
9 //terminate方法用于关闭worker线程
10 },2000)
11
12 setTimeout( function(){
13 worker = new Worker("js/test22.js");
14 //再次开启worker线程
15 },3000)

在新线程中使用postMessage()方法可以向主线程中发送一些数据,主线程中使用worker的onmessage事件来接收这些数据,这样就实现了js的多线程执行和多线程之间数据的传递。

js多线程的实现的更多相关文章

  1. JS多线程(web work)

    JS多线程JS多线程不允许操作DOM 1. 引用Concurrent Thread.js库用法:Concurrent.Thread.Create(function(){};) 2. Web Workh ...

  2. JS多线程WebWorker

    JS多线程WebWorker 一,介绍与需求 1.1,介绍 Web Worker可以为JavaScript创建多线程,且Web Worker 是运行在后台的 JavaScript,独立于其他脚本,不会 ...

  3. HTML5之worker开启JS多线程模式及window.postMessage跨域

    worker概述 worker基本使用 window下的postMessage worker多线程的应用 一.worker概述 web worker实际上是开启js异步执行的一种方式.在html5之前 ...

  4. Node.js 多线程完全指南

    [原文] 很多人都想知道单线程的 Node.js 怎么能与多线程后端竞争.考虑到其所谓的单线程特性,许多大公司选择 Node 作为其后端似乎违反直觉.要想知道原因,必须理解其单线程的真正含义. Jav ...

  5. HTML5中Js多线程编程

    Web Worker Web Worker是HTML5提出的新标准,为 JavaScript 创造多线程环境,允许主线程创建 Worker 线程,将一些任务分配给后者运行.在主线程运行的同时,Work ...

  6. JS高级学习笔记(2)之js多线程

    参考大神:Javascript多线程 web worker ---- 6.Web Worker 概述 截图过来: 线程之间的通信 let worker = new Worker(‘js文件路径’) 主 ...

  7. js多线程?

    http://www.cnblogs.com/o--ok/archive/2012/11/04/JS.html http://blog.csdn.net/nx8823520/article/detai ...

  8. js多线程(worker)

    浏览器端js是单线程执行,所以当js执行高负载运算时,UI渲染就会阻塞,页面就会出现卡顿,用户体验就不是很好 js为此也提供了异步操作,例如: 定时器(setTimeout 和 setInterval ...

  9. js多线程worker

    参考地址:https://blog.csdn.net/huang100qi/article/details/89303555?utm_source=app https://www.cnblogs.co ...

随机推荐

  1. 数学-绝对值-Reverse Subarray To Maximize Array Value

    2020-02-11 12:01:21 问题描述: 问题求解: 本题的难度个人感觉还是蛮大的,主要是不容易想到O(n)的解. 对于 ...a, [b, ... , c], d, ...,如果我们将其中 ...

  2. python之进程,线程

    什么是进程(process)? 程序并不能单独运行,只有将程序装载到内存中,系统为它分配资源才能运行,而这种执行的程序就称之为进程.程序和进程的区别就在于:程序是指令的集合,它是进程运行的静态描述文本 ...

  3. 局部变量表中Slot复用对垃圾回收的影响详解

    看两段代码 1. package com.jvm; public class Test { public static void main(String[] args) { { byte[] plac ...

  4. ArrayList中的Iterator详解

    每个实现Iterable接口的类必须提供一个iterator方法,返回一个Iterator对象,ArrayList也不例外 public Iterator<E> iterator() { ...

  5. Nginx打点服务器配置

    Nginx打点服务器配置 什么是打点服务器 他的作用是什么 打点服务器就是记录用户行为的服务器 单独从应用独立出来 目的就是为了减轻应用服务器压力 效果如下: 10.0.1.1 - - [05/Feb ...

  6. [noip2016]蚯蚓<单调队列+模拟>

    题目链接:https://vijos.org/p/2007 题目链接:https://www.luogu.org/problem/show?pid=2827#sub 说实话当两个网站给出AC后,我很感 ...

  7. CSS躬行记(2)——伪类和伪元素

    一.伪类选择器 伪选择器弥补了常规选择器的不足,能够实现一些特殊情况下的样式,例如在鼠标悬停时或只给字符串中的第一个字符指定样式.与类选择器类似,可以从HTML元素的class属性中查看到,但伪选择器 ...

  8. CodeForces 506B/505D Mr. Kitayuta's Technology

    Portal:http://codeforces.com/problemset/problem/506/B http://codeforces.com/problemset/problem/505/D ...

  9. Kylin 新定位:分析型数据仓库

    亲爱的各位社区朋友: Apache Kylin 在 2014 年 10 月开源并加入 Apache 软件基金会的孵化器,一年后从孵化器毕业成为 Apache 顶级项目.从第一天起,Kylin 的标语是 ...

  10. python--Django从创建一个项目说起

    创建项目 首先进入一个空目录,打开操作命令行,输入: django-admin startproject 项目名称 建立数据库连接 进入项目目录打开settings.py文件,修改以下字段 DATAB ...