【chromium】Web Workers 、Shared workers、Service Workers & WebView && dedicatedWorke与sharedWorker 实例

文章目录

      • 实例
      • Web Worker
          • test
          • web Worker & shared Worker
      • service worker
          • service worker & web worker
          • service worker demo
      • Webview
          • android Webview 常用 API

实例

dedicatedWorke与sharedWorker 实例

Web Worker

  • 使用 Web Workers

  • Web worker 是运行在后台的 JavaScript,不会影响页面的性能。

  • 是H5 提供的 js 分线程的实现。(模拟多线程)

    • 分配给web Worker的脚本文件,必须与主线程的脚本文件同源。
    • 相关 API:
      • Worker:构造函数。
        • 通过调用 Worker("path/to/worker/script") 构造函数来创建工作线程.
        • Worker 是 Web Workers API 的接口,表示通过脚本创建的后台任务,该脚本可以将消息发送回其创建者。
      • Worker.prototype.onmessage : 接收另一个线程的回调函数即注册了一个接收postMessage 的回调
        • post 过来的是个event ,数据在 event.data
      • Worker.prototype.postMessage:向另一个线程发送数据。
      • WmyWorker.terminate(); 终止Worker,close(); 自己关闭。
  • Js是单线程,使用“异步(非阻塞)”的方式做一些网络请求等耗时的任务。

    • 可以利用在WebWorker主线程之外再创建一个线程,完成其他任务。
      • 子线程因为是模拟的多线程,所以功能受限, 无法操作DOM ,产生alert 之类的。
      • 同时也不能 跨域加载JS。
    • 常用于解析文本、复杂的运算、流媒体等操作。
test
  • web worker 不能通过文件协议启动。
  • 要想使Vscode通过服务器打开html文件,走http协议,需要下载Live Server插件,然后右键Open with Live Server 即可。

https://www.mifengjc.com/html/html5-webworkers.html

DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
head>
<body>

  <p>计数: <output id="result">0output>p>
  <button onclick="startWorker()">开始工作button>
  <button onclick="stopWorker()">停止工作button>

  <p><strong>注意:strong> Internet Explorer 9 及更早 IE 版本浏览器不支持 Web Workers.p>

  <script>
    var w;

    function startWorker() {
      if (typeof(Worker) !== "undefined") {
        if (typeof(w) == "undefined") {
          w = new Worker('worker.js')
          console.log('new Worker');
        }
        w.onmessage = function(event) {
          document.getElementById("result").innerHTML = event.data;
        };
      } else {
        document.getElementById("result").innerHTML = "抱歉,你的浏览器不支持 Web Workers...";
      }
    }

    function stopWorker() {
      w.terminate();
      w = undefined;
    }
  script>

body>
html>
// worker.js
var i = 0;
this.onmessage = function(e){
    i=e.data;
    console.log('int changed')
}
function timedCount() {
  i = i + 1;
  postMessage(i);
  setTimeout("timedCount()", 500);
}
timedCount();
web Worker & shared Worker
  • var myWorker = new Worker('worker.js'); 专用。var myWorker = new SharedWorker('worker.js'); 共享。
  • 一个专用worker仅仅能被首次生成它的脚本使用,而共享worker可以同时被多个脚本使用
  • 与一个共享worker通信必须通过端口对象 —— 一个 确切的打开的端口port 供脚本与worker通信(在专用worker中这一部分是隐式进行的)。
  • SharedWorker 是可以从多个浏览上下文(例如,多个窗口,iframe,甚至工作线程)访问的工作线程。它们实现的接口不同于专用工作线程,并且具有不同的全局范围 SharedWorkerGlobalScope
    • 如果可以从多个浏览上下文访问 SharedWorker,则所有这些浏览上下文必须共享完全相同的来源(相同的协议,主机和端口)。
    • 可以用于在不同browser instance 之间通信。

service worker

Using_Service_Workers

  • Service Worker 不是服务于某个特定页面的,而是服务于多个页面的。(按照同源策略)
    • Service Worker 会常驻在浏览器中,即便注册它的页面已经关闭,Service Worker 也不会停止。本质上它是一个后台线程,只有你主动终结,或者浏览器回收,这个线程才会结束。
      • 负责监听和响应浏览器的事件。(注册监听,回调响应)crook
        • 如服务器推向浏览器的通知、fetch http请求(如图像)。
    • 生命周期、可调用的 API 等等也有很大的不同。
      • 它能做什么,全看跟哪些 API 搭配使用。
  • 主要用于:
    • 数据 Mock:跟 Fetch 搭配,从浏览器层面拦截请求。
    • 离线应用与缓存:Fetch 和 CacheStorage 搭(捕获Fetch,有缓存就走缓存,没缓存再走Fetch并缓存)。
service worker & web worker
  • Service Worker 与 Web Worker 相比,相同点是:它们都是在常规的 JS 引擎线程以外开辟了新的 JS 线程。
  • Service Worker 相当于浏览器进程,而 web worker 相当于浏览器内核线程。
    • service worker 不会因为页面销毁而销毁、可以多页面使用、只能被使用在 https 或本地localhost下。
service worker demo

https://github.com/mdn/sw-test – 使用 Service Workers

  • 保证浏览器支持 serviceWorker
  • 注册 service worker
    • scope 指定service worker 控制的内容的子目录。
    • .then() 函数链式调用我们的 promise,当 promise resolve 的时候,里面的代码就会执行。
    • 链一个.catch()函数,当 promise rejected 才会执行。
  • 这就注册了一个 service worker,它工作在 worker context,所以没有访问 DOM 的权限。在正常的页面之外运行 service worker 的代码来控制它们的加载。
  • 随后在sw.js 做拦截FetchCacheStorage 等操作之类的就好。一个例子:mdn/sw-test
//app.js
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw-test/sw.js', { scope: '/sw-test/' }).then(function(reg) {
    // registration worked
    console.log('Registration succeeded. Scope is ' + reg.scope);
  }).catch(function(error) {
    // registration failed
    console.log('Registration failed with ' + error);
  });
}

Webview

  • 跨平台webview库- Github
    • clone 下来 改一下main.cc 跑build.bat 的脚本编译即可实现windows 下 C++ 使用webview 库。
  • android WebView
  • Webview是一个嵌入式 的 浏览器控件,可以在app 中嵌入显示web,继承自View。
android Webview 常用 API
  • 加载:

    • loadUrl(string url) 加载url,本地 or 网络资源。
    • loadData(String data, String mimeType, String encoding) 加载html片段
  • 状态

    • onResume() 当webView为活跃状态的时候回调此方法(获取焦点)
    • onPause() 切换到后台的时候回调此方法(失去焦点)
    • destroy() 销毁WebView
  • 网页操作

    • canGoBack() 是否可以后退
    • goBack() 回退
    • canGoForward() 是否可以前进
    • goForward() 前进网页
    • goBackOrForward(intsteps) 前进或者后退指定的位置,正数为前进/负数为后退

你可能感兴趣的:(chromium,前端,webview,javascript,web,worker,Service,Woker)