web全栈架构师[笔记] — 03 html5新特性

时间:2021-10-04 19:58:09

HTML5新特性

一、geolocation

  • PC端
    • 精度比较低
    • 通过IP库定位
  • 移动端
    • 通过GPS
  • window.navigator.geolocation
    • 单次 getCurrentPosition(成功,失败,参数)
      • 参数:
        • enableHighAccuracy 高精度模式——更慢、更费电
        • timeout 超时
        • maximumAge 缓存时间
      • 结果:
        • latitude/longitude 经度/纬度
        • altitude 海拔高度
        • accuracy 精确度
        • altitudeAccuracy 高精度精确度
        • heading 朝向
        • speed 速度
    • 监听 watchPosition

二、video、audio

  • video
    • scr
    • autoplay
    • loop
    • poster
    • controls
    • video支持的格式
      • IE wmv、mp4
      • Chrome webq、mp4
      • FireFox ogv、mp4
  • audio
    • 支持格式 mp3
  • js接口
    • 方法
      • play() 播放
      • pause() 暂停
    • 属性
      • currentTime 当前播放时间 (s)
      • duration 长度(s)
      • volume 音量(0-100)
      • muted 静音(bool)

三、localStorage

  • 本地存储:大(5M)/cookie(4K)
    • 1.大:1280倍
    • 2.localStorage不会被发往服务器
    • 3.方便
  • localStorage/sessionStorage
    • localStorage 永久存储
    • sessionStorage 会话期存储(浏览器关了就没了)
  • localStorage的用法跟json一模一样
    • localStorage.a=xxx 设置
    • localStorage.a 读取
    • delete localStorage.a 删掉
    • for in 遍历
  • sessionStorage用法和localStorage一模一样

四、WebWorker

  • 浏览器上实现的多进程
  • 主机 > 程序 > 进程 > 线程 > 纤程
  • 对比:
进程线程对比
  多进程(重) 多线程(轻)
开销 创建、销毁开销大 创建、销毁开销小
安全性 进程之间是隔离 线程之间是共享
资源 每个进程独立资源 同一个进程的所有线程共享资源
共享资源 麻烦 方便
编程难度 低(资源是独享的) 高(资源是共享的)
  • 总结:
    • 多进程:性能低,编写简单
    • 多线程:性能高,编写复杂
  • Web端:
    • 主进程 UI进程
    • 子进程(工作进程) 看不见的;只能完成计算、数据请求这些操作
  • 优点:
    • 1.充分利用资源(多个进程同时工作)
    • 2.防止主进程卡住
  • 缺点:
    • 不能执行任何UI操作,子进程只能执行计算型任务
  • 结论:WebWorker在工作中用的很少——Web中计算型任务就不多

五、文件操作、拖拽

  • 事件
    • 进入 .ondragenter
    • 离开 .ondragleave
    • 悬停 .ondragover
      • 默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。这要通过调用 ondragover 事件的 event.preventDefault() 方法
    • 放置 .ondrop
      • 同悬停阻止默认事件,调用 event.preventDefault() 方法
  • FileReader:对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。其中File对象可以是来自用户在一个input元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果
    • 属性
      • error
      • onload
      • readyState
      • result
    • 方法
      • abort()
      • readAsArrayBuffer():原始二进制数据,用于编辑(不常用)
      • readAsBinaryString():二进制的文本形式数据,用于上传
      • readAsDataURL():base64,用于图片
      • readAsText():文本,用于文本文件
    • 继承
      • EventTarget
    • Events
      • onabort
      • onerror
      • onload
      • onloadstart
      • onloadend
      • onprogress

六、manifest

  • 文件是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容)
    • CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
    • NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存
    • FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)
  • 参考地址:

七、canvas

八、WebSQL/IndexedDB