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>