web Worker使js实现‘多线程’

最新推荐文章于 2024-06-26 09:32:46 发布

UIEngineer

最新推荐文章于 2024-06-26 09:32:46 发布

阅读量882

点赞数 1

分类专栏： HTML5/CSS3

本文链接：https://blog.csdn.net/zjsfdx/article/details/80677402

版权

HTML5/CSS3 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

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

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

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

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

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

demo.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title></title>
</head>
<body>
    <p>计数：<output id="result"></output></p>
    <button onclick="startWorker()">开始 Worker</button>
    <button onclick="stopWorker()">停止 Worker</button>
</body>
</html>

<script>

  let w;

  function startWorker(){
    if(typeof(Worker) !== "undefined"){
      if(typeof(w) == "undefined"){
        w = new Worker('./demo.js');
      }
      w.onmessage = function(event){
        document.getElementById("result").innerHTML = event.data;
      };
    }else{
      document.getElementById("result").innerHTML = "Sorry,your browser does not support Web Workers...";
    }
  }

  function stopWorker(){
    w.terminate();
  }

</script>

<!-- <script src="./demo.js"></script> -->

demo.js

let i = 0;
function timedCount(){
    i++;
    postMessage(i);
    setTimeout("timedCount()",500);
}
timedCount();

浏览器输入

http://localhost/vuePHP/demo/demo.html

这里写图片描述

UIEngineer

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
web Worker使js实现‘多线程’

大家都知道js是单线程的，在上一段js执行结束之前，后面的js绝对不会执行，那么为什么标题说js实现‘多线程’，虽然说加了引号，可是标题也不能乱写不是，可恶的标题党？姑且抛开标题不说，先说我们经常会遇到的一个问题，假如我们页面中有很多js要执行，比如页面加载或点击某个按钮就会触发js,最坏的结果就是在很长的一段时间内用户都不能进行任何操作，所以，退出，关闭。。当然上面说的有一些夸张，...
复制链接

扫一扫

专栏目录