【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

1. 对象URL也被称为blob url，指的是引用保存在File或Blob中数据的URL。
2. 使用对象URL的好处是可以不必把文件内容读取到JavaScript中而直接使用文件内容。
3. 只要在需要文件内容的地方提供对象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)}

1. 关于Worker，最重要的是要知道他所执行的JavaScript代码完全在另一个作用域中，与当前网页代码不共享作用域。
2. Worker中的代码不能访问DOM，也无法更改页面外观。
3. 比较耗时的操作，转交给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>