web worker 实践
1.web worker
在浏览器中JavaScript主线程与UI渲染线程是互斥的。即UI渲染线程会阻塞JavaScript线程的运行。
web worker允许创建工作线程,并可以与JavaScript主线程同时运行,可以让一些占用大量计算资源的计算在worker线程上运行。
worker线程的出现是为了,大量的计算占用javascript 主线程,导致 DOM操作阻塞。worker 线程一旦新建成功,就会一直运行,有利于随时响应主线程的通信,但这也会造成worker 线程比较消耗资源,所以在使用完成时,应该立即结束 worker 线程。
出于安全和性能的考虑,worker 线程的运行有一下限制:
(1)同源限制
分配给worker线程,运行的脚本文件,必须与主线程脚本文件同源。
(2)DOM 操作限制
worker 的执行上下文是一个最小化的运行环境,没有 DOM,window ,parent 等全局对象,只有最小化的 navigator,和只读的 location对象。
(3)通信联系
由于worker 与主线程的执行上下文不同,所以worker 线程与主线程之间的通信,只能通过 postMessage 来完成。
(4)脚本限制
worker线程不能执行 alter(),confirm(),方法,但是可以使用 XMLHttpRequert 对象发出 Ajax 请求。
(5)文件限制
worker 线程无法读取本地文件,它所加载的脚本必须来自网络,即不能打开本地文件系统(file://)。<1>由于 worker 需要一个 js文件来创建线程,而es6 中的模块无法直接引入一个js文件,所以在现在的 单页面应用中需要创建 worker 线程需要,引入 worker-loader 插件。worker-loader 加载js文件 来创建 worker。<2>由于worke线程中使用的文件必须来自网络,所以在 worker 线程中引入脚本或者库,需要 通过 importSript()来加载对应的脚本或者库。但是 webpack 打包后的应用模块,成为了一个个 chunk ,是无法通过对应的路径加载到对应的模块的,这时在应用来我worker-loader 的情况下,可以通过 require()或者 import 来加载对应的库,而不是通过 importScript().
javaScript 允许主线程把二进制直接转移给子线程,但是一旦转移,主线程就无法使用这些二进制数据,这是为了防止不同线程同时修改数据会造成数据不一致性问题。
//主线程与worker线程之间的通信
//worker 可以利用XMLHttpRequest加载文件, var worker = new worker('js/worker.js');
worker.postMessage(args);
worker.onmessage = function(event){
document.getElementById('result').textContent = event.data;};
worker.terminate() // 结束 worker线程 //workerjs
onmessage = function(e){
var calcuResult = e.data;
for(var i=0;i<1000;i++)
calcuResult+=i;
}
postMessage(calcuResult);
web worker 实践的更多相关文章
- 前端web worker实践与总结
参考链接:https://www.jianshu.com/p/97f6144dfddf
- 深入HTML5 Web Worker应用实践:多线程编程
HTML5 中工作线程(Web Worker)简介 至 2008 年 W3C 制定出第一个 HTML5 草案开始,HTML5 承载了越来越多崭新的特性和功能.它不但强化了 Web 系统或网页的表现性能 ...
- 深入 HTML5 Web Worker 应用实践:多线程编程
深入 HTML5 Web Worker 应用实践:多线程编程 HTML5 中工作线程(Web Worker)简介 至 2008 年 W3C 制定出第一个 HTML5 草案开始,HTML5 承载了越来越 ...
- 通过一次实验来了解HTML5的 Web Worker
web worker 是运行在后台的 JavaScript,不会影响页面的性能. 当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成. web worker 是运行在后台的 Ja ...
- 【转向Javascript系列】深入理解Web Worker
本文首发在alloyteam团队博客,链接地址http://www.alloyteam.com/2015/11/deep-in-web-worker/ 上一篇文章<从setTimeout说事件循 ...
- 前端每周清单第 49 期:Webpack 4 Beta 尝鲜,React Windowing 与 setState 分析,Web Worker 实战
前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点:分为新闻热点.开发教程.工程实践.深度阅读.开源项目.巅峰人生等栏目.欢迎关注[前端之巅]微信公众号(ID: fron ...
- 使用Actor模型管理Web Worker多线程
前端固有的编程思维是单线程,比如JavaScript语言的单线程.浏览器JS线程与UI线程互斥等等,Web Woker是HTML5新增的能力,为前端带来多线程能力.这篇文章简单记录一下搜狗地图WebG ...
- JavaScript多线程之HTML5 Web Worker
在博主的前些文章Promise的前世今生和妙用技巧和JavaScript单线程和浏览器事件循环简述中都曾提到了HTML5 Web Worker这一个概念.在JavaScript单线程和浏览器事件循环简 ...
- Web Worker javascript多线程编程(一)
什么是Web Worker? web worker 是运行在后台的 JavaScript,不占用浏览器自身线程,独立于其他脚本,可以提高应用的总体性能,并且提升用户体验. 一般来说Javascript ...
随机推荐
- 使用python脚本配置zabbix发送报警邮件
#前提得在zabbix_server配置文件中配置触发脚本的目录,例如,我配置的在/usr/local/zabbix/server/scripts目录下 编写python脚本如下 因为我的服务器在腾讯 ...
- SVG 基本绘图方法总结
基本内容: * SVG并不属于HTML5专有内容 * HTML5提供有关SVG原生的内容 * 在HTML5出现之前,就有SVG内容 * SVG,简单来说就是矢量图 * SVG文件 ...
- 【poj2464】树状数组
这道题..太特么多细节了.. 题意:在平面直角坐标系中给你N个点,stan和ollie玩一个游戏,首先stan在竖直方向上画一条直线,该直线必须要过其中的某个点,然后ollie在水平方向上画一条直线, ...
- PHP 练习1:新闻发布
1.新闻发布主页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
- MSSQL数据库 "无法删除数据库 "***",因为该数据库当前正在使用" 解决方案
--1 创建数据库 create database AAA --2 使用数据库 use AAA --3 在AAA数据库下创建table create table BBB ( bId ,) primar ...
- hdu 1272 小希的迷宫(并查集+最小生成树+队列)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1272 小希的迷宫 Time Limit: 2000/1000 MS (Java/Others) ...
- SqlServer存储过程中使用事务,示例
create proc pro_GetProTrans @GoodsId int, @Number int, @StockPrice money, @SupplierId int, @EmpId in ...
- C#多线程编程之:集合类中Synchronized方法与SyncRoot属性原理分析
我们知道,在.net的一些集合类型中,譬如Hashtable和ArrayList,都有Synchronized静态方法和SyncRoot属性,他们之间有联系吗?我怎么才能用好他们呢? 以Hashtab ...
- JVM字节码执行引擎和动态绑定原理
1.执行引擎 所有Java虚拟机的执行引擎都是一致的: 输入的是字节码文件,处理过程就是解析过程,最后输出执行结果. 在整个过程不同的数据在不同的结构中进行处理. 2.栈帧 jvm进行方法调用和方法执 ...
- FS Shell命令
HDFS命令基本格式 hadoop fs -cmd args hdfs dfs -cmd args cat hadoop fs -cat URI [URI .....] 将路径指定文件的内容输出到st ...