标签：art term ons wim 法律 oda 不同的 meta 客户端
https://www.cnblogs.com/yanan-boke/p/6954390.html
https://segmentfault.com/a/1190000014938305
传统上的线程可以解释为轻量级进程，它和进程一样拥有独立的执行控制，一般情况下由操作系统负责调度。而在 HTML5 中的多线程是这样一种机制，它允许在 Web 程序中并发执行多个 JavaScript 脚本，每个脚本执行流都称为一个线程，彼此间互相独立，并且由浏览器中的 JavaScript 引擎负责管理。下面我们将详细讲解 HTML5 的工作线程原理。
Web Workers 是浏览器内置的线程所以可以被用来执行非阻塞事件循环的 JavaScript 代码。
在 HTML5 中引入的工作线程使得浏览器端的 JavaScript 引擎可以并发地执行 JavaScript 代码，从而实现了对浏览器端多线程编程的良好支持。将可能耗费较长时间的处理交给后台执行，则对用户在前台页面中执行的操作没有影响。
HTML5 中的 Web Worker 可以分为两种不同线程类型，一个是专用线程 Dedicated Worker，一个是共享线程 Shared Worker。两种类型的线程各有不同的用途。
应用场景一：使用工作线程做后台数值复杂（算法）计算
应用场景二：使用共享线程处理多用户并发连接
应用场景三：高频的用户交互
应用场景四：监听由后台服务器广播的消息
//worker.js
onmessage =function (evt){
var d = evt.data;//通过evt.data获得发送来的数据
postMessage( d );//将获取到的数据发送会主线程
}
HTML页面：test.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript">
//WEB页主线程
var worker =new Worker("worker.js"); //创建一个Worker对象并向它传递将在新线程中执行的脚本的URL
worker.postMessage("hello world"); //向worker发送数据
worker.onmessage =function(evt){ //接收worker传过来的数据函数
console.log(evt.data); //输出worker发送来的数据
}
</script>
</head>
<body></body>
</html>
WEB主线程:
1.通过 worker = new Worker( url ) 加载一个JS文件来创建一个worker，同时返回一个worker实例。
2.通过worker.postMessage( data ) 方法来向worker发送数据。
3.绑定worker.onmessage方法来接收worker发送过来的数据。
4.可以使用 worker.terminate() 来终止一个worker的执行。
worker新线程：
1.通过postMessage( data ) 方法来向主线程发送数据。
2.绑定onmessage方法来接收主线程发送过来的数据。
加载一个JavaScript文件，进行大量的复杂计算，而不挂起主进程，并通过postMessage和onMessage进行通信。
可以在WoOer（worker）中通过importScripts（url）方法加载另外的JavaScript脚本文件。
可以使用setTimeout（）、clearTimeout（）、setInterval（）和clearInterval（）。
可以使用XMLHttpRequest进行异步请求。
可以访问navigator的部分属性。
可以使用JavaScript核心对象。
监听由后台服务器广播的消息。
1.不能跨域加载JS
2.worker内代码不能访问DOM（）、window 对象、document 对象、parent 对象
3.各个浏览器对Worker的实现不大一致，例如FF里允许worker中创建新的worker,而Chrome中就不行
4.不是每个浏览器都支持这个新特性
•navgator : ppVersion、userAgent、platform
•location : 所有属appName、a性都是只读的
•self : 指向全局 worker 对象
•所有的ECMA对象，Object、Array、Date等
•XMLHttpRequest构造器
•setTimeout和setInterval方法
•close()方法，立刻停止worker运行
•importScripts方法
迄今为止，我们列举了 Web Workers 的长处及其限制。让我们看看他们的最佳使用场景：
这里需要注意的是在现代浏览器已经不支持同步接口了，具体可查看这里。
实际工作过程会遇到用户需要通过解析远程图片来获得图片 base64 的案例，那么这时候，如果图片非常大，就会造成 canvas 的 toDataURL 操作相当的耗时，从而阻塞页面的渲染。
所以解决思路即把这里的处理图片的操作交由 worker 来处理。以下贴出主要的代码：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Canvas to base64</title>
</head>
<body>
<script>
function loadImageAsync(url) {
if (typeof url !== ‘string‘) {
return Promise.reject(new TypeError(‘must specify a string‘));
}
return new Promise(function(resolve, reject) {
const image = new Image();
// 允许 canvas 跨域加载图片
image.crossOrigin="anonymous";
image.onload = function() {
const $canvas = document.createElement(‘canvas‘);
const ctx = $canvas.getContext(‘2d‘);
const width = this.width;
const height = this.height;
let imageData;
$canvas.width = width;
$canvas.height = height;
ctx.drawImage(image, 0, 0, width, height);
imageData = ctx.getImageData(0, 0, $canvas.width, $canvas.height);
resolve({image, imageData});
};
image.onerror = function() {
reject(new Error(‘Could not load image at ‘ + url));
};
image.src = url;
});
}
function blobToDataURL(blob) {
return new Promise((fulfill, reject) => {
let reader = new FileReader();
reader.onerror = reject;
reader.onload = (e) => fulfill(reader.result);
reader.readAsDataURL(blob);
})
}
document.addEventListener("DOMContentLoaded", function () {
loadImageAsync(‘https://cdn-images-1.medium.com/max/1600/1*4lHHyfEhVB0LnQ3HlhSs8g.png‘)
.then(function (image) {
// jpeg-web-worker.js https://github.com/kentmw/jpeg-web-worker
const worker = new Worker(‘jpeg-web-worker.js‘);
worker.postMessage({
image: image.imageData,
quality: 50
});
worker.onmessage = function(e) {
// e.data is the imageData of the jpeg. {data: U8IntArray, height: int, width: int}
// you can still convert the jpeg imageData into a blog like this:
const blob = new Blob( [e.data.data], {type: ‘image/png‘} );
blobToDataURL(blob).then((imageURL) => {
console.log(‘imageUrl:‘, imageURL);
})
}
})
.catch(function (err) {
console.log(‘Error：‘, err.message);
});
});
</script>
</body>
</html>以上是通过 canvas 来获取图片数据，那么是否有其它方法呢？肯定有的啦，动下脑筋吧少年。
标签：art term ons wim 法律 oda 不同的 meta 客户端
原文地址：https://www.cnblogs.com/leftJS/p/11038879.html
