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>
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 等等也有很大的不同。
- 主要用于：
- 数据 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
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw-test/sw.js', { scope: '/sw-test/' }).then(function(reg) {
console.log('Registration succeeded. Scope is ' + reg.scope);
}).catch(function(error) {
console.log('Registration failed with ' + error);
});
}
Webview
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) 前进或者后退指定的位置，正数为前进/负数为后退
|