宿主库 · Magic_sword2

[TOC] # 简介说明 原文链接： - [Web API](https://developer.mozilla.org/zh-CN/docs/Web/API) - [10个打开了我新世界大门的 WebAPI](https://mp.weixin.qq.com/s/iIiYOd-T0k7FAqrM5I-Cxg) ``` 版本：宿主库作用：Browser 环境自带的 DOM 和 BOM API包含固有对象和构造对象 ``` # 接口参考 # 后台任务 ***** 对后台性能任务进行处理 ### *接口规范 1. 参考列表 | API | 作用 | 链接 | | --- | --- | --- | | Background Tasks API | 幕后任务协作调度 | [点击](https://developer.mozilla.org/zh-CN/docs/Web/API/Background_Tasks_API) | | Web Workers API | Web应用程序可以在独立于主线程的后台线程中，运行一个脚本操作 | [点击](https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API) | # 网络通信 ***** 基于AJAX理念的与服务端通信接口 ### *接口规范 1. 参考列表 | API | 作用 | 链接 | | --- | --- | --- | | Beacon API | 用于将异步和非阻塞请求发送到服务器 | [点击](https://developer.mozilla.org/zh-CN/docs/Web/API/Beacon_API) | | Fetch API | 提供了一个获取资源的接口（包括跨域请求） | [点击](https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API) | | XMLHttpRequest | 用于与服务器交互 | [点击](https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest) | | Server-sent events | 服务器可以在任何时刻向我们的 Web 页面推送数据和信息 | [点击](https://developer.mozilla.org/zh-CN/docs/Web/API/Server-sent_events) | | Websockets API | 可以在用户的浏览器和服务器之间打开交互式通信会话 | [点击](https://developer.mozilla.org/zh-CN/docs/Web/API/WebSockets_API) | # 文件处理 ***** 文件处理 ### *接口规范 1. 参考列表 | API | 作用 | 链接 | | --- | --- | --- | | File API | 使 Web 应用程序能够访问文件及其内容 | [点击](https://developer.mozilla.org/en-US/docs/Web/API/File_API) | | File System Access API | 文件系统访问 API 允许读取、写入和文件管理功能 | [点击](https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API) | | File and Directory Entries API | 模拟一个 web 应用可以导航和访问的本地文件系统 | [点击](https://developer.mozilla.org/zh-CN/docs/Web/API/File_and_Directory_Entries_API) | | Streams API | 允许JavaScript以编程的方式访问通过网络接收的数据流，并根据开发人员的需要处理它们 | [点击](https://developer.mozilla.org/zh-CN/docs/Web/API/Streams_API) | # 图形处理 ***** 图形处理 ### *接口规范 1. 参考列表 | API | 作用 | 链接 | | --- | --- | --- | | Barcode Detection API | 检测图像中的线性和二维条码 | [点击](https://developer.mozilla.org/en-US/docs/Web/API/Barcode_Detection_API) | | Canvas API | 提供了一个通过JavaScript 和 HTML的canvas元素来绘制图形的方式 | [点击](https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API) | | WebGL | 渲染高性能的交互式3D和2D图形，而无需使用插件 | [点击](https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API) | # 媒体处理 ***** 媒体处理 ### *接口规范 1. 参考列表 | API | 作用 | 链接 | | --- | --- | --- | | Encrypted Media Extensions API | 加密媒体扩展 API 提供用于控制受数字限制管理方案约束的内容播放的接口 | [点击](https://developer.mozilla.org/en-US/docs/Web/API/Encrypted_Media_Extensions_API) | | Media Capabilities API | 允许开发人员确定设备的解码和编码能力，公开信息，例如是否支持媒体以及播放是否应该流畅和节能，并提供有关播放的实时反馈以更好地启用自适应流，以及访问显示财产信息 | [点击](https://developer.mozilla.org/en-US/docs/Web/API/Media_Capabilities_API) | | Media Capture and Streams | 描述音频或视频数据流的 WebRTC (en-US) 的一部分，处理它们的方法，与数据类型相关的约束，成功和错误当异步使用数据时的回调以及在处理期间触发的事件 | [点击](https://developer.mozilla.org/zh-CN/docs/Web/API/Media_Streams_API) | | Media Session API | 提供了一种自定义媒体在用户(手机)通知栏显示的方法 | [点击](https://developer.mozilla.org/en-US/docs/Web/API/Media_Session_API) | | Media Source Extensions | 提供了实现无插件且基于 Web 的流媒体的功能 | [点击](https://developer.mozilla.org/zh-CN/docs/Web/API/Media_Source_Extensions_API) | | MediaStream Recording | 使得捕获通过 MediaStream 或者HTMLMediaElement 对象产生的用于分析、加工或者保存到硬盘的数据成为可能 | [点击](https://developer.mozilla.org/zh-CN/docs/Web/API/MediaStream_Recording_API) | | Picture-in-Picture API | 画中画允许网站始终在其他窗口之上创建一个浮动视频窗口，以便用户在与其他内容站点或设备上的应用程序交互时可以继续消费媒体 | [点击](https://developer.mozilla.org/en-US/docs/Web/API/Picture-in-Picture_API) | | WebRTC | 实时通讯技术，它允许网络应用或者站点，在不借助中间媒介的情况下，建立浏览器之间点对点（Peer-to-Peer）的连接，实现视频流和（或）音频流或者其他任意数据的传输 | [点击](https://developer.mozilla.org/zh-CN/docs/Web/API/WebRTC_API) | | WebVTT | 使用track元素显示定时文本轨道（如字幕或标题）的格式 | [点击](https://developer.mozilla.org/zh-CN/docs/Web/API/WebVTT_API) | | WebCodecs API | 提供了对视频流的各个帧和音频块的低级访问 | [点击](https://developer.mozilla.org/en-US/docs/Web/API/WebCodecs_API) | | Web Speech API | 使您能够将语音数据合并到 Web 应用程序中 | [点击](https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Speech_API) | | Web Audio API | 提供了在Web上控制音频的一个非常有效通用的系统，允许开发者来自选音频源，对音频添加特效，使音频可视化，添加空间效果（如平移），等等 | [点击](https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Audio_API) | # UI交互 ***** UI交互 ### *接口规范 1. 参考列表 | API | 作用 | 链接 | | --- | --- | --- | | Web Animations | 允许同步和定时更改网页的呈现, 即DOM元素的动画 | [点击](https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Animations_API) | | Visual Viewport API | 提供了一种明确的机制来查询和修改窗口的可视视口的属性 | [点击](https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API) | | Touch Events | 基于触摸的用户界面提供高质量的支持，触摸事件提供了在触摸屏或触控板上解释手指 | [点击](https://developer.mozilla.org/zh-CN/docs/Web/API/Touch_events) | | UI Events | 定义了一个系统来处理用户交互，例如鼠标和键盘输入 | [点击](https://developer.mozilla.org/en-US/docs/Web/API/UI_Events) | | Pointer Events | 一类可以为定点设备所触发的DOM事件 | [点击](https://developer.mozilla.org/zh-CN/docs/Web/API/Pointer_events) | | Selection API | 使开发人员能够访问和操作用户选择的文档部分 | [点击](https://developer.mozilla.org/en-US/docs/Web/API/Selection_API) | | Pointer Lock API | 指针锁定(以前叫做鼠标锁定) 提供了一种输入方法，这种方法是基于鼠标随着时间推移的运动的（也就是，deltas），而不仅是鼠标光标的绝对位置 | [点击](https://developer.mozilla.org/zh-CN/docs/Web/API/Pointer_Lock_API) | | Page Visibility API | 提供了您可以观察的事件，以便了解文档何时可见或隐藏，以及查看页面当前可见性状态的功能 | [点击](https://developer.mozilla.org/zh-CN/docs/Web/API/Page_Visibility_API) | | Resize Observer API | 监视元素的大小更改，并且每次大小更改时都会向观察者传递通知 | [点击](https://developer.mozilla.org/zh-CN/docs/Web/API/Resize_Observer_API) | | Intersection Observer API | 提供了一种异步检测目标元素与祖先元素或 viewport 相交情况变化的方法 | [点击](https://developer.mozilla.org/zh-CN/docs/Web/API/Intersection_Observer_API) | | Layout Instability API | 提供了用于测量和报告布局变化的接口 | [点击](https://developer.mozilla.org/en-US/docs/Web/API/Layout_Instability_API) | | History API | 提供了对浏览器的会话历史的访问 | [点击](https://developer.mozilla.org/zh-CN/docs/Web/API/History_API) | | Fullscreen API | 为使用用户的整个屏幕展现网络内容提供了一种简单的方式，并且在不需要时退出全屏模式 | [点击](https://developer.mozilla.org/zh-CN/docs/Web/API/Fullscreen_API) | | HTML Drag and Drop API | 使应用程序能够在浏览器中使用拖放功能 | [点击](https://developer.mozilla.org/zh-CN/docs/Web/API/HTML_Drag_and_Drop_API) | | CSS Counter Styles | 允许定义自定义计数器样式，可用于 CSS 列表标记和生成内容计数器 | [点击](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Counter_Styles) | | CSS Font Loading API | 提供了动态加载字体资源时的 events 和 interfaces | [点击](https://developer.mozilla.org/zh-CN/docs/Web/API/CSS_Font_Loading_API) | | CSS Painting API | 允许开发人员编写 JavaScript 函数，这些函数可以直接绘制到元素的背景、边框或内容中 | [点击](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Painting_API) | | CSS Typed Object Model API | 将 CSS 值公开为类型化 JavaScript 对象而不是字符串来简化 CSS 属性操作 | [点击](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Typed_OM_API) | | CSS Object Model | 允许用 JavaScript 操纵 CSS 的 API | [点击](https://developer.mozilla.org/zh-CN/docs/Web/API/CSS_Object_Model) | | DOM | 将 web 页面与到脚本或编程语言连接起来 | [点击](https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model) | | HTML DOM | 定义 HTML 中每个元素的功能的接口以及它们所依赖的任何支持类型和接口组成 | [点击](https://developer.mozilla.org/zh-CN/docs/Web/API/HTML_DOM_API) | # 页面通信 ***** 不同页面通信API ### *接口规范 1. 参考列表 | API | 作用 | 链接 | | --- | --- | --- | | Broadcast Channel API | 实现同源下浏览器不同窗口，Tab页，frame或者 iframe 下的浏览器上下文 (通常是同一个网站下不同的页面)之间的简单通讯 | [点击](https://developer.mozilla.org/zh-CN/docs/Web/API/Broadcast_Channel_API) | | Channel Messaging API | 允许两个不同的脚本运行在同一个文档的不同浏览器上下文来直接通讯 | [点击](https://developer.mozilla.org/zh-CN/docs/Web/API/Channel_Messaging_API) | # PWA ***** 渐进式 Web 应用 ### *接口规范 1. 参考列表 | API | 作用 | 链接 | | --- | --- | --- | | Background Fetch API | 提供了一种方法来管理可能需要大量时间的下载，例如电影、音频文件和软件 | [点击](https://developer.mozilla.org/en-US/docs/Web/API/Background_Fetch_API) | | Content Index API | 允许开发人员在浏览器中注册他们的离线内容 | [点击](https://developer.mozilla.org/en-US/docs/Web/API/Content_Index_API) | | Web Periodic Background Synchronization API | 提供了一种方法来注册要在 service worker 中运行的任务，这些任务以网络连接的周期性间隔运行 | [点击](https://developer.mozilla.org/en-US/docs/Web/API/Web_Periodic_Background_Synchronization_API) | | Push API | 给与了Web应用程序接收从服务器发出的推送消息的能力，无论Web应用程序是否在用户设备前台，甚至刚加载完成 | [点击](https://developer.mozilla.org/zh-CN/docs/Web/API/Push_API) | | Service Worker API | 创建有效的离线体验，它会拦截网络请求并根据网络是否可用来采取适当的动作、更新来自服务器的的资源 | [点击](https://developer.mozilla.org/zh-CN/docs/Web/API/Service_Worker_API) | # 系统功能 ***** 与操作系统相关的API ### *接口规范 1. 参考列表 | API | 作用 | 链接 | | --- | --- | --- | | Console API | 提供了允许开发人员执行调试任务的功能，例如在代码中的某个位置记录消息或变量值，或者计算任务完成所需的时间 | [点击](https://developer.mozilla.org/zh-CN/docs/Web/API/Console_API) | | Encoding API | 提供了一种机制来处理各种字符编码的文本，包括传统的非 UTF-8 编码 | [点击](https://developer.mozilla.org/en-US/docs/Web/API/Encoding_API) | | Battery Status API | 提供了有关系统充电级别的信息并提供了通过电池等级或者充电状态的改变提醒用户的事件 | [点击](https://developer.mozilla.org/zh-CN/docs/Web/API/Battery_Status_API) | | Web Bluetooth API | 提供了连接蓝牙低功耗外围设备(BLE)并与之交互的能力 | [点击](https://developer.mozilla.org/en-US/docs/Web/API/Web_Bluetooth_API) | | Clipboard API | 提供了响应剪贴板命令（剪切、复制和粘贴）与异步读写系统剪贴板的能力 | [点击](https://developer.mozilla.org/zh-CN/docs/Web/API/Clipboard_API) | | Contact Picker API | 允许用户从他们的联系人列表中选择条目，并与网站或应用程序共享所选条目的有限详细信息 | [点击](https://developer.mozilla.org/en-US/docs/Web/API/Contact_Picker_API) | | EyeDropper API | 提供了一种创建吸管工具的机制 | [点击](https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API) | | Gamepad API | 可以给予开发者一种简单、统一的方式来识别并响应游戏控制器（手柄） | [点击](https://developer.mozilla.org/zh-CN/docs/Web/API/Gamepad_API) | | Geolocation API | 允许用户向 Web 应用程序提供他们的位置 | [点击](https://developer.mozilla.org/zh-CN/docs/Web/API/Geolocation_API) | | Image Capture API | 用于从摄影设备捕获图像或视频的 API | [点击](https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Image_Capture_API) | | Network Information API | 获取到系统的网络连接信息，比如说连接方式是 WiFi 还是蜂窝 | [点击](https://developer.mozilla.org/zh-CN/docs/Web/API/Network_Information_API) | | Window Controls Overlay API | 使安装在桌面操作系统上的渐进式 Web 应用程序能够隐藏默认窗口标题栏并在应用程序窗口的整个表面区域显示自己的内容，转动控制按钮（最大化、最小化和关闭）成一个覆盖 | [点击](https://developer.mozilla.org/en-US/docs/Web/API/Window_Controls_Overlay_API) | | Permissions API | 提供了一种一致的编程方式来查询归因于当前上下文的 API 权限的状态 | [点击](https://developer.mozilla.org/zh-CN/docs/Web/API/Permissions_API) | | Proximity Events | 了解用户何时接近设备的便捷方式 | [点击](https://developer.mozilla.org/en-US/docs/Web/API/Proximity_Events) | | Screen Capture API | 让用户选择一个屏幕或屏幕的一部分（如一个窗口）作为媒体流进行捕获 | [点击](https://developer.mozilla.org/zh-CN/docs/Web/API) | | Screen Orientation API | 提供有关屏幕方向的信息 | [点击](https://developer.mozilla.org/en-US/docs/Web/API/Screen_Orientation_API) | | Screen Wake Lock API | 提供了一种防止设备变暗或锁定屏幕的方法 | [点击](https://developer.mozilla.org/en-US/docs/Web/API/Screen_Wake_Lock_API) | | Sensor API | 为各类传感器提供了一致的访问方式 | [点击](https://developer.mozilla.org/zh-CN/docs/Web/API/Sensor_APIs) | | WebHID API | 人机接口设备 (HID) 是一种从人类获取输入或向人类提供输出的设备 | [点击](https://developer.mozilla.org/en-US/docs/Web/API/WebHID_API) | | Vibration API | 允许软件代码通过使设备摇动来向用户提供物理反馈 | [点击](https://developer.mozilla.org/zh-CN/docs/Web/API/Vibration_API) | | Web Notifications | 允许网页控制向最终用户显示系统通知 —这些都在顶级浏览上下文视口之外，因此即使用户已经切换标签页或移动到不同的应用程序，也可以显示 | [点击](https://developer.mozilla.org/zh-CN/docs/Web/API/Notifications_API) | | Web MIDI API | 连接到乐器数字接口 (MIDI) 设备并与之交互 | [点击](https://developer.mozilla.org/en-US/docs/Web/API/Web_MIDI_API) | # 安全验证 ***** 安全验证 ### *接口规范 1. 参考列表 | API | 作用 | 链接 | | --- | --- | --- | | Credential Management API | 允许网站存储和检索用户，联合账户和公钥证书 | [点击](https://developer.mozilla.org/zh-CN/docs/Web/API/Credential_Management_API) | | Web Authentication API | 继承自 Credential Management API ，使用公钥密码学使得验证更强壮，不需要SMS文本就能实现无密码验证和安全的双因素验证 | [点击](https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Authentication_API) | | Web Crypto API | 提供加密了一套关于密码（学）的接口，以便用于构建需要使用密码的系统 | [点击](https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Crypto_API) | # 数据存储 ***** 数据存储 ### *接口规范 1. 参考列表 | API | 作用 | 链接 | | --- | --- | --- | | IndexedDB | 用于在客户端存储大量的结构化数据 | [点击](https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API) | | Storage API | 定义了一个通用的、共享的存储系统，供所有 API 和技术使用，以存储各个网站的内容可访问数据 | [点击](https://developer.mozilla.org/zh-CN/docs/Web/API/Storage_API) | | Storage Access API | 为嵌入的跨域内容提供了一种不受限制地访问存储的方法，该存储通常只能在第一方上下文中访问 | [点击](https://developer.mozilla.org/en-US/docs/Web/API/Storage_Access_API) | | Web Storage API | 使浏览器能以一种比使用Cookie更直观的方式存储键/值对 | [点击](https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Storage_API) | # 虚拟现实 ***** VR和AR技术支持 ### *接口规范 1. 参考列表 | API | 作用 | 链接 | | --- | --- | --- | | WebXR Device API | 支持将渲染3D场景用来呈现虚拟世界（虚拟现实，也称作VR）或将图形图像添加到现实世界（增强现实，也称作AR）的标准 | [点击](https://developer.mozilla.org/zh-CN/docs/Web/API/WebXR_Device_API) | | WebVR API | 为虚拟现实设备的渲染提供支持 | [点击](https://developer.mozilla.org/zh-CN/docs/Web/API/WebVR_API) | # 实用工具 ***** 实用工具 ### *接口规范 1. 参考列表 | API | 作用 | 链接 | | --- | --- | --- | | HTML Sanitizer API | 允许开发人员获取不受信任的 HTML 字符串和 Document 或 DocumentFragment 对象，并对其进行清理，以便安全地插入到文档的 DOM 中 | [点击](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Sanitizer_API) | | High Resolution Time | 支持应用程序中客户端的延时测量 | [点击](https://developer.mozilla.org/zh-CN/docs/Web/API/Performance_API) | | Performance API | 支持应用程序中客户端的延时测量 | [点击](https://developer.mozilla.org/zh-CN/docs/Web/API/Performance_API) | | Performance Timeline | 根据特定过滤条件检索性能条目指标 | [点击](https://developer.mozilla.org/zh-CN/docs/Web/API/Performance_Timeline) | | Navigation Timing API | 提供了可用于衡量一个网站性能的数据 | [点击](https://developer.mozilla.org/zh-CN/docs/Web/API/Navigation_timing_API) | | Long Tasks API | 直观地告诉我们哪些任务执行耗费了 50 毫秒或更多时间 | [点击](https://developer.mozilla.org/zh-CN/docs/Web/API/Long_Tasks_API) | | Resource Timing API | 获取和分析应用资源加载的详细网络计时数据 | [点击](https://developer.mozilla.org/zh-CN/docs/Web/API/Resource_Timing_API) | | Payment Request API | 支付请求接口 | [点击](https://developer.mozilla.org/zh-CN/docs/Web/API/Payment_Request_API) | | Presentation API | 允许用户代理（例如 Web 浏览器）通过投影仪和联网电视等大型演示设备有效地显示 Web 内容 | [点击](https://developer.mozilla.org/en-US/docs/Web/API/Presentation_API) | | Reporting API | 提供通用报告机制，用于以一致的方式基于各种平台功能（例如内容安全策略、功能策略或功能弃用报告）提供报告 | [点击](https://developer.mozilla.org/en-US/docs/Web/API/Reporting_API) | | URL API | 定义了有效的Uniform Resource Locator和访问、操作URL的API。URL标准还定义了像域名、主机和IP地址等概念，并尝试以标准的方式去描述用于以键/值对的形式提交web表单内容的遗留application/x-www-form-urlencoded MIME type | [点击](https://developer.mozilla.org/zh-CN/docs/Web/API/URL_API) | | URL Pattern API | 定义了一种用于创建 URL 模式匹配器的语法 | [点击](https://developer.mozilla.org/en-US/docs/Web/API/URL_Pattern_API) | | Web Share API | 提供了一种将文本、链接、文件和其他内容共享到用户选择的任意共享目标的机制 | [点击](https://developer.mozilla.org/en-US/docs/Web/API/Web_Share_API) |