(原)Html5之WebWorker Api详解(网页中多线程) - rainsilence - ITeye博客

`

rainsilence

浏览: 160565 次
性别:
来自: 上海

最近访客更多访客>>

zhang55090

iop118

cjh326419411

finit

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

社区版块

存档分类

最新评论

sys234： [u][/u]
Jquery的each循环和原生循环及html5foreach循环的效率比较
sscsacdsadcsd：挺诡异的 promise/A为什么能写的这么多出来
HTML5之IndexedDB使用详解
zhanzhonggang： if (db.version != "1 ...
HTML5之IndexedDB使用详解
rainsilence： glchen 写道yaolifei 写道你好，请教几个问题：c ...
NodeJs中的非阻塞方法
glchen： yaolifei 写道你好，请教几个问题：createServ ...
NodeJs中的非阻塞方法

(原)Html5之WebWorker Api详解(网页中多线程)

多线程 HTML5 json JavaScript HTML

阅读更多

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	window.onload = function() {
		var worker = new Worker("render-task.js");

		worker.onmessage = function(event) {
			alert(eval(event.data).result);
		};

		worker.postMessage('({content: "Test", command: ' + writeMessage + '})');		
		
	};
	
	function writeMessage() {

		var count = 0;
		
		while(count <= 9999999) {
			count++;
		}
		
		count++;
		return count; 
	}
</script>

</head>
<body>

</body>
</html>

接下来插入线程文件:

onmessage = function(event) {
	
	var message = eval(event.data);
	
	message.text = "Response";
	var result = message.command();
	postMessage('({text: "Response", result:' + result + '})');
	
};

根据测试:

1:线程文件中不可以使用document等BOM

2:线程文件中不可以使用调用地点的外部变量。

3:线程文件中可以调用调用地点的函数。但是必须通过json传递过来

4:线程文件中不可以有挂起的操作命令(alert等)

基本的数据调用传递流程

work.postMessage->线程的onmessage被触发

线程的onmessage文件内调用postMessage->work.onmessage被触发

分享到：

(原)仿Http服务器下载响应 | 优化HTML

2010-07-25 22:18
浏览 5922
评论(0)
分类:Web前端
查看更多

评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

HTML5 api 调用示例: HTML5 API调用示例是现代网页开发中的关键部分，它极大地扩展了Web应用程序的功能，使其可以实现更多原生应用的特性。W3C（万维网联盟）是定义HTML5标准的权威组织，它的API规范为开发者提供了丰富的工具集，以创建...

HTML 5基础之HTML 5 API的威力: Web Worker API允许开发者在后台线程中执行JavaScript代码，从而不会阻塞UI线程。这对于处理复杂的计算任务或长时间运行的任务尤其有用，因为它们不会影响到用户界面的响应速度。 ##### 5.2 Web Worker API原理 - *...

HTML5中新支持的多线程API实现手工制定异步任务无需浏览器等待: 总的来说，HTML5的Web Workers API是提升Web应用性能的重要工具，它允许开发者利用多线程技术来优化JavaScript的执行，尤其是对于处理大量数据和复杂计算的场景，Web Workers能显著提升用户体验。同时，虽然有一些...

HTML5开发精要与实例详解: HTML5是下一代超文本标记语言，它在2014年被正式确立为W3C标准，极大地丰富了网页内容的展示方式，提高了用户体验，并且提供了更多与客户端交互的可能性。"HTML5开发精要与实例详解"这本书很可能包含了以下几个方面...

疯狂HTML 5+CSS 3+JavaScript讲义（第2版）+源代码: 第18章　Web Worker多线程API 588 18.1　使用Worker创建多线程 589 18.2　与Worker线程进行数据交换 591 18.3　Worker线程嵌套 594 18.4　使用SharedWorker创建共享线程 597 18.5　Promise 603 18.6　本章小结 611 ...

html54stock 开放源碼的HTML5股票工具: 3. **Web Worker**: Web Worker允许在后台线程执行复杂的计算任务，不阻塞用户界面。虽然"HTML54stock"未直接使用Web Worker，但在处理大量股票数据时，可以考虑引入此技术优化性能。三、JavaScript库的应用 1. *...

网页版HTML5愤怒的小鸟在线效果: 6. **音频API**：HTML5的Audio API允许开发者在网页中播放和控制音频，这对于游戏音效非常重要。愤怒的小鸟中的背景音乐和游戏音效很可能就是通过这个API实现的。 7. **Web Workers**：HTML5的Web Workers可以在...

Pro HTML5 Programming: 5. **Web Workers 和 Web Sockets**：这两项技术分别解决了Web应用的多线程处理能力和实时双向通信需求。Web Workers允许在后台独立于主线程执行脚本，从而避免了阻塞UI；而Web Sockets则提供了一个全双工的通信通道...

html5考试题.pdf: 18. Web Workers：Web Worker只能通过`terminate()`中止，不能修改HTML元素、全局变量和Window.Location，它是JavaScript多线程解决方案。 19. 应用缓存：CACHE命令指定缓存文件，FALLBACK用于回退策略，NETWORK...

超炫效果Html5页面源码: 4. **Web Workers**：这是一个让网页应用实现多线程处理的技术，可以在后台执行计算密集型任务，而不会影响用户界面的响应速度。通过创建worker对象，开发者可以分配计算任务，提高网页性能。 5. **Geolocation定位...

html 5 问题: 【标题】：“HTML5技术详解及其在现代网页开发中的应用” 【描述】：“HTML5作为网页制作的新一代标准，其重要性和影响力不言而喻。本文将深入探讨HTML5的关键特性，以及它如何改变了Web开发的格局。” 【标签】：...

从入门到精通HTML5——PDF——网盘链接: 　12.1.3 HTML 5语法中的3个要点 227 　12.1.4 标签实例 228 　12.2 新增的元素和废除的元素 228 　12.2.1 新增的结构元素 228 　12.2.2 新增的块级的语义元素 230 　12.2.3 新增的行内的语义元素 231 　12.2.4 新增...

dive into html5: - **API**：通过创建`Worker`对象启动新线程。 8. **SVG支持**： - **定义**：可缩放矢量图形（Scalable Vector Graphics），用于绘制高质量的矢量图形。 - **用途**：创建动态图表、图标等。 - **集成**：可以...

H656_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码.zip: 7. **Web Workers**：在后台线程中运行脚本，避免阻塞主线程，提高网页性能。【响应式设计与自适应布局】响应式设计是一种网页设计方法，使网站能够根据用户使用的设备（如手机、平板电脑或桌面电脑）的屏幕尺寸...

大气宽屏商务公司网站模板是一款适合设计商务公司HTML5网站模板下载。.zip: HTML5是超文本标记语言（HyperText Markup Language）的第五次重大修订，自2014年被W3C正式推荐为标准以来，它已经成为现代网页开发的核心技术之一。HTML5旨在增强网页的交互性和多媒体支持，简化开发过程，并提高...

咖啡蛋糕店加盟网站模板是一款HTML5休闲类网站模板下载。.zip: 【HTML5技术详解】 HTML5是超文本标记语言（HyperText Markup Language）的第五次重大修订，它在原有的HTML4基础上引入了许多新的功能和改进，旨在提升网页的交互性、可访问性和可用性。HTML5的核心目标是创建一个...

Android教程之用_HTML_5_构建_Web_应用程序(一): ### Android教程之用HTML5构建Web应用程序(一)——核心知识点详解 #### 一、引言与背景在数字化时代，跨平台应用的开发变得日益重要。随着HTML5的兴起，开发者可以利用这一强大标准来创建高效且兼容广泛的Web应用...

粉红色宽屏自适应html5模板5604.zip: 7. **Web Workers和WebSockets**：Web Workers允许在后台执行多线程任务，提高性能；而WebSockets则提供了双向实时通信协议，适用于实时应用如聊天室或在线游戏。 8. **Geolocation API**：允许网页获取用户的地理...

Global site tag (gtag.js) - Google Analytics