利用web workers实现多线程处理
利用web workers在后台线程中实现对数据库的增删改查操作,并在后台线程中生成页面上某个列表的完整的HTML代码,然后再前台脚本中直接将这段HTML代码输出到页面上!
利用web workers可以实现无刷新的更新界面,而且还可以多线程处理其它功能,不必等到后台服务器代码执行完后才能在页面上执行下一步操作。有人会问AJAX也可以实现无刷新更新页面,但是如果在后台服务器端执行代码耗时较长,页面就会停止在不能操作的状态,如果拖过页面,可能会造成页面假死的状态。
利用web workers API创建后台线程:
1.将后台执行的脚本文件的URL地址作为worker的参数,在后台线程中不能访问页面或窗口对象。如果在后台程序中包含window或是document对象,就会引发错误。
var worker=new worker("worker.js");
2.在后台线程中接收消息,利用worker对象的onmessage事件句柄获取消息;
worker.onmessage=function(event)
{ //处理收到的消息 }
3.利用worker对象的postmessage方法想后台线程发送消息;发送消息是文本数据,也可以是任何的JavaScript对象(需要通过JSON对象的stringify方法将其转换成文本数据)
worker.postMessage(message);
下面讲述一个实例,更好的阐述web workers的实现过程:
1.前端页面上的JavaScript脚本
function windowOnLoad()
{
var worker=new worker("bgwork.js");//其中bgwork.js为后台线程运行的脚本文件
worker.postMessage("load");//post为发送消息的文本数据 或是 data=new object(); worker.postMessage(JSON.stringify(data));//post为发送消息的文本数据
worker.onmessage=function(event)
{
if(event.data=="数据库连接发生错误!"||event.data=="读取数据失败!")
{
alert(event.data);
}
else
{
//处理返回回来的数据
}
}
}
2.在后台线程中运行的JavaScript脚本
onmessage=function(event){ if(event.data=="load") { var xhr=new XMLHtttpRequest(); xhr.open("post","ceshi.aspx?type=load");//ceshi.aspx该页面为新建页面,专门处理前端数据传过来后向数据库的增删改查功能; xhr.onreadystatechange= function(){ var result=xhr.responseText; if(xhr.readyState==4) { if(result=="数据库连接发生错误!"||event.data=="读取数据失败!") postMessage(result); else { string str="";//处理经过服务端处理过的数据,然后返回前端 postMessage(str); } } } xhr.send(null); } }
3.在ceshi.aspx页面处理数据
protected void Page_Load(object sender,EventArgs)
{
string type=Request.QueryString["type"].ToString();
if(type.Equals("load"))
{ string result="";
using(MemoryStream stream=new MemoryStream())
{
//处理数据
ArrayList dataArray=new ArrayList=new ArrayList();
SerializeArray.WriteObject(stream,dataArray);
result=Encoding.UTF8.GetString(stream.ToArray());
this.WirteReturnStr(result);
} }
}
利用web workers实现多线程处理的更多相关文章
- JavaScript是如何工作的:Web Workers的构建块 + 5个使用他们的场景
摘要: 理解Web Workers. 原文:JavaScript是如何工作的:Web Workers的构建块 + 5个使用他们的场景 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这 ...
- WijmoJS 使用Web Workers技术,让前端 PDF 导出效率更高效
概述 Web Workers是一种Web标准技术,允许在后台线程中执行脚本处理. WijmoJS 的2018v3版本引入了Web Workers技术,以便在生成PDF时提高应用程序的运行速度. 一般来 ...
- [翻译]Review——How JavaScript works:The building blocks of Web Workers
原文地址:https://blog.sessionstack.com/how-javascript-works-the-building-blocks-of-web-workers-5-cases-w ...
- (92)Wangdao.com_第二十五天_线程机制_H5 Web Workers 分线程任务_事件 Event
浏览器内核 支撑浏览器运行的最核心的程序 IE 浏览器内核 Trident内核,也是俗称的IE内核Chrome 浏览器内核 统称为 Chromium 内核或 ...
- HTML5中的Web Workers
https://www.cnblogs.com/yanan-boke/p/6954390.html https://segmentfault.com/a/1190000014938305 HTML5 ...
- [书籍翻译] 《JavaScript并发编程》第五章 使用Web Workers
本文是我翻译<JavaScript Concurrency>书籍的第五章 使用Web Workers,该书主要以Promises.Generator.Web workers等技术来讲解Ja ...
- JavaScript 工作原理之七-Web Workers 分类及 5 个使用场景
Web Workers 分类及 5 个使用场景 原文请查阅这里,略有删减,本文采用知识共享署名 4.0 国际许可协议共享,BY Troland. 这是 JavaScript 工作原理的第七章. 本系列 ...
- Web Workers
在 Web Workers 中使用 postMessage 和 onmessage 首先,需要在客户端页面的 JavaScript 代码中 new 一个 Worker 实例出来,参数是需要在另一个线程 ...
- html5 Web Workers
虽然在JavaScript中有setInterval和setTimeout函数使javaScript看起来好像使多线程执行,单实际上JavaScript使单线程的,一次只能做一件事情(关于JavaSc ...
随机推荐
- numpy 和 pandas 中常用的一些函数及其参数
numpy中有一些常用的用来产生随机数的函数,randn()和rand()就属于这其中. numpy.random.randn(d0, d1, …, dn)是从标准正态分布中返回一个或多个样本值. ...
- 洛谷OJ P2846 LJJ的数学课
题目链接:传送门 题目大意:略 题目思路:线段树or树状数组 我们可以将区间值做一些调整.a*3+b*2+c=a+(a+b)+(a+b+c) 也就是利用前缀和建树.然后单点更新也就转换成了区间更新.修 ...
- python中的 try...except...finally 的用法
python中的 try...except...finally 的用法 author:headsen chen date:2018-04-09 16:22:11 try, except, final ...
- 记录--jquery 获取父级、子级、兄弟元素 + 实例
需求如下: 三条数据,需点击其中一条数据在其下面展示与此数据关联的图片.主要功能可能是在点击的数据下增加显示行 思路: 把需要点击增加的数据先隐藏.点击后再将其显示出来. 知识点: jQuery.pa ...
- c#学习笔记之使用 TableLayoutPanel 控件设置窗体布局
使用 TableLayoutPanel 控件设置窗体布局 在 Visual Studio IDE 左侧,找到“工具箱”选项卡. 选择“工具箱”选项卡,随即将显示工具箱.(或者,在菜单栏上,依次选择“视 ...
- 巨蟒python全栈开发-第5天 字典&集合
今日大纲: 1.什么是字典 字典是以key:value的形式来保存数据,用{}表示. 存储的是key:value 2.字典的增删改查(重点) (1) 添加 dic[新key] = 值 setdefau ...
- powershell Start-Sleep
秒: Start-Sleep –s 10 ,毫秒) Start-Sleep –m 10000 语法 Start-Sleep [-seconds] <int> [<CommonPara ...
- Spring - Netty (整合)
写在前面 大家好,我是作者尼恩.目前和几个小伙伴一起,组织了一个高并发的实战社群[疯狂创客圈].正在开始 高并发.亿级流程的 IM 聊天程序 学习和实战,此文是: 疯狂创客圈 Java ...
- Storm-源码分析汇总
Storm Features Storm 简介 Storm Topology的并发度 Storm - Guaranteeing message processing Storm - Transacti ...
- 分布式计算hadoop三大组件
设计原则:移动计算,而不是移动数据 计算层:Map/Reduce调度层:YARN数据层:HDFS 这三层之间没有必然的依赖性,只是经常这么搭配,而且都是hadoop那个包里一起安装的,三层都可以独立运 ...