性能&集成
web workers
Web Worker 是HTML5标准的一部分，这一规范定义了一套 API，它允许一段JavaScript程序运行在主线程之外的另外一个线程中。
一般情况下，当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。
History API
window 对象通过history对象提供对浏览器历史记录的访问能力。它暴露了一些非常有用的方法和属性，让你在历史记录中自由前进和后退，而在HTML5中，更可以 *** 纵历史记录中的数据。
概览
可以通过back()，forward()和go()方法在用户的历史记录中前进与后退。
要在历史记录中前进和后退，只需要这样做：
window.history.back()//后退window.history.forword()//前进12
而利用go（）方法，通过指定一个相对于当前页面位置的数值，可以从当前会话的历史记录中加载页面（当前页面索引值为0，上一页为-1，下一页为1）
window.history.go(-1)//后退一页，相当于back（）window.history.go(1) //向前移动一页（相当于调用forward()）12
你可以查看length属性值，了解历史记录栈中一共有多少页：
var numberOfEntries = window.history.length1
添加和修改历史记录条目
HTML5引进了history.pushState()方法和history.replaceState()方法，它们允许你逐条地添加和修改历史记录条目。这些方法可以协同window.onpopstate事件一起工作。
例子：
假设 hfoo.html 将执行如下JavaScript代码：
var stateObj = { foo: "bar" }
history.pushState(stateObj, "page 2", "bar.html")12
这将让浏览器的地址栏显示tml，但不会加载bar.html页面也不会检查bar.html是否存在。
假设现在用户导航到了com，然后点击了后退按钮，此时，地址栏将会显示har.html，并且页面会触发popstate事件，该事件中的状态对象（state object）包含stateObj的一个拷贝。该页面看起来像foo.html，尽管页面内容可能在popstate事件中被修改。
如果我们再次点击后退按钮，URL将变回hoo.html，文档将触发另一个popstate事件，这次的状态对象为null。回退同样不会改变文档内容。
pushState（）方法
此方法有三个参数：
状态对象（state object）：一个js对象，与用pushState()方法创建的新历史记录条目关联。
标题（title）：FireFox浏览器目前会忽略该参数，虽然以后可能会用上。考虑到未来可能会对该方法进行修改，传一个空字符串会比较安全。或者，你也可以传入一个简短的标题，标明将要进入的状态。
地址（URL）：新的历史记录条目的地址。
浏览器不会在调用pushState()方法后加载该地址，但之后，可能会试图加载，例如用户重启浏览器。
新的URL不一定是绝对路径；如果是相对路径，它将以当前URL为基准；
传入的URL与当前URL应该是同源的，否则，pushState()会抛出异常。
该参数是可选的；不指定的话则为文档当前URL。
replaceState（）方法
history.replaceState() *** 作类似于history.pushState()，不同之处在于replaceState()方法会修改当前历史记录条目而并非创建新的条目。
popstate事件
每当激活的历史记录发生变化时，都会触发popstate事件。如果被激活的历史记录条目是由pushState所创建，或是被replaceState方法影响到的，popstate事件的状态属性将包含历史记录的状态对象的一个拷贝。
contenteditable属性
在HTML5中,通过设置contenteditable属性，任何元素都是可编辑的.，可以瞬间把你的网站变成wiki！
<!DOCTYPE html><html><body>
<div contenteditable="true">
This text can be edited by the user. </div>
</body></html>12345678
拖放
HTML5 的拖放 API 能够支持在网站内部和网站之间拖放项目。同时也提供了一个更简单的供扩展和基于 Mozilla 的应用程序使用的 API。
拖放会触发一系列拖放事件：dragstart、dragenter、dragover、dragleave等。
焦点管理
支持新的 HTML5 activeElement 属性和 hasFocus 方法。
activeElement
document.activeElement：返回当前页面中获得焦点的元素，只读。
很多情况下,该属性会返回一个<input>或者<textarea>元素,于此同时,如果用户在文本输入框中选中了一些文本,还可以使用该元素的selectionStart和selectionEnd属性获得准确的选中文本内容.
该属性的值还可能是一个<select>元素(下拉菜单)或者type属性为button,checkbox或radio的<input>元素.
通常,用户可以通过Tab键来在页面中可以获得焦点的那些元素中切换,然后按下空格键激活这个元素
如果没有某个元素获得焦点,则该属性的值为当前页面中的<body>元素.
截至目前只有firefox3.6支持。
hasFocus（）
document.hasFocus() 方法返回一个 Boolean，表明当前文档或者当前文档内的节点是否获得了焦点。
设备访问
使用camera API
可以参考什么是HTML5（二）中相关部分。
触摸事件
略
使用地理位置定位
地理位置 API 允许用户向 Web 应用程序提供他们的位置。出于隐私考虑，报告地理位置前会先请求用户许可。
地理位置 API 通过 navigator.geolocation 提供。
获取当前定位
可以调用 getCurrentPosition() 函数获取用户当前定位位置。
这会异步地请求获取用户位置，并查询定位硬件来获取最新信息。当定位被确定后，定义的回调函数就会被执行。
navigator.geolocation.getCurrentPosition(function(position) {do_something(position.coords.latitude, position.coords.longitude)})123
检测设备方向
越来越多支持web功能的设备拥有检测自身方向的能力了；也就是说，这些设备可以记录下其受地心引力作用下而在方向上产生变化的数据。
有两种js事件负责处理方向信息。
DeviceOrientationEvent：会在加速度传感器检测到设备在方向上发生变化时触发。
DeviceMotionEvent：会在加速度发生改变时触发。
优点：a、网络标准统一、HTML5本身是由W3C推荐出来的。b、多设备、跨平台
c、即时更新，提高可用性和改进用户的友好体验；
d、有几个新的标签，这将有助于开发人员定义重要的内容；
e、可以给站点带来更多的多媒体元素(视频和音频)，可以很好的替代Flash和Silverlight；
f、涉及到网站的抓取和索引的时候，对于SEO很友好；
缺点： a、安全：像之前Firefox4的web socket和透明代理的实现存在严重的安全问题，同时web storage、web socket 这样的功能很容易被黑客利用，来盗取用户的信息和资料。
b、完善性：许多特性各浏览器的支持程度也不一样。
c、技术门槛: html5简化开发者工作的同时代表了有许多新的属性和API需要开发者学习,想web worker、web socket、web storage等新特性要求对于后台的技术需要有一定的了解,甚至需要深入了解其后面原理和逻辑,而canvas要求视觉和图像算法的一些知识,传统的前端开发者需要掌握更多算法、视觉、 后台甚至浏览器原理的知识,机遇的同时也是巨大的挑战
d、性能：某些平台上的引擎问题导致html5性能低下,同时在不加入GPU（图形处理器）加速的情况下,html5处理复杂音视频, 动画的性能不尽如人意。
e、浏览器兼容性：最大缺点，IE9以下浏览器几乎全军覆没。
HTML的全称是超文本标记语言，是一种标记语言。它包括一系列标签，可以统一网络上文档的格式，将分散的互联网资源连接成一个逻辑整体。HTML是由HTML命令组成的描述性文本，可以解释文字、图形、动画、声音、表格、链接等。Html是一种用来描述网页的语言。它被称为超文本标记语言，它是一种标记语言。它包括一系列标签，可以统一网络上文档的格式，将分散的互联网资源连接成一个逻辑整体。欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）