web全棧架構師[筆記] — 03 html5新特性

HTML5新特性

1、geolocation

• PC端
  • 精度比較低
  • 經過IP庫定位
• 移動端
  • 經過GPS
• window.navigator.geolocation
  • 單次 getCurrentPosition(成功,失敗,參數)
    • 參數： 
      • enableHighAccuracy 高精度模式——更慢、更費電
      • timeout 超時
      • maximumAge 緩存時間
    • 結果：
      • latitude/longitude 經度/緯度
      • altitude 海拔高度
      • accuracy 精確度
      • altitudeAccuracy 高精度精確度
      • heading 朝向
      • speed 速度
  • 監聽 watchPosition

2、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）

3、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如出一轍 

4、WebWorker

• 瀏覽器上實現的多進程
• 主機 > 程序 > 進程 > 線程 > 纖程
• 對比：

進程線程對比

	多進程（重）	多線程（輕）
開銷	建立、銷燬開銷大	建立、銷燬開銷小
安全性	進程之間是隔離	線程之間是共享
資源	每一個進程獨立資源	同一個進程的全部線程共享資源
共享資源	麻煩	方便
編程難度	低（資源是獨享的）	高（資源是共享的）

• 總結：
  • 多進程：性能低，編寫簡單
  • 多線程：性能高，編寫複雜
• Web端：
  • 主進程 UI進程
  • 子進程(工做進程) 看不見的；只能完成計算、數據請求這些操做 
• 優勢：
  • 1.充分利用資源(多個進程同時工做)
  • 2.防止主進程卡住
• 缺點：
  • 不能執行任何UI操做，子進程只能執行計算型任務
• 結論：WebWorker在工做中用的不多——Web中計算型任務就很少 

5、文件操做、拖拽

• 事件
  • 進入 .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 

6、manifest

• 文件是簡單的文本文件，它告知瀏覽器被緩存的內容（以及不緩存的內容）
  • CACHE MANIFEST - 在此標題下列出的文件將在首次下載後進行緩存
  • NETWORK - 在此標題下列出的文件須要與服務器的鏈接，且不會被緩存
  • FALLBACK - 在此標題下列出的文件規定當頁面沒法訪問時的回退頁面（好比 404 頁面）
• 參考地址:
  • HTML 5 應用程序緩存

7、canvas

• HTML 5 Canvas 參考手冊
• 學習HTML5 Canvas這一篇文章就夠了

8、WebSQL/IndexedDB