继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

HTML5中的web Worker个人了解

big_person
关注TA
已关注
手记 12
粉丝 8
获赞 131

谈到web Worker首先想到进程和线程的关系怎样
进程(Process)是管理内存的基本单位;线程(Thread)处于进程内部,是进程内执行代码的基本单位。 每个进程内部至少有一个线程!每个进程内部可以同时存在多个线程,并发执行。
线程(Thread)浏览器进程中发起HTTP请求时,可以使用多个线程(如Chrome中有6个请求线程); 浏览器进程中负责渲染DOM树(执行所有的HTML/CSS/JS代码)的只有一个线程——称为UI主线程。

  • Worker对象
    • 事件
      • onmessage事件 - 用于监听Worker文件 当Worker调用postMessage()方法传递消息时,该事件被触发 。
      • onerror事件 - 用于监听错误 * 当Worker出现错误时,该事件被触发 方法
      • postMessage(msg)方法 - 传递消息
      • terminate()方法 - 终止通信(HTML与Worker之间)
  • Worker文件的限制
    • 无法使用DOM内容
    • 无法使用BOM内容(window对象)
      • 以下内容允许使用 setTimeout()和cleatTimtout() setInterval()和clearInterval()
        Worker实现的效果
      • 单向通信 - worker文件->HTML页面 传递消息 Worker线程给主渲染线程传递数据:
        主线程: var w2 = new Worker('x.js');
        w2.onmessage = function(event){ event.data; }
        Worker线程: postMessage( '字符串数据' );
      • 双向通信 - worker文件<->HTML页面 传递消息 主渲染线程给Worker线程 传递数据: 主线程: var w1 = new Worker('x.js');
        w1.postMessage('字符串数据');
        Worker线程: onmessage = function(event){ event.data; }
        Worker线程给主渲染线程传递数据:
        主线程: var w2 = new Worker('x.js');
        w2.onmessage = function(event){ event.data; }
        Worker线程: postMessage( '字符串数据' );
  • Worker的应用场景
    • 应用于网络网页游戏
    • 配合Ajax实现更高级的异步请求
    • 实现类似于Ajax的"异步"
    • Ajax - 一定与服务器端有关
    • Worker - 可以不需要服务器端
打开App,阅读手记
1人推荐
发表评论
随时随地看视频慕课网APP