Open RainZhai opened 7 years ago
web worker (https://www.w3.org/TR/workers/) 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。 test.html如下:
<!DOCTYPE html>
<html>
<body>
<p>计数: <output id="result"></output></p>
<button onclick="startWorker()">开始 Worker</button>
<button onclick="stopWorker()">停止 Worker</button>
<script>
var w;
function startWorker(){
if(typeof(Worker)!=="undefined"){
if(typeof(w)=="undefined"){
w=new Worker("/example/html5/demo_workers.js");
}
w.onmessage = function (event) {
document.getElementById("result").innerHTML=event.data;
};
}else{
document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers...";
}
}
function stopWorker(){
w.terminate();
}
</script>
</body>
</html>
demo_workers.js:
var i=0;
function timedCount(){
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
Service Worker (https://www.w3.org/TR/service-workers/) 是基于Web Worker的事件驱动的,他们执行的机制都是新开一个线程去处理一些额外的,以前不能直接处理的任务。 https://www.w3ctech.com/topic/866 http://imweb.io/topic/56592b8a823633e31839fc01
HTML5核心内容介绍
HTML5是用于取代1999年所制定的 HTML 4.01 和 XHTML 1.0 标准的 HTML [1](标准通用标记语言下的一个应用)标准版本;现在仍处于发展阶段,但大部分浏览器已经支持某些 HTML5 技术。HTML 5有八大特点:
语义特性(Class:Semantic)
HTML5赋予网页更好的意义和结构。更加丰富的标签。
本地存储特性(Class: OFFLINE & STORAGE)
基于HTML5开发的网页APP拥有更短的启动时间,更快的联网速度,这些全得益于HTML5 APP Cache,以及本地存储功能。Indexed DB(html5本地存储最重要的技术之一)。 localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储
indexedDB数据库
其他功能索引,游标
设备兼容特性 (Class: DEVICE ACCESS)
从Geolocation功能的API文档公开以来,HTML5为网页应用开发者们提供了更多功能上的优化选择,带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连,例如视频影音可直接与microphones及摄像头相联。
连接特性(Class: CONNECTIVITY)
更有效的连接工作效率,使得基于页面的实时聊天,更快速的网页游戏体验,更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术,Server-Sent Event和WebSockets就是其中的两个特性,这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能。 Server-Sent Event 即服务器单向消息传递事件,网页可以自动获取来自服务器的更新。以前也可能做到这一点,前提是网页不得不询问是否有可用的更新。通过服务器发送事件,更新能够自动到达。如:Facebook/Twitter 更新、估价更新、新的博文、赛事结果等。 Server-Sent Event示例 新建basic_sse.html
新建datepush.js
运行node datepush.js 然后在浏览器输入:http://localhost:1234/basic_sse.html 可看到通过Server-Sent Event实时获取的消息
WebSocket 是伴随HTML5发布的一种新协议。它实现了浏览器与服务器全双工通信(full-duplex),可以传输基于消息的文本和二进制数据。WebSocket 是浏览器中最靠近套接字的API,除最初建立连接时需要借助于现有的HTTP协议,其他时候直接基于TCP完成通信。它是浏览器中最通用、最灵活的一个传输机制,其极简的API 可以让我们在客户端和服务器之间以数据流的形式实现各种应用数据交换(包括JSON 及自定义的二进制消息格式),而且两端都可以随时向另一端发送数据。 官网: http://www.websocket.org/quantum.html 轮询和websocket对比
轮询和websocket性能对比
WebSockets例子: 在项目目录npm install nodejs-websocket
运行node server.js 然后浏览器打开test.html,即可看到运行效果
网页多媒体特性(Class: MULTIMEDIA)
支持网页端的Audio、Video等多媒体功能, 与网站自带的APPS,摄像头,影音功能相得益彰。
三维、图形及特效特性(Class: 3D, Graphics & Effects)
基于SVG、Canvas、WebGL及CSS3的3D功能,用户会惊叹于在浏览器中,所呈现的惊人视觉效果。 SVG动画制作: http://snapsvg.io SVG数据可视化框架: https://d3js.org Canvas游戏引擎:egret , cocos2D-js , lufylegend.js 等 WebGL 框架: threejs , Babylon.js等 CSS3 3D: http://rainzhai.github.io/raincss/css3/cube.html
性能与集成特性(Class: Performance & Integration)
没有用户会永远等待你的Loading——HTML5会通过XMLHttpRequest2等技术,帮助您的Web应用和网站在多样化的环境中更快速的工作。
CSS3特性(Class: CSS3)
在不牺牲性能和语义结构的前提下,CSS3中提供了更多的风格和更强的效果。此外,较之以前的Web排版,Web的开放字体格式(WOFF)也提供了更高的灵活性和控制性。 边框
背景(多重背景)
文本效果
webfont
2D 转换 transform
3D转换
过渡
动画
多列
界面 resize box-sizing outline-offset
颜色
flex布局 media query
优点缺点
网络标准
统一标准,易于开发维护
多设备跨平台
ios, andriod, windows, hybrid app
自适应网页设计
手机端pc端全适配
即时更新
HTML5游戏和应用即时的更新。
总结概括HTML5有以下优点:
1、提高可用性和改进用户的友好体验; 2、有几个新的标签,这将有助于开发人员定义重要的内容;SEO很友好; 3、可以给站点带来更多的多媒体元素(视频和音频),替代FLASH和Silverlight; 6、将被大量应用于移动应用程序和游戏; 7、可移植性好。
缺点:
该标准并未能很好的被浏览器所支持。