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

怎么这么帅啊

已于 2022-07-15 11:07:57 修改

阅读量4.9k

点赞数 1

分类专栏： chromium 文章标签：前端 webview javascript web worker Service Woker

于 2022-03-15 18:11:03 首次发布

本文链接：https://blog.csdn.net/weixin_44503157/article/details/123497958

版权

chromium 专栏收录该内容

11 篇文章 4 订阅

订阅专栏

文章目录

实例

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">0</output></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 做拦截Fetch 、CacheStorage 等操作之类的就好。一个例子：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) 前进或者后退指定的位置，正数为前进/负数为后退

怎么这么帅啊

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【chromium】Web Workers 、Shared workers、Service Workers & WebView && dedicatedWorke与sharedWorker 实例

【chromium】Web Workers 、Shared workers、Service Workers & WebView
复制链接

扫一扫

专栏目录