①在HTML5的新规范中,实现了 Web Worker 来引入 js 的 “多线程” 技术, 可以让我们在页面主运行的 js 线程中,加载运行另外单独的一个或者多个 js 线程,专门用来处理复杂运算;
②执行多种运算时,给每种运算开启单独的线程,线程计算完成后要及时关闭;
③web worker除了单纯进行计算外,还可以结合离屏canvas进行绘图,提升绘图的渲染性能和使用体验;
④离屏canvas的优势:
1、对于复杂的canvas绘图,可以避免阻塞主线程;
2、由于这种解耦,OffscreenCanvas的渲染与DOM完全分离了开来,并且比普通Canvas速度提升了一些;
⑤Web Worker的限制:
1、在 Worker 线程的运行环境中没有 window 全局对象,也无法访问 DOM 对象;
2、Worker中只能获取到部分浏览器提供的 API,如定时器、navigator、location、XMLHttpRequest等;
3、由于可以获取XMLHttpRequest对象,可以在 Worker 线程中执行ajax请求;
4、每个线程运行在完全独立的环境中,需要通过postMessage、message事件机制来实现的线程之间的通信;
⑥使用原则:运算时间超过50ms会造成页面卡顿,属于Long task,这种情况就可以考虑使用Web Worker,但还要先考虑通信时长的问题;
⑦最终标准:计算的运算时长 - 通信时长 > 50ms,推荐使用Web Worker;
(参考:mp.weixin.qq.com/s/3ClucFm7v…