如何查找历史线程阻塞原因_学习 Web Worker(js中的“多线程”)
昨天部门例会,讨论开发的系统遇到的问题,遇到一个医保上传比较耗时的问题,解决方案提到了Web Worker,学习一波。
首先简单介绍一下什么是web worker。我们都知道在浏览器中javascript的执行是单线程的,页面上的javascript在执行时会阻塞浏览器的响应,这非常影响用户体验,所以ajax应运而生了。ajax的出现使得页面在等待服务器响应的这段时间内不再发生阻塞,但是这仍然没有改变代码单线程执行的本质,这也意味着我们依旧不能把耗费时间的复杂运算放在页面上执行。而web worker的出现弥补了这个缺点。
页面上单线程执行的javascript是主线程(我们通常写的javascript都在主线程中执行),new出来的web worker对象为子线程,只有主线程中的代码执行时会导致阻塞,子线程则不会,这表示部分耗费时间的复杂运算完全可以从后台挪到前台来完成。
web worker的定义就不再这里赘述了,对web worker还不了解的同学可以在MDN上去了解。
下面给出一个简单的web worker例子来验证一下子线程的执行是否对页面有影响:
index.html代码:
<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<input type="text" value=""/>
<script>
var w;
function startWorker () {if (typeof(Worker) !== "undefined") {if (typeof(w) === "undefined") {w = new Worker("demo_workers.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>
</body>
</html>
demo_workers.js代码:
function timedCount () {for (var i = 0; i < 10000000000; i++) {if (i % 100000 === 0) {postMessage(i);}}
}timedCount();
点击Start Worker按钮启动web worker,可以看到web worker开始工作,且在web worker正常工作时,我们仍然可以在input输入框中输入信息,这表示页面并没有因为web worker的运行而被阻塞:
另外要注意一点,web worker虽然是新启动的子线程,运行不会阻塞页面,但与主线程的交互会,以上面的代码为例,如果在web worker的for循环里面直接调用postMessage,仍然会感到页面的操作不够流畅(原因是主线程需要一直不停地处理子线程post过来的消息)。
web worker的介绍至此结束,接下来聊一聊web worker的应用场景。目前可以百度到的关于web worker的文章内容大部分都是从MDN复制过来的,极少有介绍在实际项目中是如何使用web worker的,当然,按笔者的理解有两方面的原因:
一、web worker的兼容性问题,主流浏览器对web worker的兼容性还不够高(比如Safari ,IE就更不用说了);
二、在项目中引入web worker并不能带来质的改变(从这一点来说,websocket就不一样,引入websocket后基本可以替换掉项目里所有的轮询,达到性能优化的目的,但正常的项目决不可能设计成让前台来处理复杂的业务逻辑)。
当然,这也不表示web worker毫无用武之地,比如下面几个场景:
大数据的处理:
这里所说的大数据处理,并不是指数据量非常大,而是要从计算量来看,通常用时不能控制在毫秒级内的运算都可以考虑放在web worker中执行。
高频的用户交互:
高频的用户交互适用于根据用户的输入习惯、历史记录以及缓存等信息来协助用户完成输入的纠错、校正功能等类似场景,用户频繁输入的响应处理同样可以考虑放在web worker中执行。
最后声明一点,了解后台的同学千万不要认为web worker等同于后台意义的多线程,web worker现在有了多线程的形(有了多线程的用法),但还不具备多线程的神(不具备线程通信、锁等后台线程的基本特性),web worker的本质是支持我们把数据刷新与页面渲染两个动作拆开执行(不使用web worker的话这两个动作在主线程中是线性执行的)。
作者: 讨厌走开啦
链接:https://blog.csdn.net/lqlqlq007/article/details/79824122
来源: CSDN
如何查找历史线程阻塞原因_学习 Web Worker(js中的“多线程”)相关推荐
- 如何查找历史线程阻塞原因_吊打面试官!Java多线程并发 108 道题,你能答对多少?...
多线程并发108题 1.Java中实现多线程有几种方法 2.继承Thread 类 3.实现Runnable 接口. 4.ExecutorService. Callable. Future 有返回值线程 ...
- 如何查找历史线程阻塞原因_java并发编程-线程状态,线程阻塞方式,阻塞中的线程如何终止?...
前面的例子通过volatile boolean来让任务终止,那么如果任务阻塞了? 如何终止它?本文来看下,参考think in java . 线程的状态 1.new:线程创建后的短暂状态,其分配系统资 ...
- js变量提升_学习笔记:JS中的作用域和预解析
知识总结:谢静贤.汤昊 在javascript中作用域是非常重要的,本文将会说明作用域以及我们在工作,以及面试中的一些面试题,如果有不足的地方希望大家可以评论指出来,自己一定会及时的改正错误,避免大家 ...
- 【Node学习】—Node.js中模块化开发的规范
[Node学习]-Node.js中模块化开发的规范 Node.js 规定一个JavaScript就是一个模块,模块内部定义的变量和函数默认情况下在外部无法得到 模块化内部可以使用exports对象进行 ...
- python 线程超时设置_爬虫基础知识(一)多线程与threading模块
点击上方"蓝字"关注我们,第一时间推送优质文章! 前言 "本期带来的文章是python中多线程与threading模块的主要内容.主要分为「并发与并行」,「进程与线程」, ...
- mysql 如何对表排序_学习MySQL:对表中的数据进行排序和过滤
mysql 如何对表排序 In this article, we will learn how we can sort and filter data using the WHERE clause a ...
- d3.js折线图_学习使用D3.js创建折线图
d3.js折线图 by Sohaib Nehal 通过Sohaib Nehal 学习使用D3.js创建折线图 (Learn to create a line chart using D3.js) 使用 ...
- linux多线程求和_谈一谈C++中的多线程(上)
本篇文章围绕以下几个问题展开: 何为进程?何为线程?两者有何区别? 何为并发?C++中如何解决并发问题?C++中多线程的语言实现? 同步互斥原理以及多进程和多线程中实现同步互斥的两种方法 Qt中的多线 ...
- vue样式 引入图片_详解Vue.js中引入图片路径的几种方式
vue --version 3.6.3 记录总结一下的Vue中引入图片路径的几种书写方式 vue中静态资源的引入机制 Vue.js关于静态资源的官方文档 静态资源可以通过两种方式进行处理: 在 Jav ...
最新文章
- bzoj1079: [SCOI2008]着色方案(DP)
- CNN如何用于NLP任务?一文简述文本分类任务的7个模型
- 多种数据DELPHI备份方式(源码)
- 优化Hadoop Balancer运行速度
- linux下挂载U盘过程
- arcgis server 无法手动删除切片
- 今日笔记!——分析Java应用性能
- 安卓动态调试七种武器之离别钩 – Hooking(下)
- Neo4j fails creating index,创建索引失败
- JavaScript中的函数表达式
- 【初学者必知必会】【电子技术:数电 模电 单片机】【基础概念和小知识点】详解
- 全球区域区号plist列表(跟微信区号列表数据一致)
- jquery.seat-chartsMark在线选座插件使用
- Ribbon原理及使用详解
- HarmonyOS无法添加outlook日历(报错该账户名称已被使用)
- model.evaluate中的verbose的作用
- 春运在即 360又抢了12306的风头
- 温莎大学应用计算机,加拿大留学,温莎大学英语计算机专业了解一下
- 音乐播放器android-1.0
- Java——博主的学习路线
热门文章
- python爬虫京东中文乱码_python3爬虫中文乱码之请求头‘Accept-Encoding’:br 的问题...
- chrome 69 免安装_ElasticSearch安装elasticsearch-head插件
- shell排序_Python排序算法(五)希尔排序
- C++ 基础知识!初学者必看!
- Linux命令中的参数,linux中一些命令以及一些参数的用法
- linux 内核获取时间,Linux内核中的jiffies 以及时间的获取time
- python怎么输出一个数组_python中实现将多个print输出合成一个数组
- 火狐浏览器打印网页不全_武汉社保网上下载打印流程
- arcgis python脚本筛选与线共边的面_ArcGis Python脚本——遍历输出面或折线要素的折点坐标...
- python案例源码_【python】python实例集一