【JavaScript高级程序设计】第25章（新兴API）

25. 新兴API

25.1 requestAnimationFrame()

25.2 Page Visibility

页面最小化，或隐藏在其他标签后

属性
- document.hidden Boolean
- document.visibilityState —> Chrome(hidden, visible, prerender)
事件
- visibilitychange 事件

25.3 Geolocation

请求用户同意共享位置信息

navigator.geolocation
- getCurrentPosition(successCallBack, failedCallBack, option)
- 返回Position对象有两个属性coords, timestamp
- coords包含具***置信息
  - latitude 纬度
  - longtitude 经度
  - accuracy 经纬度精度/米
  - altitude 海拔
  - altitudeAccuracy 海拔精度/米
  - heading 指南针方向
  - speed 速度
- 选项对象可设置属性
  - enableHighAccuracy 保证高精度
  - timeout 最长等待时间
  - maximumAge 有效期
- watchPosition()

25.4 File

File对象
- name
- size
- type
- lastModifiedDate
FileReader 异步读取文件机制，想象成XMLHttpRequest，区别是读取文件系统，而非远程服务器
- 方法
  - readAsText(file, encoding)
  - readAsDataURL(file)
  - readAsBinaryString(file)
  - readAsArrayBuffer(file)
  - abort()
- 事件
  - progress
    - 每隔50ms左右触发一次 lengthComputable, loaded, total
  - error
  - load
  - loadend
读取部分内容
- slice(startByte, length)
- 返回Blob实例，Blob是File的父类型
对象URL

对象URL也被称为blob url，指的是引用保存在File或Blob中数据的URL。

使用对象URL的好处是可以不必把文件内容读取到JavaScript中而直接使用文件内容。

只要在需要文件内容的地方提供对象URL即可。

window.URL.createObjectURL()返回一个字符串，指向一块内存地址
- window.URL.createObjectURL(files[0])
- 形如"blob:null/a53e2e93-c401-4e4b-b1ec-638c612c677b"
- 引用的地方[外链图片转存失败(img-IYI9dxDL-1562168626657)(blob:null/a53e2e93-c401-4e4b-b1ec-638c612c677b)]
- 手动释放对象URL内存window.URL.revokeObjectURL(url)
读取拖放文件 event.dataTransfer.files
使用XHR上传文件
- 上传文件，而不是读取文件内容
- FormData
  - var data = new FormData(); data.append(file0);

25.5 Web Timing

Web计时机制的核心是window.performance对象,全面了解页面被加载到浏览器的阶段
- performance.navigation
  - redirectCount
  - type
- performance.timing 软件纪元1970-1-1
  - navigationStart
  - unloadEventStart
  - unloadEventEnd
  - redirectStart
  - fetchStart 开始GET页面的时间
  - domainLookupStart 开始查询当前页面DNS的时间
  - connectStart 浏览器尝试连接服务器
  - secureConnectionStart SSL方式连接服务器
  - requestStart
  - responseStart
  - domLoading
  - domInteractive
  - domContentLoadedEventStart
  - domComplete
  - loadEventStart

25.6 Web Workers

使用Worker
- var worker = new Worder("stufftodo.js");
- worker.postMessage("start!");
- worker.onmessage = function(event){ var data = event.data;}
- worker.onerror = function(event){console.log(event.filename + event.lineno + event.message)}

关于Worker，最重要的是要知道他所执行的JavaScript代码完全在另一个作用域中，与当前网页代码不共享作用域。

Worker中的代码不能访问DOM，也无法更改页面外观。

比较耗时的操作，转交给Worker就不会阻塞用户界面。

<input type="file" onchange="changeHandler()" />
<script> function changeHandler(){ var files = window.event.target.files; var url = window.URL.createObjectURL(files[0]); var worker = new Worker(url); } </script>