简易的网站百度竞价排名一年费用

java反射api研究

随着时间的流逝，可用于在Web平台上创建功能强大的应用程序的工具越来越完善。 HTML5规范在新API中添加了许多有用的功能，可能是由于缺乏浏览器支持，因此您可能尚未研究过。

在本文中，我们将介绍10个HTML5 API ，这些API涵盖了一系列功能和特性，可以帮助您创建交互式网站，测试代码性能，与用户设备进行交互等等。

如您所见，对这些功能的支持可能比您想象的要好得多。

1.高分辨率时间API

高分辨率时间API以亚毫秒级的分辨率提供当前时间，因此它不受系统时钟偏差或调整的影响。

它仅公开一个属于window.performance对象的方法，称为now() 。 它返回一个DOMHighResTimeStamp表示当前时间（以毫秒为单位）。 时间戳非常精确，精确到千分之一毫秒，可以对我们的代码性能进行准确的测试。

此方法的最重要特征是performance.now()是单调增加的 （也就是说，它一直增加），因此两次调用之间的差值永远不会为负。

支持API的浏览器为IE10，Opera 15和Firefox 15+（无前缀）。 Chrome支持从20版这个API以其“WebKit的”前缀，并没有从24版本更多关于兼容性的前缀这里 。

调用此方法的基本示例如下所示：

var time = performance.now();

以下是供您试用的演示：

请参阅CodePen上的SitePoint（ @SitePoint ）提供的Pen HuDAx 。

要了解有关此API的更多信息，您可以阅读我以前的文章之一，“ 发现高分辨率时间API” 。

2.用户计时API

为测试我们的代码的性能而创建的另一个API是User Timing API 。 使用高分辨率时间API，我们可以以毫秒级的分辨率检索当前时间，但是这使我们难以在代码中引入大量变量。 用户计时API解决了此问题和其他问题。

它使我们能够准确地测量和报告一段JavaScript代码的性能。 它涉及两个主要概念：标记和度量。 前者表示一个瞬间（时间戳），而后者则表示两个标记之间经过的时间。

该API公开了四个方法，所有方法都属于window.performance对象，这些方法使我们可以存储和删除标记和度量。 mark(name)方法用于存储带有关联名称的时间戳，而measure(name[, mark1[, mark2]])可用于存储两个具有提供名称的标记之间经过的时间。

支持User Timing API的台式机和移动浏览器为IE10 +，Chrome 25+和Opera 15+。

这是使用此API的基本示例：

performance.mark("startFoo");
// A time consuming function
foo();
performance.mark("endFoo");
performance.measure("durationFoo", "startFoo", "endFoo");

这是一个演示：

请参阅CodePen上的SitePoint（ @SitePoint ）提供的Pen iLnAI 。

有关更多信息，请参阅我的文章“ 发现用户计时API” 。

3.导航计时API

页面加载时间是用户体验最重要的方面之一。 不幸的是，对速度缓慢的页面加载进行故障排除并不容易，因为有很多因素。 为了解决这个问题，除了上面考虑的API外，W3C还提出了Navigation Timing API 。

这个API提供详细的整个经过访问的页面加载过程时序信息timing的财产window.performance对象。 详细地，它提供与页面重定向，DNS查找，构建DOM所花费的时间，TCP连接建立以及其他几个指标有关的度量。

IE9 +，Firefox 7 +，Opera 15+和Chrome 6+ 当前支持 Navigation Timing API。

有关此API的演示， 请参阅此页面 。 有关更多信息，请查看Colin Ihrig的文章“ 使用Navigation Timing API进行页面加载分析” 。

4.网络信息API

您认为我们已经完成了性能方面的工作吗？ 没门！ 绩效是当今最重要的概念之一。 根据谷歌浏览器程序员埃里克·塞德尔（Eric Seidel）的说法，甚至Google都将性能作为2014年要实现的主要目标之一 。

