html5的(de)優勢分(fēn)析

2018-10-04 10:44

HTML5技術相(xiàng)對(duì)于flash插件(jiàn)優勢就(jiù)是，更清晰，更流暢，對(duì)CPU的(de)占用更低，就(jiù)如(rú)同播放本地視(shì)頻(pín)一(yī)樣。

HTML5技術相(xiàng)對(duì)于flash技術能(néng)使用本地播放器播放網頁視(shì)頻(pín)（比如(rú)iphone不支持flash，也(yě)能(néng)播放網頁上的(de)視(shì)頻(pín)）而flash相(xiàng)對(duì)于html5十分(fēn)吃CPU，在(zài)電(diàn)腦上還好點，在(zài)手機上就(jiù)會(huì)顯得(de)特别卡。

即便是雙核的(de)手機，在(zài)播放優酷和(hé)土(tǔ)豆上的(de)高清720P以上的(de)視(shì)頻(pín)的(de)時候也(yě)會(huì)卡，最關鍵的(de)是因爲flash非常依靠CPU所以對(duì)CPU的(de)占用很大，在(zài)電(diàn)腦上表現還不明(míng)顯，在(zài)手機上表現就(jiù)是卡和(hé)費電(diàn)（因爲占用很多(duō)CPU資(zī)源）。
H5之所以能(néng)引發如(rú)此廣泛的(de)效應，根本在(zài)于它不再隻是一(yī)種标記語言，它爲下一(yī)代互聯網提供了全新的(de)框架和(hé)平台，包括提供免插件(jiàn)的(de)音視(shì)頻(pín)、圖像動(dòng)畫、本體(tǐ)存儲以及更多(duō)酷炫而且重要的(de)功能(néng)，并使這(zhè)些應用标準化和(hé)開放化，從而使互聯網也(yě)能(néng)夠輕松實現類似桌面的(de)應用體(tǐ)驗。
　　H5的(de)最顯著的(de)優勢在(zài)于跨平台性，用H5搭建的(de)站(zhàn)點與應用可(kě)以兼容PC端與移動(dòng)端、Windows與Linux、安卓與IOS。它可(kě)以輕易地移植到各種不同的(de)開放平台、應用平台上，打破各自(zì)爲政的(de)局面。這(zhè)種強大的(de)兼容性可(kě)以顯著地降低開發與運營成本，可(kě)以讓企業特别是創業者獲得(de)更多(duō)的(de)發展機遇。
　　此外(wài)，H5的(de)本地存儲特性也(yě)給使用者帶來了更多(duō)便利。基于H5開發的(de)輕應用比本地APP擁有更短(duǎn)的(de)啓動(dòng)時間(jiān)，更快的(de)聯網速度，而且無需下載占用存儲空間(jiān)，特别适合手機等移動(dòng)媒體(tǐ)。而H5讓開發者無需依賴第三方浏覽器插件(jiàn)即可(kě)創建高級圖形、版式、動(dòng)畫以及過渡效果，這(zhè)也(yě)使得(de)用戶用較少(shǎo)的(de)流量就(jiù)可(kě)以欣賞到炫酷的(de)視(shì)覺聽覺效果。
正在(zài)使用構建器來避免使用代碼更深入，但是關于HTML5的(de)一(yī)些最好的(de)東西是代碼中(zhōng)的(de)新元素。在(zài)過去(qù)，HTML已經有“标簽”繞過文字，并告訴你的(de)浏覽器它在(zài)看什麽。

例如(rú)，一(yī)些段落文本将如(rú)下所示：

<p>This is paragraph text!</p>

頂層标題将如(rú)下所示：

<h1>This is a heading!</h1>

對(duì)于頁面上的(de)許多(duō)元素，特别是分(fēn)隔符，HTML隻有一(yī)個符号，标簽<div></div>。因此，包含該網站(zhàn)主要內(nèi)容的(de)框将如(rú)下所示：

<div>This houses all the main content on the site!</div>

