瀏覽器與HTML5小談

金怡愛瀏覽器與HTML5小談提綱瀏覽器介紹Webkit介紹HTML5HTML5歷史與設(shè)計(jì)原理HTML5的新特性HTML5的發(fā)展?fàn)顩r

瀏覽器的價(jià)值搶占桌面->用戶習(xí)慣養(yǎng)成->搶占用戶->產(chǎn)生效益實(shí)現(xiàn)業(yè)務(wù)定制作為云的接入或展現(xiàn)

瀏覽器的分類代理模式

由后端服務(wù)器負(fù)責(zé)對(duì)互聯(lián)網(wǎng)內(nèi)容進(jìn)行重排版、適配、壓縮，然后再組織成特殊的格式發(fā)送給瀏覽器客戶端，瀏覽器客戶端向用戶展示。直連模式

終端直接訪問源站點(diǎn)代理模式瀏覽器UCWEB3GGo星際瀏覽器OperaMini馬赫瀏覽器skyfire直連模式瀏覽器Chrome/Safari/FireFox/IE在嵌入式瀏覽器領(lǐng)域，對(duì)內(nèi)核有較強(qiáng)研發(fā)能力的，國(guó)外也就是Opera，Ant，Enreach等幾家。國(guó)內(nèi)主要是茁壯和飛漫國(guó)內(nèi)不少瀏覽器都是采用“套殼”方式來實(shí)現(xiàn)的，即直接調(diào)用平臺(tái)自身的瀏覽器內(nèi)核四大瀏覽器內(nèi)核Trident(IE,Maxthon)Gecko(MozillaFirefox,Netscape,MozillaSuite,SeaMonkey,MozillaThunderbird)WebKit(Safari,Chrome,chromium)Presto(Opera)瀏覽器的測(cè)試集HTML兼容性測(cè)試AcidXJavaScript性能測(cè)試SunSpider/jsTimeTestGoogleV8Benchmark/MozillaKrakenCelticKane測(cè)試組件綜合性能測(cè)試3DMark公司的PeacekeeperTML5組件測(cè)試GUIMark2（繪圖，游戲，文本）/微軟的Mr.PotatoGun，MozillaHardwareStressTest/AsteroidsCanvas2D。提綱瀏覽器介紹Webkit介紹HTML5HTML5歷史與設(shè)計(jì)原理HTML5的新特性HTML5的發(fā)展?fàn)顩r

WebKit的歷史瀏覽器介紹基于早期KDE項(xiàng)目的KHTML組件發(fā)展而來2005年Apple成立開源項(xiàng)目WebKitApple基于WebKit建立自己的瀏覽器Safari2008年Google發(fā)布自己基于WebKit的瀏覽器Chrome后續(xù)Google發(fā)展了安卓系統(tǒng)，瀏覽器核心也是WebKit國(guó)內(nèi)外很多雜牌瀏覽器發(fā)展了基于Trident核心和WebKit核心的多核心瀏覽器

WebKit分枝Safari(/)Android/Chrome(chromium)Qtwebkit

Windows下編譯Safari版本安裝VS2005teamsuite(建議英文版)安裝VS2005TeamSuiteServicePack1如果是Vista/Window7安裝SP1updateforvista安裝vs2005的4個(gè)升級(jí)包:KB918559/KB935225/KB943969/KB947315安裝DirectXSDK和quicktimeSDK安裝cgwin下載WebKitSupportLibrary.zip，放到WebKit根目錄下(無需解壓)設(shè)置環(huán)境變量WEBKITLIBRARIESDIR和WEBKITOUTPUTDIR運(yùn)行update-webkit和update-webkit-support-libs兩個(gè)腳本編譯整個(gè)解決方案

WebKit組成WebcorejscoreWebkit/webkit2提綱瀏覽器介紹Webkit介紹HTML5HTML5歷史與設(shè)計(jì)原理HTML5的新特性HTML5的發(fā)展?fàn)顩r