涉及性能的另一个API是Network Information API 。 它可以帮助您发现用户是否处于计费连接（例如按需付费），并提供带宽估计。 有了这些信息，就可以改变页面的行为，以最佳方式适应用户。 例如，我们可以根据检测到的连接类型有条件地加载图像，视频，字体和其他资源。

该API属于window.navigator对象的connection属性。 它公开了两个只读属性： bandwidth和metered 。 前者是表示当前带宽估计值的数字，而后者是布尔值，如果用户的连接受到限制和带宽使用的限制，则该值为true ，否则为false 。

目前，只有Firefox 12+和Chrome（仅限移动设备）使用各自的供应商前缀提供实验性支持。

您可以在csskarma上查看此API的页面演示。 有关更多信息，请参见Craig的文章“ 如何使用网络信息API改善响应性网站” 。

5.振动API

在我们行业中引起广泛关注的另一个关键概念是用户体验（UX）。 提出的使我们可以增强网站这一方面的API之一就是Vibration API 。

该API旨在解决需要基于触摸的反馈的用例，并提供以编程方式产生与移动设备的内置振动硬件组件相互作用的振动的能力。 如果不存在这样的组件，则它什么也不做。

如果您正在使用在线视频或网络游戏，则振动API尤其有用。 例如，您可以让用户的设备在游戏进行过程中响应特定事件而振动。

它仅公开属于window.navigator对象的一种方法vibrate() 。 此方法接受一个参数，以毫秒为单位指定振动的持续时间。 该参数可以是整数，也可以是整数数组。 在第二种情况下，它被解释为交替的振动时间和暂停。

Chrome 30 +，Firefox 11+和Opera 17+支持该API。

该API的基本用法如下所示：

// Vibrate once for 2 seconds
navigator.vibrate(2000);

有关演示，请在支持设备中访问此页面 。 有关此API的更多信息，请参阅关于振动API的Buzz和如何使用HTML5振动API 。

6.电池状态API

振动API并不是唯一允许访问设备硬件的API。 专门为移动设备设计的另一种此类API是Battery Status API 。 它使您可以检查设备电池的状态并触发有关电池电量或状态变化的事件。

电池状态API暴露四个属性（ charging ， chargingTime ， discharingTime ，和level ）以及四个事件。 这些属性指定电池是否正在充电，电池完全充满电之前剩余的秒数，电池完全充满电之前剩余的秒数以及电池的当前电量。 这些属性属于window.navigator对象的battery属性。

该API的用例非常有趣。 例如，如果我们检测到电池电量不足，则可以按特定的间隔自动减慢或停止页面上可能发生的Ajax请求。 另一个示例是禁用非关键CSS3和JavaScript动画，或者更频繁地保存数据，以防止电池电量严重不足时丢失数据。

当前，只有Firefox桌面和移动设备支持此API。

下面显示了以百分比为单位获取电池当前电量的基本示例：

// Retrieves the percentage of the current level of the device's battery
var percentageLevel = navigator.battery.level * 100;

同样，这是一个演示，仅在支持设备上起作用：

请参阅CodePen上的SitePoint（ @SitePoint ）的Pen bFuvg 。

有关更多信息，请参阅电池状态API简介和如何使用HTML5电池状态API。

7.页面可见性API

页面可见性API使我们能够确定页面的当前可见性状态。 这意味着我们能够检测页面是在后台还是最小化（即不是当前聚焦的窗口）。

此功能可以帮助我们开发功能强大但CPU和带宽效率高的Web应用程序。 实际上，如果我们检测到用户未使用该页面，则可以减慢甚至停止CPU和/或带宽消耗过程。

该API公开了一个事件，称为visibilitychange ，我们可以侦听该事件以检测页面的可见性状态的变化，以及两个只读属性hidden和visibilityState 。 这些属性属于document对象。 hidden是一个布尔，其值是true ，如果该页面是不可见的，而false否则。 visibilityState是一个枚举，它指定文档的当前状态，并由以下值组成： hidden ， visible ， prerender和unloaded 。

