HTML5新特性

南方小菜發表於2019-03-20
HTML
  1. geolocation 定位
  • PC--IP地址進行定位
    • 精度比較低
  • 手機--GPS

  1. video、audio（音訊）

    • vedio（視訊）
      • 通用格式：mp4
      • 瀏覽器支援格式
        1. IE wmv
        2. chrome webq
        3. firefox ogv
      • control===自定義播放控制元件
    • JS介面
      • 方法
        1. play
        2. pause
        3. stop
        4. timeupdate
      • 屬性
        1. currenttime 當前播放的位置
        2. duration 長度
        3. volume 音量
        4. muted 靜音===boolean

  2. canvas 繪製

  3. websocket 資料互動

  4. localStorage、sessionStorage 代替cookie（cookie最大儲存4k）

  5. WebSQL 不安全

  6. WebWorker 實現多執行緒

### 優點
1. 充分利用資源
2. 防止主程式（ui程式）卡住
### 缺點
1. 子程式不能進行任何ui操作，只能執行計算型任務
2. 不能傳遞dom物件，因為dom物件不可clone，而程式間傳遞就是clone

### 結論：webworker在工作中用的很少，因為web中的計算型任務就不多

### 多執行緒和多程式
1. 多程式：效能低、編寫簡單（js支援）
2. 多執行緒：效能高、編寫複雜

webWorker===瀏覽器上實現的多程式
1. new worker('xx.js')建立程式物件
    1. 方法
        - postMessage(msg); 傳送資訊===xx.js內this.onmessage屬性為回撥函式接收msg，this.postMessage(conslut)
        - onmessage接收資料consult
    2. 屬性

### web端程式
1. 主程式   負責ui
2. 子程式   不能操作頁面ui
複製程式碼

  1. manifest===指定快取檔案和不快取檔案以及備選

  2. 檔案拖拽

    • 事件
      1. ondragenter 進入
      2. ondragleave 離開
      3. ondragover 懸停 事件會不斷觸發
      4. ondrog 鬆開滑鼠
        檔案拖拽至瀏覽器會存在預設事件，開啟此檔案；且drog事件會在瀏覽器預設事件之後發生，所以必須在dragover事件上preventDeafult
複製程式碼
      5. event存在屬性 dataTransfer存在屬性files可以接受檔案並轉成json陣列

  3. 富文字編輯器

    1. editable
    2. tinymce

經典問題

  1. 播放速度設定
    1. 伺服器端設定，根據播放比例存成多個檔案
    2. 點播調整位元速率
  2. 視訊寬度適配容器寬度
    1. 通過寬高比進行比較，判斷是寬了還是高了
    2. 然後根據偏小的一方進行適配

3.實現試看五分鐘 - 通過只提供五分鐘資源實現 - 不能通過客戶端前臺實現

  1. 域===協議+域名+埠

相關文章