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

相关文章