讲给后台程序员看的前端系列教程(42)——Web Woker

最新推荐文章于 2022-12-08 23:53:37 发布

谷哥的小弟

最新推荐文章于 2022-12-08 23:53:37 发布

阅读量400

点赞数

分类专栏：讲给后台程序员看的前端系列教程文章标签： HTML Web Worker

本文链接：https://blog.csdn.net/lfdfhl/article/details/100925229

版权

讲给后台程序员看的前端系列教程专栏收录该内容

63 篇文章 53 订阅

订阅专栏

推翻自己和过往——自定义View系列教程(10篇)

走出思维困境，踏上精进之路——Android开发进阶精华录

讲给Android程序员看的前端系列教程(40集免费视频教程+源码)

版权声明

本文原创作者：谷哥的小弟
作者博客地址：http://blog.csdn.net/lfdfhl

开篇

在设计之初JavaScript出于界面元素访问安全的考虑将JavaScript代码放置在单线程执行。这么做虽然是安全了不少，但是这也意味着我们应尽量避免在JavaScript中执行耗时较长的操作，比如：大量for循环、加载过多js文件、I/O、密集型计算；因为这么做很容易阻塞主线程导致主线程无法再响应其它操，极端情况下甚至造成页面一片空白。

为了解决刚提到的问题，在HTML5中新增了Web Worker

Web Worker简介

Web Worker用于将耗时的任务交给子线程去做从而避免主线程的阻塞。Worker用法非常简单和方便，只需要利用JavaScript脚本的url创建Worker对象，浏览器就会启动一个子线程去执行这段JavaScript脚本。但是，请注意：在子线程中执行的JavaScript脚本不能无法访问window或者document对象。说白了：在子线程中执行的JavaScript脚本不能更改UI。故，Worker提供了postMessage(data)和onmessage来实现子线程和主线程之间的数据交互。嗯哼，说到这里，做Android开发的童鞋可能就会喊出来了：这不和Android里面的Handler一样嘛！！！是的，原理非常类似，我之前也写过一篇《深入探讨Android异步精髓Handler》，有兴趣的小伙伴可翻开瞅瞅。

Web Worker示例

在这我们来看一个关于Web Worker的小demo

<!DOCTYPE html>
<!-- 本文作者：谷哥的小弟-->
<!-- 博客地址：https://blog.csdn.net/lfdfhl-->
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Worker</title>
	</head>
	<body>
		<script type="text/javascript">
			var worker = new Worker("js/worker.js");
			worker.onmessage = function(message) {
				var result = message.data;
				document.writeln(result);
			};
		</script>
	</body>
</html>

代码解析如下：

利用外部js文件的路径构造Worker，请参见代码第11行。
利用Worker的onmessage( )处理子线程传递过来的数据，请参见代码第12-15行
在onmessage( )中更改UI，请参见代码第14行

再来瞅瞅，外部文件中的js代码：

for(var i=0;i<100000;i++){
   //模拟耗时任务
}
var message="finish";
postMessage(message);

嗯哼，在此利用for循环模拟了耗时任务。待任务执行完毕后，利用postMessage( )将结果数据传给主线程显示。好了，没啥可再多说的了，直接运行，效果如下图所示：

在这里插入图片描述

谷哥的小弟

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录