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 ...
随机推荐
- Linux修改用户密码
1. root修改自己 # passwd 2. root修改别人 # passwd oracle //修改oracle的密码
- MyBatis框架的使用及源码分析(十) CacheExecutor,SimpleExecutor,BatchExecutor ,ReuseExecutor
Executor分成两大类,一类是CacheExecutor,另一类是普通Executor. 普通类又分为: ExecutorType.SIMPLE: 这个执行器类型不做特殊的事情.它为每个语句的执行 ...
- elasticsearch 创建索引,以及检索一条数据
elasticsearch的重要概念 我们可以把elasticsearch当做数据库来理解: index:索引库名称,相当于关系型数据库中的表名,一个elasticsearch集群中可以有多个索引库. ...
- ZOJ3229 Shoot the Bullet [未AC]
Time Limit: 2 Seconds Memory Limit: 32768 KB Special Judge Gensokyo is a world which exist ...
- 【Matlab】让Matlab程序发出声音
我有时候运行一段很长的代码,在等待的时候去做别的事,希望程序运行完可以有一个提示音. 这可以用matlab的一个函数sound实现,该函数的输入参量是音频数据向量.采样频率和转换位数. % 响一声 s ...
- python实战===图片转换为字符的源码(转)
#cmd执行命令为>>> python xx.py pic.png#-*- coding:utf-8 -*- from PIL import Image import argpars ...
- 【UOJ224】短路
具体可以看UOJmyy的blog,orz 就是一个贪心. #include<bits/stdc++.h> typedef long long ll; using namespace std ...
- MyBatis批量插入数据(MySql)
由于项目需要生成多条数据,并保存到数据库当中,在程序中封装了一个List集合对象,然后需要把该集合中的实体插入到数据库中,项目使用了Spring+MyBatis,所以打算使用MyBatis批量插入,应 ...
- sublime view_in_browser
今天安装了sublime的插件view in browser,发现ctrl+alt+V用不了,在preferences看了view in browser的配置,发现browser不是我电脑上的默认浏览 ...
- elasticsearch批量删除(查询删除)
注:delete by query只适用于低于elasticsearch2.0的版本(不包含2.0).有两种形式: 1.无请求体 curl -XDELETE 'localhost:9200/twitt ...