zoukankan      html  css  js  c++  java
  • web Worker使js实现‘多线程’?

          大家都知道js是单线程的,在上一段js执行结束之前,后面的js绝对不会执行,那么为什么标题说js实现‘多线程’,虽然说加了引号,可是标题也不能乱写不是,可恶的标题党?

          姑且抛开标题不说,先说我们经常会遇到的一个问题,假如我们页面中有很多js要执行,比如页面加载或点击某个按钮就会触发js,最坏的结果就是在很长的一段时间内用户都不能进行任何操作,所以,退出,关闭。。

         当然上面说的有一些夸张,但是比如在移动端,我们都会想办法不停的提高页面性能,在某些情况下如果能有类似多线程的解决办法就更好了~

         html5 提出了一个名词:web Worker,按照官方的解释:web worker 是运行在后台的 JavaScript,不会影响页面的性能。也就可以理解为两段js同时执行,是不是也可以称呼为‘多线程’了呢,所以看标题……

         今天主要来看一下基本用法:

         首先是我们的前台页面,假设我们有一段计算的代码比较耗时,这时候我们需要后台的一个cal.js来计算。

         在我们的前台页面,我们这样写:

         var worker=new Worker(cal.js'),

              i=100000000,

              ele=document.getElementById(‘btn’);

         //当点击某个按钮时,执行某个计算

              ele.addEventListener(‘click’,function(){

                     worker.postMessage(i);

                     worker.onmessage=function(e){

                              alert(e.data)

                     }

              },false)

       

    在cal.js中我们就进行计算

          onmessage=function(e){

                  var data=e.data;

                  for(i=0;i<data;i++){

                        //计算的代码

                 }

                postMessage(data)

         }

    这样一个简单的worker就实现了,通过点击按钮,后台的cal.js执行计算,而不会影响前台的操作;

    简单总结一下,worker方法主要包括:

    前台页面:

    • 通过 new Worker( js) 加载一个JS文件来创建一个worker并返回一个worker实例。
    • 通过worker.postMessage( data ) 方法来向worker发送数据。
    • 通过worker.onmessage方法来接收worker发送过来的数据。
    • worker.terminate() 可以终止worker

    后台js:

    • 通过postMessage( data ) 方法来向主线程发送数据。
    • 绑定onmessage方法来接收主线程发送过来的数据。
  • 相关阅读:
    乌龟棋 (codevs 1068)题解
    全排列 (codevs 1294)题解
    最小伤害 题解
    编码问题 题解
    基础DAY3-运算符 逻辑运算符 if elif
    图解算法——合并k个排序列表(Merge k Sorted Lists)
    算法图解——组合求和( Combination Sum)
    make命令使用 & makefile编写详解
    并发工具CountDownLatch源码分析
    线程局部变量ThreadLocal实现原理
  • 原文地址:https://www.cnblogs.com/mopagunda/p/5442763.html
Copyright © 2011-2022 走看看