HTML5的歷史草案(1993/6)HTML2.0(1995/11)HTML3.2(1996/1/14)HTML4.0(1997/12/18)HTML4.01(1999/12/24)XHTML1.0(2000)、XHTML1.1(2001)XHTML2.0：未完成時(shí)就胎死腹中HTML5WHATWG（2004）[Opera->Google：伊恩·?？松璢->HTML5工作組W3C->HTML5XHTML2.0失敗因?yàn)樗`反了著名的伯斯塔爾法則(Postel’sLaw):發(fā)送時(shí)要保守；接收時(shí)要開放。HTML5設(shè)計(jì)原理避免不必要的復(fù)雜性支持已有的內(nèi)容解決現(xiàn)實(shí)的問題HTML5致力于解決過去HTML不支持而又為用戶所接納的習(xí)慣。HTML5設(shè)計(jì)原理求真務(wù)實(shí)HTML5中新的語義元素就是遵循求真務(wù)實(shí)原理的反映。平衡退化漸進(jìn)增強(qiáng)的另一面就是平穩(wěn)退化，HTML5確保新增的元素在不能被識(shí)別時(shí)，仍然可以為瀏覽器所正確處理。HTML5設(shè)計(jì)原理最終用戶優(yōu)先一旦遇到?jīng)_突，最終用戶優(yōu)先，其次是作者，其次是實(shí)現(xiàn)者，其次標(biāo)準(zhǔn)制定者，最后才是理論上的完滿。首先為人類設(shè)計(jì)，其次為機(jī)器設(shè)計(jì)。簡(jiǎn)化最常見的任務(wù)，讓不常見的任務(wù)不至于太麻煩。

只為80%設(shè)計(jì)。

給內(nèi)容創(chuàng)建者最大的權(quán)利。

默認(rèn)設(shè)置智能化。提綱瀏覽器介紹Webkit介紹HTML5HTML5歷史與設(shè)計(jì)原理HTML5的新特性HTML5的發(fā)展?fàn)顩r

HTML5新特性Canvas以及3D顯示效果(WebGL）、SVG多媒體（Video/audio）CSS3樣式離線及本地存儲(chǔ)（AppCache,本地存儲(chǔ),IndexedDB等等）通信相關(guān)（WebSockets/WebWorkers等）語義性（Microdata微數(shù)據(jù)等等）特征檢測(cè)設(shè)備功能（取得地理位置信息等等）CanvasHTML5

canvas

提供了通過JavaScript繪制圖形的方法通過webGL接口在canvas元素當(dāng)中產(chǎn)生交互的3D圖形SVG與動(dòng)畫采用SVG規(guī)范中定義的動(dòng)畫元素(<animate>，<set>，<animate-Motion>，<animateColor>，<animatcTransform>)。采用SVGDOM。采用SMILVideo/AudioHTML5對(duì)于音視頻分別定義了新的元素：<video>，<audio>HTML5支持不需要插件的視頻\音頻業(yè)務(wù)，可以同時(shí)指定多個(gè)音視頻文件，其中第一個(gè)可以作為推薦性的文件，由于不同瀏覽器提供不同的外觀控制欄，HTML5提供一種公共的、集成的、以及基于腳本的多媒體處理機(jī)制。Videovideowidth=“320”height=“240”controls=“controls”><sourcesrc="movie.mp4"><sourcesrc="movie.ogv"><objectdata="movie.swf"><ahref="movie.mp4">download</a></object></video>存儲(chǔ)與離線WebStoragelocalStoragesessionStorageWebSQLDatabaseIndexedDB。通訊機(jī)制WebWorkersWebSocketNotificotionsHTML5的特征檢測(cè)檢測(cè)了瀏覽器是否在支持一個(gè)特定的HTML5特性有四種基本的技術(shù)，由簡(jiǎn)入繁依次是：1、檢測(cè)全局對(duì)象（諸如window或者nagivator）是否支持題特定的屬性2、創(chuàng)建一個(gè)元素，然后檢測(cè)該元素是否存在特定的一些屬性3、創(chuàng)建一個(gè)元素，然后檢測(cè)這個(gè)元素上是否存在特定的方法，同時(shí)調(diào)用這個(gè)方法了檢查它的返回值4、創(chuàng)建一個(gè)元素，給這個(gè)元素設(shè)定HTML5特有的屬性，然后檢查瀏覽器是否保留了該屬性值設(shè)備功能HTML5提供了一組API用來獲取用戶的地理位置Geolocation是GeolocationWorkGroup制定的標(biāo)準(zhǔn)，用戶可以接受或者拒絕為Web應(yīng)用提供自己位置信息的獲取和訪問其它的一些特性WebVTT一個(gè)簡(jiǎn)單的文件格式正在WHATWG開發(fā),名為WebVTT（網(wǎng)絡(luò)視頻文字頻道）,被考慮納入HTML5的標(biāo)準(zhǔn)和實(shí)施,作為Web瀏覽器本身的一個(gè)HTML5元素。該文件格式可根據(jù)章導(dǎo)航和元數(shù)據(jù)為HTML5視頻提供標(biāo)題，字幕和腳本說明,它還能利用國(guó)際標(biāo)準(zhǔn)（i18n），支持各種格式的選項(xiàng)。WOFFWeb開放字體格式WOFF(WebOpenFontFormat)的出現(xiàn)，使精排版可以真正將文字作為網(wǎng)頁來使用，而不是圖像。提綱瀏覽器介紹Webkit介紹HTML5HTML5歷史與設(shè)計(jì)原理HTML5的新特性HTML5的發(fā)展?fàn)顩r

各廠家對(duì)HTML5的支持Opera/FirefoxGoogleAppleFacebookAdobe微軟HTML5開發(fā)開發(fā)工具IBMMaqetta微軟Visualstudio/ExpressionWeb4AdobeCS以及HTML5Pack、WallabyGordon、SwiffyOnlineCSS3Maker、TumulthypeAnimation)開發(fā)框架SenchaTouch、iUI、jQTouch、jQueryMobile、iWebKit(主要針對(duì)Apple設(shè)備)、SproutCore、Joshfire。其它工具NitobiPhoneGap、Appcelerator的Titanium、RhodesHTML5目前存在的問題硬件加速能力有待提高終端瀏覽器支持的成熟度有待提高開發(fā)工具太少對(duì)多媒體支持不夠音視頻編碼格式不統(tǒng)一HTML5目前存在的問題硬件加速能力有待提高終端瀏覽器支持的成熟度有待提高開發(fā)工具太少對(duì)多媒體支持不夠音視頻編碼格式不統(tǒng)一提綱瀏覽器介紹Webkit介紹HTML5HTML5歷史與設(shè)計(jì)原理HTML5的新特性HTML5的發(fā)展?fàn)顩rHTML5與flash的一些對(duì)比

Flash成功的原因內(nèi)部原因:

把握住了RIA這一正確的方向提供了完善的開發(fā)工具上層開發(fā)接口統(tǒng)一,跨瀏覽器平臺(tái)好(只要支持flash插件都能運(yùn)行)外部原因:W3C選擇了錯(cuò)誤的XHTML方向,導(dǎo)致標(biāo)準(zhǔn)長(zhǎng)期停滯不前。瀏覽器廠商沒有把握住RIA這一正確方向?yàn)g覽器廠商對(duì)標(biāo)準(zhǔn)支持不好,導(dǎo)致跨平臺(tái)存在障礙，也無法提供友好的開發(fā)工具。利弊分析Open的統(tǒng)一是有代價(jià)的封閉私有未必一無是處JavaScript詬病甚多文章推薦HTML的發(fā)展歷史(JeremyKeith)