讲给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( )将结果数据传给主线程显示。好了，没啥可再多说的了，直接运行，效果如下图所示：
转载：https://blog.csdn.net/lfdfhl/article/details/100925229
查看评论