HTML5 新特性之 Webworker 杂谈

Webworker 应用场景

  • 大数据集排序
  • 高流量网络通信
  • 处理密集型数学计算
  • 数据处理(压缩、音频分析、图像处理等)

摘自《你不知道的 JavaScript(中卷)》第 290 页

Webworker 环境

在 Worker 内部是无法访问主程序的任何资源的,这意味着不能访问它的任何全局变量,也不能访问页面的 DOM 或者其他资源。但 Worker 可以:

  • 设定定时器
  • 执行网络操作(Ajax、WebSockets 等)
  • 访问几个重要的全局变量和功能的本地复本,如 navigator、location、JSON 和
    applicationCache 等

在 Worker 内部 同步加载脚本

// 在Worker内部
importScripts( "foo.js", "bar.js" ); 

importScripts(..) 调用会阻塞余下 Worker 的执行,
直到文件加载和执行完成

一个简单的 Webworker 示例

index.html 代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Web Worker</title>
</head>
<body>
    <script>
        var array = ["xiaohan", "mrguo", "junjun"]
        var worker = new Worker("sortworker.js")
        worker.postMessage(array)
        worker.onmessage = function (event) {
            console.log(event.data)
        };
        worker.onerror = function (event) {
            console.log(event)
        }
    </script>
</body>
</html>

sortworker.js 代码

self.onmessage = function (event) {
    var data = event.data
    var newObjArray = data.sort()
    self.postMessage(newObjArray)
}

终止 Worker

worker.terminate()
除特殊说明外本人博客均属原创,转载请注明出处:http://blog.johnhan.cn/blog_1090.html
京ICP备19044523号-1