軟件(jiàn)開(kāi)發公司,對(duì)于HTML5在今天這(zhè)個(gè)互聯網時(shí)代✔£₹,大(dà)部分(fēn)人(rén)應該至少(shǎ♥₹★o)都(dōu)聽(tīng)說(shuō)過這(zhγ≈è)個(gè)名字,或許很(hěn)多(duō)人(rén)對(duì)HT÷¥♦ML5的(de)了(le)解都(dōu)起于一(yī)句話"₹'(huà):FLASH殺手。
當我們看(kàn)H5小(xiǎo)→<曆史時(shí),Flash內(nèi)↔δλ心肯定是(shì)崩潰的(de)
HTML5其實早已不(bù)是(shì)什(shén)麽新鮮的(de♦ >)事(shì)物(wù)了(le),其較初的(de)雛形早在2004年(₩ ∏nián)就(jiù)誕生(shēng)了(le),雖然∞Ω₩整個(gè)标準的(de)制(zhì)定過程極其漫長( σcháng),然而即便隻關注較終标準确定,也(y"¥ >ě)已經是(shì)2014年(nián)的(de)事(shì)了(le)。
開(kāi)始常規提問(wèn),什(shén)↕£麽是(shì)HTML5?HTML5是(shì)一(yī)γββ"種标記語言的(de)标準或規範。什(shén)麽是(shì)标記語言?那(nà₽)得(de)先從(cóng)HTML說(shuō)起;什(shén)麽是(s'÷δ•hì)HTML?那(nà)得(de)先從(cóng)萬維網$說(shuō)起,什(shén)麽是(shì)萬維網?額,我好(♥♥hǎo)像給自(zì)己挖了(le)個(♠ε•'gè)大(dà)坑......
起源
我們知(zhī)道(dào)較初的(de)計(jì)算(suàn®↕αφ)機(jī)網絡誕生(shēng)于美(mě£φφi)國(guó)(好(hǎo)的(de),你(nǐ)不(bù)®♥知(zhī)道(dào)我不(bù)怪你(nǐ)),那(nà)已經是(sh✔≈•ì)遙遠(yuǎn)的(de)差不(bù)多(duō)四五十年(nián)前的γ÷γ(de)事(shì)了(le),源于一(yī)個(gè)名叫ARPAN>® ®ET的(de)封閉網絡,至于它的(de)用(yòngβ♣ ¥)途我想很(hěn)多(duō)人(rén→>♠)都(dōu)猜得(de)到(dào)吧(ba),沒錯(cuò),威武的(d•₽↕☆e)美(měi)帝軍隊專用(yòng)。之後随著(zhe)民(mín$)間(jiān)科(kē)研機(jī)構的(de)介入,該網絡 €逐步開(kāi)放(fàng)并較終成為(w♣♠§èi)了(le)今天的(de)Intern™γet,也(yě)就(jiù)是(shì)國(guó)際互聯∑¶δ≥網。
當我們看(kàn)H5小(xiǎo)曆史時(shí)™<±♠,Flash內(nèi)心肯定是(shì)崩潰的('εde)
早在國(guó)際互聯網還(hái)未πδ≤≠成型前,網絡中的(de)計(jì)算(suàn)機(jī)除了(α®le)兩台或多(duō)台之間(jiān)約定好(hǎo)的♣βσ(de)點對(duì)點數(shù)據傳輸↓™δ♣以外(wài),另一(yī)種理(lǐ)所當然的(de)需求✘α§ 很(hěn)快(kuài)被發現(xiàn),那(nà)就(jiù)是(sh₹→ì)運行(xíng)一(yī)台24小(xiǎo)時(shí)不(bù)關δ¶ 機(jī)的(de)電(diàn)腦(nǎo)(這(zhè)種電(diàn) '≥↑腦(nǎo)被稱為(wèi)服務器(qì)),這(zhè)台電(diàn✘₩)腦(nǎo)上(shàng)的(de)數(s→✔hù)據對(duì)網上(shàng)的(de)所有(yǒu)♠&£≥人(rén)開(kāi)放(fàng),誰都(dōu)可(kě)以來(lái)>£β查看(kàn)。而數(shù)據的(de)形式是(shì)多(duō)樣化(≈↑huà)的(de),例如(rú)在商業(y∞∏è)領域,較常見(jiàn)的(de)就(j₩> €iù)是(shì)文(wén)字和(hé)圖片。
顯然我們需要(yào)一(yī)種軟件(jiàn)工(gōn$♥g)具來(lái)獲取這(zhè)些(xiē)數(shù)據并展示給終端用$λ(yòng)戶。人(rén)們将這(zhè)種軟件(jiàn)稱為(wèi)£₩→ 浏覽器(qì),于是(shì)很(hěn✘πσα)多(duō)公司都(dōu)開(kāi)始開(kāi)發浏 ♦ε覽器(qì),比如(rú)讓人(rén)↑★λ又(yòu)愛(ài)又(yòu)恨的(¥★γ₹de)IE,以及谷歌(gē)公司的(de)Chrome→≥∞,與此同時(shí),又(yòu)有(yǒu)很(hěn)多(duōπ☆¥®)公司需要(yào)對(duì)外(wài)展示數 ₽→(shù)據,于是(shì)第一(yī)個(gδ<♥™è)問(wèn)題很(hěn)快(kuài)出現(§↔<xiàn):如(rú)何确保不(bù)同的(de)浏覽器(qìε✘®)能(néng)讀(dú)取不(bù)同公司的(de)文(wén)字和(hé)₽₹©圖片并正确地(dì)顯示出來(lái)呢(ne)?
較容易被想到(dào)的(de)解決方案,就∑ φ(jiù)是(shì)制(zhì)定一(yī)個(gè)統一(yī₹ε↔)的(de)标準格式來(lái)規範數(shù)據傳輸↕÷¶和(hé)展示,不(bù)管是(shì)公司和(hé)浏覽器(qì)¶",隻需要(yào)遵守這(zhè)一(yī)标準,那(↕§×¶nà)麽較終展示的(de)內(nèi)容就(jiù)可(k$&ě)以保持一(yī)緻,不(bù)管你(nǐ)使用(yòng)的(de)≥ 是(shì)Windows還(hái)是(shì)Linux亦或×λ是(shì)蘋果設備。這(zhè)其中,傳輸标準被♠ε✘稱為(wèi)HTTP,而展示标準,就(jiù)是(s★'hì)HTML。
HTML的(de)代碼部分(fēn)其實很(hěn)簡單,任何一(yī)©¶款浏覽器(qì)在打開(kāi)任意網頁後查看(∏€kàn)頁面源代碼就(jiù)可(kě)以看(kàn)到(dào)。它是γ↕ (shì)由很(hěn)多(duō)不(bù)同的(de)标記加εΩ上(shàng)中間(jiān)的(de)标記名構成≈σ♣的(de),标記的(de)作(zuò)用(yòng)隻有(yǒu∑™→&)一(yī)個(gè),就(jiù)是(shì)格式∞©<"化(huà)內(nèi)容,例如(rú)文↓π≈←(wén)字的(de)大(dà)小(xiǎo)、顔色>"←、位置等,以達到(dào)網站(zhàn)制(zhì)α™作(zuò)者想要(yào)的(de)展示效果。
我們可(kě)以非常快(kuài)地(dì)制(zhì)作(zuò)一∑←(yī)個(gè)較簡單的(de)網頁,新建一(yī)個(gè)文(wén)本≠¶↓★文(wén)件(jiàn),打開(kāi)并輸入如(rú)下(xià)內(nè≤≠i)容:
今天吃(chī)不(bù)吃(chī)早飯
算(suàn)了(le),沒錢(qián)♦Ω 不(bù)吃(chī)了(le)
保存這(zhè)個(gè)文(wén)件(jiàn)≤← ∑,然後将擴展名(txt)改為(wèi)html,雙擊打π★開(kāi)這(zhè)個(gè)文(wén)件(jiàn),你(nǐ)就"≥≤±(jiù)可(kě)以在浏覽器(qì)中看±≠(kàn)到(dào)一(yī)大(dà)一↑♦φ(yī)小(xiǎo)兩行(xíng)文(wén)字了(le& δα)。
在上(shàng)面的(de)代碼中,&ldqu←↔©o;<”和(hé)“&g☆ε≠©t;”和(hé)中間(jiānα±↓)的(de)字母或單詞就(jiù)是(sh≈★±αì)所謂的(de)标記了(le)。例如(rú)
表示以标題1的(de)規格顯示之後的(de)內(nèi)容,
則自(zì)動生(shēng)成了(le)一(δ↕↕yī)個(gè)段落。另外(wài)我們會(huì)注" ←≤意到(dào)一(yī)個(gè)小(xiǎo)細節,就(jiù)是Ω€↔¥(shì)幾乎所有(yǒu)的(de)标記都(dōu)是(s↔≈∑≥hì)成對(duì)出現(xiàn)的(de ☆),以“/”符号開(kāi)頭的(πφde)标記作(zuò)為(wèi)結束。
當然,這(zhè)裡(lǐ)隻用(yòng)到(dào)了(le)較基本₩∑↑"的(de)一(yī)些(xiē)标記,并且也(y≤>✔ě)沒有(yǒu)任何複雜(zá)的(de)嵌套結構,事(shì)實上(ααshàng),HTML标準定義的(de)标記要(σ∞☆yào)豐富得(de)多(duō),通(tōng)過各種标記的(de)使用(y$α♦→òng)或組合,可(kě)以實現(xiàn)任何你(nǐ)想要÷≤λ(yào)的(de)排版風(fēng)格。
寄予厚望
HTML5中的(de)5代表版本号,我們可(kě)以簡單地(dì)理(l§×δ<ǐ)解為(wèi)第五代HTML标準(實際在HTM¥¶L5之前有(yǒu)非常多(duō)的(de)次要(yà↕♣₩≤o)版本更新),這(zhè)一(yī)代标準提出了(le)很(hěn±)多(duō)重大(dà)的(de)功能(néng)更新,例如(rú):
1、CANVAS
CANVAS标記允許開(kāi)發者在浏覽器↕∏<(qì)中創建一(yī)個(gè)矩形區(qū)域,并通(★♦÷tōng)過javascript等腳本語言☆∞在這(zhè)個(gè)區(qū)域中随意顯示各種圖片信息,配合定時(π↑shí)器(qì)和(hé)事(shì)件(jiàn)監聽(tī✔&ng)器(qì),即可(kě)輕松實現(xiàn)動畫(huà)和♠δ(hé)遊戲。
當我們看(kàn)H5小(xiǎo)曆史時(shíφ),Flash內(nèi)心肯定是(shì)崩潰的(de)
2、WebSockets
在HTML5之前,網站(zhàn)服務器(qì)是(shì)不(b♦πù)會(huì)主動向用(yòng)戶推送數(shù)據的(¶ de),所有(yǒu)的(de)數(shù)據獲取都(dōu)需÷♣♣₹要(yào)用(yòng)戶主動申請(qǐng)(例如(rú)點♥↑→擊頁面上(shàng)的(de)某個(gè)按鈕),這(zhè)導₹$緻了(le)很(hěn)多(duō)需求的(de)不(bù)便,而web≈✘sockets的(de)出現(xiàn)終于可(kě&£)以讓服務器(qì)主動推送數(shù)據了(le),想想這(zhè)意味≠π著(zhe)什(shén)麽,我們可(kě)以不(bù)借 ₩助任何額外(wài)的(de)插件(jiàn)就(jiù)能(né↔♥α♦ng)夠通(tōng)過網頁來(lái)制(zhì)作(zuò)遊戲和γ§(hé)各種你(nǐ)能(néng)想到(dào)的(de)軟☆"件(jiàn)!注意,這(zhè)些(xi→≠βē)遊戲和(hé)軟件(jiàn)不(bù)需要(yào)你(nǐ✘₹)下(xià)載任何客戶端并安裝,你(nǐ)需要(yào)的(de'♠)僅僅是(shì)一(yī)個(gè)浏覽器(qì)!
當我們看(kàn)H5小(xiǎo)曆史時(shí),Flash內(•ε nèi)心肯定是(shì)崩潰的(de)
3、直接的(de)多(duō)媒體(tǐ)支持
HTML5很(hěn)粗暴地(dì)直接提供了(le)和(h←σ£é)标簽來(lái)支持多(duō)媒體(tǐ)內(nè ↔i)容,而在此之前,我們隻能(néng)通(tōng)過FLASH來σ♠→(lái)提供多(duō)媒體(tǐ)內(nè₩♠δ£i)容。
4、硬件(jiàn)加速加持
其實硬件(jiàn)加速并不(bù)是(shì)★Ω HTML5的(de)專有(yǒu)特性,但(dàn)是(shì)正是(shì₩≤↕)由于HTML5大(dà)大(dà)豐富了( le)內(nèi)容的(de)來(lái)源,使得(de)硬件(jiàn)★ §↕加速的(de)意義變得(de)比以往任何時(shí)刻都(dōu)重↔&要(yào)。傳統以文(wén)字和(hé)圖片為(wèi)主的εφ≠(de)頁面內(nèi)容即便采用(yòng)硬件(jiàn)€©加速也(yě)無法獲得(de)太多(du≈ ∏ō)的(de)優勢。
當然,HTML5的(de)強大(dà)特性αε£♥遠(yuǎn)不(bù)止以上(shàng<≈ )這(zhè)些(xiē),諸如(rú)本地(¥☆↑dì)化(huà)存儲、3D視(shì)覺特性、CSS3等等性能(nén>→↕g)及功能(néng)的(de)大(dà)幅度™★™改進都(dōu)使得(de)HTML5大(dà)有(yǒu)一(yī)統萬₩"✘©維網數(shù)據終端之勢。當然,現(xiàn)實總是(☆∑ ☆shì)不(bù)如(rú)想象美(měi)好(hǎo)。讓人(rσ♦én)略顯尴尬的(de)是(shì),直到(dào)δγ©今天,HTML5仍未完成它的(de)制(zhì)定者們對(duì)♥≥他(tā)原有(yǒu)的(de)期待。
挫折
作(zuò)為(wèi)一(yī)個(gè)國(guó)↓×際化(huà)的(de)公開(kāi)的(de)行(xíng)業(yè)∞→标準,卻同時(shí)成為(wèi)了(le)HTML5®¶較大(dà)的(de)原罪,那(nà)就(jiù)是(shì)'←♦←漫長(cháng)的(de)草(cǎo)案階段,從(cóng)Ω 2004年(nián)的(de)雛形誕生(shēng₹λ)到(dào)2014年(nián)較終标準發布,過去(qù)了(ε☆∞εle)整整十年(nián),如(rú)此長(chá±∏≠ng)時(shí)間(jiān)的(de)拖延給了(le)它較大(dà)β 的(de)競争對(duì)手——FLβ←ASH以可(kě)乘之機(jī),作(zuò ")為(wèi)一(yī)家(jiā)獨立的(de)♣↓公司,ADOBE的(de)反應速度要(yào)遠(y¥÷±uǎn)快(kuài)于HTML5的(de)标準化(huà)組織,一(yī↔₽∞₹)些(xiē)HTML5規劃中的(de)新特性被很(↓<≤hěn)快(kuài)整合到(dào)FLASH的(de)新版本中。
漫長(cháng)的(de)十年(nián)間(↔↓ jiān),FLASH累積了(le)太多(duō)的(de)開 ↕≠(kāi)發者、項目和(hé)資源,于是(shì)當HTML5真正≥∏÷來(lái)到(dào)面前時(shí),苦逼的(de)開(kā≤ i)發者們卻發現(xiàn)已經很(hěn)難φΩ$抛棄FLASH了(le)。
糟糕的(de)情況還(hái)不(bù)止于此。
首先是(shì)标準的(de)制(zhì)σ≠定方式,HTML隻定義了(le)标記的(de)使用(yòng)δ←規範和(hé)輸出結果,但(dàn)并不(bù)包括實現(xià♦↕↕n)方式。也(yě)就(jiù)是(shì)說(shuō),不(bù) γ₹ 同的(de)浏覽器(qì)是(shì)用(yò♣☆β∑ng)不(bù)同的(de)底層代碼來(lေ≠λi)解析同一(yī)個(gè)标記的(de),舉個(↑₩¥₽gè)例子(zǐ),同樣通(tōng)過标簽播↑γ♠♠放(fàng)的(de)島國(guó)動作(zuò)片,在某些(xiē)£σ÷浏覽器(qì)上(shàng)能(néng)正常播放(fà©≠ng),在另一(yī)些(xiē)上(shàα ©ng)就(jiù)可(kě)能(néng)無法播放(fàng),宅男(nán₽¶)們氣急敗壞的(de)原因僅僅是(shì)因為↓★"£(wèi)後者沒有(yǒu)集成相(xiàng)應的(∞×∏±de)解碼器(qì)……
諸如(rú)此類的(de)問(wèn® )題還(hái)有(yǒu)很(hěn)多(duō)Ω$,不(bù)同浏覽器(qì)對(duì)于同一(yī) '個(gè) 标記的(de)實現(xiàn)方式不(bù)斷出現(xiàn)一"€(yī)些(xiē)細微(wēi)差異,單個(gè₹$λ)來(lái)看(kàn)或許問(wèn)題不(bù)大(dà),但(♥×δ©dàn)當标記和(hé)嵌套變多(duō)時≥<(shí),這(zhè)些(xiē)細微(wēi)差異就(jε iù)會(huì)被放(fàng)大(dà)并β©♠∑較終導緻同一(yī)段HTML5代碼在不(bù)同浏覽器(qì)上(sh∑₽φ§àng)産生(shēng)的(de)效果截然不≠(bù)同。這(zhè)對(duì)商業(yè)項目來(lái)說(shuō®¶)是(shì)緻命的(de),開(kāi)發者們™δ不(bù)得(de)不(bù)花(huā)費(fèi)大(dàγ&)量的(de)時(shí)間(jiān)和(hé)精力在不(bù)同的(dαλe)浏覽器(qì)上(shàng)調試同一(✘¥∞±yī)段代碼以達到(dào)盡可(kě)能(néng)相♠&¥∑(xiàng)同的(de)效果。
而FLASH在這(zhè)方面具有(yǒu)先天優勢,FLAσσ 'SH的(de)解釋器(qì)屏蔽了(le)不(bù)→♣同平台的(de)差異性,在運行(xíng)時(shí)将同樣的(de)AS代碼♥≥ασ(FLASH的(de)開(kāi)發語言)根據不(bù)同平台轉換成不(β>&bù)同的(de)底層代碼,即便解釋器(qì)出™γ≤現(xiàn)問(wèn)題導緻運行(xíng)時(shí)發生(sh φēng)差異,那(nà)麽也(yě)隻需要(yào)ADOBE♣€公司對(duì)解釋器(qì)進行(xíng)修正即可(kě),加上(shà→ ng)FLASH的(de)更新推送機(jī)制(zhì≤<☆)幾乎是(shì)強制(zhì)和(hé)實時(shí)的(★β☆de),其修正的(de)結果将在非常短(d"φuǎn)的(de)時(shí)間(jiān)在所有(yǒu)客α₽↕戶端獲得(de)改善。而HTML的(de)代碼則是(shì)∑π₩直接由浏覽器(qì)直接進行(xíng)解析并運行(xíng),因此φ在浏覽器(qì)修正該問(wèn)題并被客戶端更新前,一(yī★↓)個(gè)開(kāi)發者遇到(dào)±≠•的(de)問(wèn)題,其他(tā)開(kāi)發者同樣¶→>會(huì)出現(xiàn)。
其次,HTML5對(duì)于代碼本身(εβshēn)的(de)保護太弱。通(tōng)過HTML5開(k↑≤≈āi)發的(de)項目,其邏輯代碼基本都(dππ™ōu)是(shì)通(tōng)過JavaScri γ€¥pt實現(xiàn)的(de),而後者是σ♦≈(shì)一(yī)種腳本語言,通(tōng)≤☆過浏覽器(qì)的(de)JS解釋器(qì♣≥₹)運行(xíng),由于JS代碼需要(yào)嵌套¥∞在HTML代碼中才能(néng)被執行(xíng₩¶ ×),這(zhè)意味著(zhe)代碼文(wén)件(jiàn)£✘α是(shì)完全暴露在終端的(de),任何人(rén)都α₩(dōu)可(kě)以進行(xíng)查看(kàn)。而所謂的(deλ )代碼混淆也(yě)很(hěn)容易被反編譯搞定,同時(®∏shí)還(hái)可(kě)能(néng)帶來(lái↕±Ω)一(yī)些(xiē)預期之外(wài)的(de)問(wèn)題↔×®,例如(rú)性能(néng)下(xià)降。
以上(shàng)種種原因,使得(de)在一(yī)些(xi↑≥ē)悲觀者看(kàn)來(lái),HTML5較終會(huì)分(fēn)崩δ→ 離(lí)析,成為(wèi)一(yī)個(gè)失敗的(de)标準↔φ♥∑而被人(rén)們抛棄。然而抗争從(cóng)未停止€✔♦,HTML5的(de)傑克小(xiǎo)強之路(lù)還(háiγ±ε)在繼續,24小(xiǎo)時(shí)還(h γái)沒播到(dào)較後一(yī)集,對(duì)手卻開(kāi)始自(zì®ε)亂陣腳了(le)。
曙光(guāng)
FLASH的(de)缺陷和(hé)它的(de)✔≠優點同樣明(míng)顯,較根本的(de)問(wèn)題在λπ&于,它是(shì)ADOBE公司的(de)私有(yǒu)₩✔産品,所有(yǒu)标準掌握在一(yī)家(jiā)™♠σ公司的(de)手中,這(zhè)種情況讓其他(tā)互聯網巨ε↔頭們非常不(bù)爽。
當我們看(kàn)H5小(xiǎo)曆史時(s♣☆♥hí),Flash內(nèi)心肯定是(shì)崩潰的(d ™↑e)
另外(wài),FLASH的(de)§÷♣解釋器(qì)也(yě)經常爆出各種安全漏洞,然而較嚴重的(deφγ π)還(hái)不(bù)是(shì)這(zhè)個(g₹>¶è),畢竟任何軟件(jiàn)産品都(dōu)無法擺脫同樣的(de)問(wè÷≠→≤n)題,關鍵在于FLASH的(de)底層代碼是(₹Ωshì)封閉的(de),一(yī)旦出現(xiàn)漏洞,除了(le)等α ¶待ADOBE公司修複外(wài),我們毫無辦法。
随著(zhe)對(duì)互聯網安全的(de)要(yào)∑→求不(bù)斷提高(gāo),FLASH的(de)封閉特性已經越來(l∏∑&ái)越不(bù)能(néng)滿足挑剔的(de)人(rén)們,這(z>↑∏hè)其中較激進的(de)就(jiù)要(yào)數(shù×∞)已故的(de)蘋果公司的(de)前CEO史蒂夫σ±·喬布斯了(le),他(tā)很(hěn)早©'就(jiù)在蘋果所有(yǒu)産品中禁用 ™≈>(yòng)FLASH并大(dà)力推廣'σ±£HTML5;Facebook的(de)CEO紮克伯克甚至更激進★≠一(yī)些(xiē),他(tā)試圖直接讓HTML5應用(yòng)•±π$取代原生(shēng)應用(yòng);YouTu§♣be也(yě)在去(qù)年(nián)将HTML5設為(wèi)默認的(dδ✔'e)視(shì)頻(pín)播放(fàng)器(qì≠λδ)......而較較關鍵的(de),就(jiù)連FLASH的(d♦∏e)創造者ADOBE公司,也(yě)公開(kāi)宣布逐步停止對(duδ< ì)FLASH的(de)更新并轉到(dào)HTML5的(de)相¥↑∑(xiàng)關開(kāi)發上(shàngε≤ )去(qù)。
至于本地(dì)代碼的(de)安全性,在今天,越來(lá×"i)越多(duō)的(de)人(rén)認為(w©↔φèi)這(zhè)似乎并不(bù)是(shì®π•φ)什(shén)麽問(wèn)題,比起代≈<♣碼的(de)重要(yào)性,設計(jì₽ )思想才是(shì)更為(wèi)核心的(de)競争力,并且><如(rú)果是(shì)一(yī)個(gè)C/S架構的(de)網絡∑α項目,服務器(qì)的(de)重要(yào)程度遠(yuǎn)™β <高(gāo)于客戶端。
并且較終的(de)較終,HTML5的(de)正式标準畢竟>§→已經發布了(le)不(bù)是(shì)麽,所有(yǒu)的♠σ ☆(de)浏覽器(qì)也(yě)已經有(<yǒu)了(le)充分(fēn)的(de)↑♦時(shí)間(jiān)不(bù)斷完善對(d↑§Ωuì)HTML5的(de)支持......
或許,HTML5的(de)全面普及之路(lù)才剛β剛開(kāi)始。
當我們看(kàn)H5小(xiǎo)曆史時(shí),Fla©±✘sh內(nèi)心肯定是(shì)崩潰的λ↕(de)