---

7 HTML网页的API

7.1 HTML网页元素

略

7.2 Canvas

Canvas API（画布）用于在网页实时生成图像，并且可以操作图像内容，相当于一个可以用JavaScript操作的位图。

<canvas id="myCanvas" width="400" height="200">
    您的浏览器不支持canvas！
</canvas>

7.3 SVG图像

SVG是“可缩放矢量图”（Scalable Vector Graphics）的缩写，是一种描述向量图形的XML格式的标记化语言。

<img src="circle.svg">

7.4 表单

略

7.5 文件与二进制数据的操作

ECMAScript 5引入了Blob对象，允许直接操作二进制数据。

File对象：负责处理那些以文件形式存在的二进制数据，也就是操作本地文件；
FileList对象：File对象的网页表单接口；
FileReader对象：负责将二进制数据读入内存内容；
URL对象：用于对二进制数据生成URL。

略

7.6 Web Worker

Web Worker的目的，就是为JavaScript创造多线程环境，允许主线程将一些任务分配给子线程。

Web Worker有以下几个特点：

同域限制。
DOM限制。子线程无法读取网页的DOM对象
脚本限制。子线程无法读取网页的全局变量和函数
文件限制。子线程无法读取本地文件

7.7 SSE：服务器发送事件（基本完成）

服务器发送事件（Server-Sent Events，简称SSE），就是浏览器向服务器发送一个HTTP请求，然后服务器不断单向地向浏览器推送“信息”。

SSE与WebSocket相似，都是用来建立浏览器与服务器之间的通信渠道。两者的区别在于：
1、WebSocket是全双工通道，可以双向通信，功能更强；SSE是单向通道，只能服务器向浏览器端发送。
2、WebSocket是一个新的协议，需要服务器端支持；SSE则是部署在HTTP协议之上的，现有的服务器软件都支持。

7.8 Page Visiblity

用于判断页面是否处于浏览器的当前窗口。

7.9 FullScreen

控制浏览器的全屏显示。
使用的时候，可以针对整个网页，也可以针对某个网页元素（比如播放视频的video元素）。

7.10 Web Speech

这个API用于浏览器接收语音输入。

7.11 requestAnimationFrame

requestAnimationFrame是浏览器用于定时循环操作的一个接口，类似于setTimeout，主要用途是按帧对网页进行重绘。
它与显示器的刷新频率保持同步。

7.12 WebSocket（基本完成）

HTML5提出了浏览器的WebSocket API。它允许服务器端与客户端进行全双工的通信。
WebSocket不使用HTTP协议，而是使用自己的协议。

7.13 WebRTC

WebRTC是“网络实时通信”（Web Real Time Communication）的缩写。它能实现两个浏览器之间直接进行视频和音频的通信，不经过服务器。

7.14 Web Components

网站往往需要一些相同的模块，比如日历、调色板等等，这种模块就被称为“组件”（component）。Web Component就是网页组件式开发的技术规范。

1、template标签表示网页中某些重复出现的部分的代码模板。它存在于DOM之中，但是在页面中不可见。
2、可以自定义网页元素，这就叫做Custom Element。它是Web component技术的核心。
3、Shadow DOM指的是，浏览器将模板、样式表、属性、JavaScript代码等，封装成一个独立的DOM元素。它可以向用户隐藏细节，直接提供组件，并且其封装内部样式表，不会影响到外部
4、HTML Import用于将外部的HTML文档加载进当前文档。我们可以将组件的HTML、CSS、JavaScript封装在一个文件里，然后插入到需要使用该组件的网页。

Web Components是非常新的技术，为了让老式浏览器也能使用，Google推出了一个函数库Polymer.js。