側邊欄看起來像這(zhè)樣：

<div>This is a sidebar!</div>

标題，頁腳，主要內(nèi)容中(zhōng)的(de)文章(zhāng)等都最終不得(de)不使用标簽<div></div>。您可(kě)以想像，這(zhè)使得(de)開發人(rén)員難以合作(zuò)開發項目，因爲更難以理解使用相(xiàng)同标記引用不同元素的(de)數千行(xíng)代碼。它還使搜索引擎更難了解網站(zhàn)上的(de)重要內(nèi)容。

HTML5引入了具有更準确名稱的(de)新元素。所以現在(zài)，您的(de)內(nèi)容的(de)後端如(rú)下所示：

<header>This is a header!</header>

<main>This houses all the main content on the site!</main>

<footer>This is a footer!</footer>

您可(kě)以想像，這(zhè)使得(de)開發人(rén)員更容易創建更好的(de)網站(zhàn)，開發人(rén)員創建網站(zhàn)制(zhì)作(zuò)商使用的(de)模闆，這(zhè)對(duì)于使用HTML5的(de)網站(zhàn)制(zhì)作(zuò)工(gōng)具來說(shuō)是一(yī)個好點。HTML5元素的(de)另一(yī)大勝利就(jiù)是輕松訪問(wèn)搜索引擎。由于清晰度，新的(de)語義元素給您的(de)代碼，搜索引擎可(kě)以更容易地了解您的(de)網站(zhàn)，使其更容易索引。這(zhè)是對(duì)SEO的(de)正确方向的(de)另一(yī)個推動(dòng)。

多(duō)媒體(tǐ)元素
使用較舊版本的(de)HTML，将視(shì)頻(pín)和(hé)音頻(pín)添加到網站(zhàn)可(kě)能(néng)是一(yī)個複雜的(de)過程。現在(zài)就(jiù)像使用新的(de)“<audio> </ audio>”和(hé)“<video> </ video>”标簽一(yī)樣簡單。如(rú)果要在(zài)您的(de)網站(zhàn)上放置視(shì)頻(pín)或音頻(pín)剪輯，則使用HTML5的(de)構建器可(kě)以無縫地完成。這(zhè)也(yě)是多(duō)少(shǎo)網站(zhàn)爲網頁創建視(shì)頻(pín)背景。如(rú)果您正在(zài)尋找一(yī)種快速的(de)方法來使您的(de)網站(zhàn)視(shì)覺驚豔，則視(shì)頻(pín)背景可(kě)能(néng)是您最好的(de)選擇。

現場速度優化
HTML5還優化了站(zhàn)點速度，并更有效地利用了設備的(de)能(néng)力。這(zhè)些創新的(de)幾個例子(zǐ)包括：

Web Workers - 此功能(néng)通(tōng)過在(zài)後台委托JavaScript事(shì)件(jiàn)使HTML5加載更快。
requestAnimationFrame - 此功能(néng)可(kě)優化2D和(hé)3D動(dòng)畫。
還有更多(duō)的(de)功能(néng)會(huì)讓您理解（并解釋）複雜，但您可(kě)以查看Mozilla開發人(rén)員網絡HTML5頁面上的(de)完整列表。

HTML5＆Bounce Rate
Google很容易找出您的(de)網站(zhàn)加載速度，但您的(de)用戶也(yě)可(kě)以看清楚。如(rú)果一(yī)個頁面正在(zài)努力出現，用戶離開。搜索引擎跟蹤訪問(wèn)者在(zài)您的(de)網站(zhàn)上停留的(de)時間(jiān)，并使用該時間(jiān)來确定您的(de)“跳出率”。跳出率是從用戶從您的(de)網站(zhàn)彈回到另一(yī)個網站(zhàn)的(de)平均時間(jiān)計算的(de)。不利的(de)“跳出率”告訴搜索引擎，他們(men)不應該将該網站(zhàn)顯示在(zài)結果頁面的(de)頂部。