支持此API的桌面浏览器是Chrome 13 +，Internet Explorer 10，Firefox 10 +，Safari 7和Opera 12.10（ 源 ）。 支持API的移动浏览器是Android 4.0+上的Chrome和Android和Symbian上的Opera Mobile 12.1+（ 源 ）。

以下是一个演示：

请参阅CodePen上的SitePoint（ @SitePoint ）的Pen hcKxd 。

有关此API的更多信息，请参见我的文章“页面可见性API简介” 。

8.全屏API

全屏API提供了一种请求用户全屏显示并在需要时退出此模式的方法。

该API公开了两个方法requestFullscreen()和exitFullscreen() ，使我们可以请求元素变为全屏并退出全屏。

它还公开了属于document对象的两个属性fullScreenElement和fullScreenEnabled 。 这些指定已推送到全屏模式的元素，以及当前是否启用了全屏模式的元素。 它还公开了一个事件fullScreenEnabled ，它为我们提供了一种方便的方法来侦听启用或禁用全屏模式的情况。

所有主要浏览器均支持全屏API，特别是：Internet Explorer 11 +，Firefox 10 +，Chrome 15 +，Safari 5.1+和Opera 12.10+（ 源 ）。

有关此API的演示，请参阅此页面 。 有关更多信息，请查看Craig的文章“ 如何使用HTML5全屏API（再次）” ，该演示来自该文章。

9. getUserMedia API

使用getUserMedia API，可以从本地设备访问多媒体流（视频，音频或两者）。 这意味着我们无需使用Flash或Silverlight即可访问这些流。 该API的一些用例包括实时交流和教程或课程记录。

getUserMedia API仅公开一种称为getUserMedia()方法。 它属于window.navigator对象，并接受约束对象，成功回调和失败回调作为其参数。

getUserMedia API还允许我们对请求的流进行很多控制。 例如，我们可以选择以高分辨率或低分辨率检索视频源。

支持此API的桌面浏览器是Chrome 21+（带-webkit前缀），Firefox 17+（带-moz前缀）和Opera 18+。 在移动设备上，Chrome 32 +，Firefox 26+和Opera 12+（ 源 ）均支持该功能。

要观看演示， 请在支持的浏览器中访问此页面 。 有关更多信息，请参见我的文章getUserMedia API简介 。

10. WebSocket API

WebSocket API允许开发人员通过在浏览器和服务器之间建立套接字连接来创建实时应用程序。 这意味着我们可以在客户端和服务器之间建立持久连接，该连接可以随时交换数据。

为了使用WebSocket协议进行通信，您需要创建一个WebSocket对象。 实例化对象后，API会尝试建立连接。

WebSocket API提供了两种方法： send()将数据发送到服务器，以及close()关闭连接。 它还提供了几个属性，其中一些是事件侦听器。 这意味着我们可以为他们分配一个事件触发时执行的功能。 事件的示例包括发生错误或从服务器收到消息。

所有主流浏览器都支持WebSocket API，特别是IE10 +，Firefox 4+（版本6全面支持），Chrome 4+（版本14全面支持），Safari 5+（版本6全面支持）和Opera 11+ （版本12.10的完全支持），（ 源 ）。

您可以在Sandeep Panda的文章HTML5 WebSockets API简介中阅读有关此API的更多信息。

结论

在本文中，我对HTML5近年来引入的许多API进行了概述，并进行了一些演示。 如您所见，其中许多都具有相当不错的浏览器支持。

我希望本摘要以及随附的资源和演示可以给您一些动力，以利用这些新功能来构建有趣的东西。

如果您使用了其中任何一种，请在评论中告诉我们您的经验。

翻译自: https://www.sitepoint.com/10-html5-apis-worth-looking/

java反射api研究