js线程模型

客户端javascript是单线程，浏览器无法同时运行两个事件处理程序

设计为单线程的理论是，客户端的javascript函数必须不能运行太长时间，否则会导致web浏览器无法对用户输入做出响应。这也是为什么Ajax的API都是异步的，以及为什么客户端Javascript不能使用一个简单的异步load()或者require()函数来加载javascript库

如果应用程序不得不执行太多的计算而导致明显的延迟，应该允许文档在执行这个计算之前完全载入，并且确保告诉用户正在进行计算并且浏览器没有挂起。如果可能应该将任务分散为离散的子任务，可以使用setTimeout()和setInterval()方法在后台运行子任务，同时更新一个进度指示器向用户显示反馈

Web worker简介

HTML5定义了一种作为后台线程的WebWorker。 web worker是一个用来执行计算密集任务而不冻结用户界面的后台线程。

Web worker无法访问window对象和document对象，和主线程之间的通信也只能通过异步消息传递机制来实现。

Web worker 本身不是轻量级的线程，因而常见一些worker去处理次要的操作是不划算的

浏览器支持情况：

包含两部分：

　　1. Worker对象：暴露给创建该线程的线程

　　2.  WorkerGlobalScope：用来表示新创建的worker的全局对象

Web Worker基本使用

创建新的Worker：

var worker= new Worker("/assets/demo.js");

传递参数：

worker.postMessage("file.text");

接收消息：

worker.onmessage = function(e){

   var message = e.data;

   ......

}

Worker当然也支持addEventListener()方法和removeEventListener()方法，如果需要管理多个事件时可以使用哒

异常处理：

worker.onerror = function(e){

  console.log("Error at " + e.filename + ":" +e.lineno + e.message );

}

结束Worker

worker.terminate();

载入类和工具函数：

importScripts("utils/base64.js","utils/Map.js"....);

注意：importScripts是同步的方法，一旦importScripts方法返回就可以开始使用载入的脚本，不需要回调函数

Worker作用域

当创建一个新的Worker时该代码会运行在一个全新的Javascript运行环境中（WorkerGlobalScope），完全与创建Worker的脚本隔离

WorkerGlobalScope是Worker的全局对象，因而它包含所有核心Javascript全局对象拥有的属性如JSON等，window的一些属性如self等,也拥有类似XMLHttpRequest()函数

下面简单概括下worker所支持的属性和方法：

self

setTimeout、clearTimeout、setInterval、clearInterval

location

navigator

onerror

XMLHttpRequest

addEventListener、removeEventListener

简单例子

eg1:

html:

<div id="div">

        <p>

            计数:

            <output id="result"></output>

        </p>

        <button onclick="startWorker()">开始 Worker</button>

        <button onclick="stopWorker()">停止 Worker</button>

        <br />

        <br />

        <button onclick="mainWork()"> click me </button>

        <br />

        <br />

    </div>

js脚本：

    var 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();

        }

        function addE(){

            var p = document.createElement('p');

            p.innerHTML="WISH YOU HAPPY~";

            div.appendChild(p);

        }

demo.js:

/**

 * Web Worker Demo----count

 *

 */

 var i=0;

function timedCount()

{

i=i+1;

postMessage(i);

setTimeout("timedCount()",500);

}

timedCount();

结果：

点击开始Worker后，计数在后台进行，可以点击click me，相互不影响

eg2：

如上面所说，我们应该尽量使用WebWorker处理计算量大的，主要的工作，否则因为WebWorker本身不是轻量级的线程，因而有点得不偿失

本例使用WebWoker处理图片，将图片模糊，顺便学习下canvas，如下：

html：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<style>

img {

      width: 400px;

      height: 300px;

    }

</style>

</head>

<body>

<img src="../images/demo.png" onclick="smear(this)"/>

<img src="../images/1.png" onclick="smear(this)"/>

<img src="../images/2.png" onclick="smear(this)"/>

<script>

    function smear(img){

        var canvas = document.createElement("canvas");

        canvas.width = img.width;

        canvas.height = img.height;

        var context = canvas.getContext("2d");

        context.drawImage(img,0,0);

        var pixels = context.getImageData(0,0,img.width,img.height);

        var worker = new Worker("SmearWorker.js");

        worker.postMessage(pixels);

        worker.onmessage = function(e){

            var smeared_pixels = e.data;

            context.putImageData(smeared_pixels,0,0);

            img.src = canvas.toDataURL();

            worker.terminate();

            canvas.width = canvas.height = 0;

        }

    }

</script>

</body>

</html>

SmearWorker.js:

/**

 * SmearWorker---smear the picture

 */

 function smear(pixels){

     var data = pixels.data,

         width = pixels.width,

         height = pixels.height;

     var n = 10,

         m = n-1,

         i,

         col;

     for(var row=0; row<height; row++){

         i = row*width*4 + 4;

         for(col =1;col<width; col++,i+=4){

             data[i] = (data[i] +data[i-4]*m/n);

             data[i+1] = (data[i+1] +data[i-3]*m/n);

             data[i+2] = (data[i+2] +data[i-2]*m/n);

             data[i+3] = (data[i+3] +data[i-1]*m/n);

         }

     }

     return pixels;

 }

 onmessage = function(e){

     postMessage(smear(e.data));

 };

