zoukankan      html  css  js  c++  java
  • Web Worker简单工作原理

    JavaScript是单线程的。因此,持续时间较长的计算会阻塞UI线程,HTML5 Web Workers可以让Web应用程序具备后台处理能力。

    Web Workers的限制:

        Web Workers不能访问window.document。即不能直接访问Web页面和DOM API。

    用途:

    1. 执行一些后台数据处理
    2. 监听由后台服务器广播的新闻信息,收到后台服务器的消息后,将其显示在Web页面上。

    用到的数据:

    self对象: 指向全局worker对象

    importScripts() 用来加载Worker所用到的外部JavaScript文件

    close()方法 立即停止Worker运行

    使用案例:解析一个很大的JSON字符串,假设数据量很大,至少需要500ms才能解析完成。很明显时间太长,超出了客户端允许JS运行的时间,因此会干扰用户体验。而此任务很难分解成若干个使用定时器的小任务,因此Worker成为最理想的解决方案。

    页面JS脚本:

     1 //处理worker传过来的信息
     2 function messageHandler(e) {
     3     //在控制台输出数据
     4     console.log(e.data);
     5 }
     6 function errorHandler(e) {
     7     console.warn(e.message, e);
     8 }
     9 //终止worker运行
    10 function stopWorker() {
    11     worker.terminate();
    12 }
    13 function loadDome() {
    14     //检查是否存在Woker对象
    15     if(typeof Worker === 'undefined') {
    16         document.getElementById('support').innerHTML = 'no support web worker';
    17     }else {
    18         worker = new Worker('worker.js');
    19         worker.addEventListener('message', messageHandler, false);
    20         worker.addEventListener('error', errorHandler, false);
    21         
    22         //为post按钮添加事件
    23         document.getElementById('post').onclick = function() {
    24             worker.postMessage('Here is a message for you');
    25         }
    26         document.getElementById('stop').onclick = stopWorker;
    27     }
    28 }
    29 window.addEventListener('load', loadDome, false);
    30 worker.js文件:
    31 function messageHandler(e) {
    32     postMessage("Worker say: "+e.data+" too");
    33 }
    34 addEventListener('message', messageHandler, false);
  • 相关阅读:
    debian 9安装细节
    gnome环境设置
    Linux之crontab定时任务
    独显切换进入图形界面思路
    pycharm多行注释
    如何在cmd中运行.py文件
    如何在 PyCharm 中设置 Python 代码模板
    在R中使用Keras和TensorFlow构建深度学习模型
    kubernetes cert-manager installation
    Simple way to create a tunnel from one local port to another?
  • 原文地址:https://www.cnblogs.com/mackxu/p/2827981.html
Copyright © 2011-2022 走看看