前端進階系列(三):HTML5新特性

robin發表於2019-02-16
前端HTML

HTML5 是對 HTML 標準的第五次修訂。其主要的目標是將網際網路語義化，以便更好地被人類和機器閱讀，並同時提供更好地支援各種媒體的嵌入。HTML5 的語法是向後相容的。現在國內普遍說的 H5 是包括了 CSS3，JavaScript 的說法（嚴格意義上說，這麼叫並不合適，但是已經這麼叫開了，就將錯就錯了）。

HTML5新特性

語義特性

HTML5賦予網頁更好的意義和結構

  • 檔案型別宣告（<!DOCTYPE>）僅有一型：<!DOCTYPE HTML>。
  • 新的解析順序：不再基於SGML。
  • 新的元素：section, video, progress, nav, meter, time, aside, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, output, rp, rt, ruby, source, summary, wbr。
  • input元素的新型別：date, email, url等等。
  • 新的屬性：ping（用於a與area）, charset（用於meta）, async（用於script）。
  • 全域屬性：id, tabindex, repeat。
  • 新的全域屬性：contenteditable, contextmenu, draggable, dropzone, hidden, spellcheck。
  • 移除元素：acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt。

本地儲存特性

HTML5離線儲存包含：應用程式快取（Application Cache）、本地儲存、索引資料庫、檔案介面

應用程式快取

通過建立cache manifest檔案，可以輕鬆的建立web應用的離線版本
其優勢在於：

  • 離線瀏覽-使用者可在應用離線時使用它們
  • 速度-已快取靜態資源，使載入更快
  • 減少伺服器負載-瀏覽器將只存伺服器下載更新過或修改過的資源

本地儲存

  • localStorage
  • sessionStorage

從名字上看就可以很清楚的辨認兩者的區別，前者是一直存在本地的，後者只是伴隨著session，視窗一旦關閉就沒了。

索引資料庫（indexed DB）

從本質上說，IndexedDB允許使用者在瀏覽器中儲存大量的資料。任何需要傳送大量資料的應用都可以得益於這個特性，可以把資料儲存在使用者的瀏覽器端。當前這只是IndexedDB的其中一項功能，IndexedDB也提供了強大的基於索引的搜尋api功能以獲得使用者所需要的資料。

使用者可能會問：IndexedDB是和其他以前的儲存機制(如cookie,session)有什麼不同？

Cookies是最常用的瀏覽器端儲存資料的機制,但其儲存資料的大小有限制並且有隱私問題。Cookies並且會在每個請求中來回傳送資料，完全沒辦法發揮客戶端資料儲存的優勢。

再來看下Local Storage本地儲存機制的特點。Local Storage在HTML 5中有不錯的支援，但就總的儲存量而言依然是有所限制的。Local Storage並不提供真正的“檢索API”,本地儲存的資料只是通過鍵值對去訪問。Local Storage對於一些特定的需要儲存資料的場景是很適合的，例如，使用者的喜好習慣，而IndexedDB則更適合儲存如廣告等資料（它更象一個真正的資料庫）。

一般來說,有兩種不同型別的資料庫:關係型和文件型(也稱為NoSQL或物件)。關聯式資料庫如SQL Server,MySQL,Oracle的資料儲存在表中。文件資料庫如MongoDB,CouchDB,Redis將資料集作為個體物件儲存。IndexedDB是一個文件資料庫，它在完全內建於瀏覽器中的一個沙盒環境中(強制依照（瀏覽器）同源策略)。

對資料庫的每次操作，描述為通過一個請求開啟資料庫,訪問一個object store，再繼續。

IndexedDB是否適合應用程式的幾個關鍵點

  • 你的使用者通過瀏覽器訪問您的應用程式,（瀏覽器）支援IndexedDB API嗎 ?
  • 你需要儲存大量的資料在客戶端?
  • 你需要在一個大型的資料集合中快速定位單個資料點?
  • 你的架構在客戶端需要事務支援嗎?

如果你對其中的任何問題回答了“是的”,很有可能,IndexedDB是你的應用程式的一個很好的候選。

檔案介面

看這裡http://www.cnblogs.com/zichi/p/html5-file-api.html

裝置訪問特性

包括地理位置API、媒體訪問API、訪問聯絡人及事件、裝置方向

地理位置

看這裡https://developer.mozilla.org/zh-CN/docs/Web/API/Geolocation/Using_geolocation

媒體訪問

看這裡https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Using_HTML5_audio_and_video

訪問聯絡人及事件

看這裡 https://blog.csdn.net/qq_27626333/article/details/51815229

裝置方向

看這裡 https://developer.mozilla.org/zh-CN/docs/Web/API/Detecting_device_orientation

連線特性

HTTP是無連線的，一次請求，一次響應。想要實現微信網頁版掃一掃登入，網頁版微信聊天的功能，需要使用輪詢的方式達到長連線的效果，輪詢的大部分時間是在做無用功，浪費網路，浪費資源。現在HTML5為我們帶來了更高效的連線方案 Web Sockets 和Server-Sent Events。

網頁多媒體特性

HTML5支援原生的音視訊能力：Audio、video

三維、圖形及特效特性

大致包含SVG, Canvas, WebGL, 和 CSS3 3D，下面分別進行研究。

效能與整合特性

效能與整合特性主要包括兩個東西，Web Workers 和 XMLHttpRequest 2。

參考文章：

相關文章