Web Worker 概述 JavaScript 语言采用的是单线程模型，也就是说，所有任务只能在一个线程上完成，一次只能做一件事。前面的任务没做完，后面的任务只能等着。随着电脑计算能力的增强，尤其是多核 CPU 的出现，单线程带来很大的不便，无法充分发挥计算机的计算能力。 Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。等到 Worker 线程完成计算任务，再把结果返回给主线程。这样的好处是，一些计算密集型或高延迟的任务可以交由 Worker 线程执行，主线程（通常负责 UI 交互）能够保持流畅，不会被阻塞或拖慢。 Worker 线程一旦新建成功，就会始终运行，不会被主线程上的活动（比如用户点击按钮、提交表单）打断。这样有利于随时响应主线程的通信。但是，这也造成了 Worker 比较耗费资源，不应该过度使用，而且一旦使用完毕，就应该关闭。 Web Worker 有以下几个使用注意点。 （1）同源限制 分配给 Worker 线程运行的 ...

IndexedDB API 概述 随着浏览器的功能不断增强，越来越多的网站开始考虑，将大量数据储存在客户端，这样可以减少从服务器获取数据，直接从本地获取数据。 现有的浏览器数据储存方案，都不适合储存大量数据：Cookie 的大小不超过 4KB，且每次请求都会发送回服务器；LocalStorage 在 2.5MB 到 10MB 之间（各家浏览器不同），而且不提供搜索功能，不能建立自定义的索引。所以，需要一种新的解决方案，这就是 IndexedDB 诞生的背景。 通俗地说，IndexedDB 就是浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。这些都是 LocalStorage 所不具备的。就数据库类型而言，IndexedDB 不属于关系型数据库（不支持 SQL 查询语句），更接近 NoSQL 数据库。 IndexedDB 具有以下特点。 （1）键值对储存。 IndexedDB 内部采用对象仓库（object store）存放数据。所有类型的数据都可以直接存入，包括 JavaScript 对象。对象仓库中，数据以“键值对 ...

表单，FormData 对象 表单概述 表单（<form>）用来收集用户提交的数据，发送到服务器。比如，用户提交用户名和密码，让服务器验证，就要通过表单。表单提供多种控件，让开发者使用，具体的控件种类和用法请参考 HTML 语言的教程。本章主要介绍 JavaScript 与表单的交互。 12345678910111213<form action="/handling-page" method="post"> <div> <label for="name">用户名：</label> <input type="text" id="name" name="user_name" /> </div> <div> <label for="passwd">密码：</label> <input type=&qu ...

File 对象，FileList 对象，FileReader 对象 File 对象 File 对象代表一个文件，用来读写文件信息。它继承了 Blob 对象，或者说是一种特殊的 Blob 对象，所有可以使用 Blob 对象的场合都可以使用它。 最常见的使用场合是表单的文件上传控件（<input type="file">），用户选中文件以后，浏览器就会生成一个数组，里面是每一个用户选中的文件，它们都是 File 实例对象。 1234// HTML 代码如下// <input id="fileItem" type="file">var file = document.getElementById('fileItem').files[0];file instanceof File // true 上面代码中，file是用户选中的第一个文件，它是 File 的实例。 构造函数 浏览器原生提供一个File()构造函数，用来生成 File 实例对象。 1new File(array, name [, options ...

ArrayBuffer 对象，Blob 对象 ArrayBuffer 对象 ArrayBuffer 对象表示一段二进制数据，用来模拟内存里面的数据。通过这个对象，JavaScript 可以读写二进制数据。这个对象可以看作内存数据的表达。 这个对象是 ES6 才写入标准的，普通的网页编程用不到它，为了教程体系的完整，下面只提供一个简略的介绍，详细介绍请看《ES6 标准入门》里面的章节。 浏览器原生提供ArrayBuffer()构造函数，用来生成实例。它接受一个整数作为参数，表示这段二进制数据占用多少个字节。 1var buffer = new ArrayBuffer(8); 上面代码中，实例对象buffer占用8个字节。 ArrayBuffer 对象有实例属性byteLength，表示当前实例占用的内存长度（单位字节）。 12var buffer = new ArrayBuffer(8);buffer.byteLength // 8 ArrayBuffer 对象有实例方法slice()，用来复制一部分内存。它接受两个整数参数，分别表示复制的开始位置（从0开始）和结束位置（复制时不包括 ...