结果如下：

图片点击前:

点击第一张和第三张图片：

其他

我们在js中使用XMLHttpRequest时经常会设置为异步方式，因而在主浏览器线程张使用同步很不好，我们可以在worker中使用同步的XMLHttpRequest

JS线程模型&Web Worker的更多相关文章

  1. js 性能优化 - web worker

    当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成. web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能. 您可以继续做任何愿意做的事 ...

  2. 使用Actor模型管理Web Worker多线程

    前端固有的编程思维是单线程,比如JavaScript语言的单线程.浏览器JS线程与UI线程互斥等等,Web Woker是HTML5新增的能力,为前端带来多线程能力.这篇文章简单记录一下搜狗地图WebG ...

  3. 深入HTML5 Web Worker应用实践：多线程编程

    HTML5 中工作线程(Web Worker)简介 至 2008 年 W3C 制定出第一个 HTML5 草案开始,HTML5 承载了越来越多崭新的特性和功能.它不但强化了 Web 系统或网页的表现性能 ...

  4. 深入 HTML5 Web Worker 应用实践：多线程编程

    深入 HTML5 Web Worker 应用实践:多线程编程 HTML5 中工作线程(Web Worker)简介 至 2008 年 W3C 制定出第一个 HTML5 草案开始,HTML5 承载了越来越 ...

  5. 理解微信小程序的双线程模型

    有过微信小程序开发经验的朋友应该都知道"双线程模型"这个概念,本文简单梳理一下双线程模型的一些科普知识,学识浅薄,若有错误欢迎指正. 我以前就职于「小程序·云开发」团队,在对外的一 ...

  6. Web Worker javascript多线程编程（一）

    什么是Web Worker? web worker 是运行在后台的 JavaScript,不占用浏览器自身线程,独立于其他脚本,可以提高应用的总体性能,并且提升用户体验. 一般来说Javascript ...

  7. Web Worker javascript多线程编程（二）

    Web Worker javascript多线程编程(一)中提到有两种Web Worker:专用线程dedicated web worker,以及共享线程shared web worker.不过主要讲 ...

  8. 关于Web Worker你必须知道的7件事

    介绍 通过使用Web Worker, 我们可以在浏览器后台运行Javascript, 而不占用浏览器自身线程.Web Worker可以提高应用的总体性能,并且提升用户体验.如果你想在自己的Web应用中 ...

  9. html5之web worker

    Web Worker   在本文中 与 Web Worker 进行双向通信 WindowTimers 在 IE10 Platform Preview 4 中对 Web Worker 的更新 API 参 ...

随机推荐

  1. php导出excel不断刷新缓冲区的思路(转)

    require('./db.class.php');$DB = new db();$DB->connect();//数据库链接 header("Content-Type: text/c ...

  2. android中的Handler和Runnable

    最近在做一个项目,在网络请求时考虑用Handler进行处理,然后就研究了一下Handler和Runnable 首先在看一下java中的Runnable The Runnable interface s ...

  3. 转载：浅析C#深拷贝与浅拷贝

    原文地址 :http://www.cnblogs.com/xugang/archive/2010/09/09/1822555.html   感谢博主分享! 也许会有人这样解释C# 中浅拷贝与深拷贝区别 ...

  4. 如何做高大上的网站布局 -------------------->>转至(卧牛SEO/武汉SEO http://blog.sina.com.cn/zhengkangseo )

    SEO开始做,最重要的是网站布局,一个网站布局决定了用户在网站的停留时间,在网站中放入用户想要的内容之外,更重要的是要让用户看到网站之后,一目了然,视觉和感官上良好的体验.那新手该如何做网站布局呢? ...

  5. 数据逆向传递 unwind segue

    一.简介 unwind segue通过允许你定义一个控制器和其他控制器的关系来扩展segue的概念,这个“关系”先于顺传(流式控制)的方式.基于unwind segue可以实现导航相反的效果,即将界面 ...

  6. 自定义android精美聊天界面

    编写精美聊天界面,那就肯定要有收到的消息和发送的消息. 首先还是编写主界面,修改activity_chat.xml中的代码,如下所示: <?xml version="1.0" ...

  7. Linux基本权限

    首先需要我们了解的是,权限(rwx)对于文件和目录的作用是不一样的 . 权限对文件的作用 r : 读取文件内容(cat , more , head , tail) w: 编辑.新增.修改文件内容(vi ...

  8. CSS 布局Float 【3】

    float 属性定义元素在哪个方向浮动. 浮动元素会生成一个块级框,而不论它本身是何种元素. 如果浮动非替换元素,则要指定一个明确的宽度:否则,它们会尽可能地窄. 注释:假如在一行之上只有极少的空间可 ...

  9. 第一个shell编程，输出hello world！

    在计算机科学中,Shell俗称壳(用来区别于核),是指“提供使用者使用界面”的软件(命令解析器).它类似于DOS下的command和后来的cmd.exe.它接收用户命令,然后调用相应的应用程序.--- ...

  10. 【USACO 2.2.4】派对灯

    [描述] 在IOI98的节日宴会上,我们有N(10<=N<=100)盏彩色灯,他们分别从1到N被标上号码. 这些灯都连接到四个按钮: 按钮1:当按下此按钮,将改变所有的灯:本来亮着的灯就熄 ...