【chromium】Web Workers 、Shared workers、Service Workers & WebView

Web Worker

testweb Worker & shared Worker service worker

service worker & web workerservice worker demo Webview

android Webview 常用 API

使用 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

  



  
计数： 
0
  开始工作
  停止工作

  
注意： Internet Explorer 9 及更早 IE 版本浏览器不支持 Web Workers.

  

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

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库- Github

clone 下来 改一下main.cc 跑build.bat 的脚本编译即可实现windows 下 C++ 使用webview 库。 android WebViewWebview是一个嵌入式 的 浏览器控件，可以在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) 前进或者后退指定的位置，正数为前进/负数为后退