Location 对象，URL 对象，URLSearchParams 对象 URL 是互联网的基础设施之一。浏览器提供了一些原生对象，用来管理 URL。 Location 对象 Location对象是浏览器提供的原生对象，提供 URL 相关的信息和操作方法。通过window.location和document.location属性，可以拿到这个对象。 属性 Location对象提供以下属性。 Location.href：整个 URL。 Location.protocol：当前 URL 的协议，包括冒号（:）。 Location.host：主机。如果端口不是协议默认的80和433，则还会包括冒号（:）和端口。 Location.hostname：主机名，不包括端口。 Location.port：端口号。 Location.pathname：URL 的路径部分，从根路径/开始。 Location.search：查询字符串部分，从问号?开始。 Location.hash：片段字符串部分，从#开始。 Location.username：域名前面的用户名。 Location.password： ...

History 对象 概述 window.history属性指向 History 对象，它表示当前窗口的浏览历史。 History 对象保存了当前窗口访问过的所有页面网址。下面代码表示当前窗口一共访问过3个网址。 1window.history.length // 3 由于安全原因，浏览器不允许脚本读取这些地址，但是允许在地址之间导航。 12345// 后退到前一个网址history.back()// 等同于history.go(-1) 浏览器工具栏的“前进”和“后退”按钮，其实就是对 History 对象进行操作。 属性 History 对象主要有两个属性。 History.length：当前窗口访问过的网址数量（包括当前网页） History.state：History 堆栈最上层的状态值（详见下文） 123456// 当前窗口访问过多少个网页window.history.length // 1// History 对象的当前状态// 通常是 undefined，即未设置window.history.state // undefined 方法 History.back() ...

Storage 接口 概述 Storage 接口用于脚本在浏览器保存数据。两个对象部署了这个接口：window.sessionStorage和window.localStorage。 sessionStorage保存的数据用于浏览器的一次会话（session），当会话结束（通常是窗口关闭），数据被清空；localStorage保存的数据长期存在，下一次访问该网站的时候，网页可以直接读取以前保存的数据。除了保存期限的长短不同，这两个对象的其他方面都一致。 保存的数据都以“键值对”的形式存在。也就是说，每一项数据都有一个键名和对应的值。所有的数据都是以文本格式保存。 这个接口很像 Cookie 的强化版，能够使用大得多的存储空间。目前，每个域名的存储上限视浏览器而定，Chrome 是 2.5MB，Firefox 和 Opera 是 5MB，IE 是 10MB。其中，Firefox 的存储空间由一级域名决定，而其他浏览器没有这个限制。也就是说，Firefox 中，a.example.com和b.example.com共享 5MB 的存储空间。另外，与 Cookie 一样，它们也受同域限制。某 ...

CORS 通信 CORS 是一个 W3C 标准，全称是“跨域资源共享”（Cross-origin resource sharing）。它允许浏览器向跨域的服务器，发出XMLHttpRequest请求，从而克服了 AJAX 只能同源使用的限制。 简介 CORS 需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能。 整个 CORS 通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS 通信与普通的 AJAX 通信没有差别，代码完全一样。浏览器一旦发现 AJAX 请求跨域，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感知。因此，实现 CORS 通信的关键是服务器。只要服务器实现了 CORS 接口，就可以跨域通信。 两种请求 CORS 请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。 只要同时满足以下两大条件，就属于简单请求。 （1）请求方法是以下三种方法之一。 HEAD GET POST （2）HTTP 的头信息不超出以下几种字段。 Accept Accept-La ...