首頁»前端»從Web到未來

                    從Web到未來

                    來源:mickeywang 發布時間:2019-01-13 閱讀次數:

                    本文會以時間軸為主線,從介紹我們最為熟悉的一種承載互聯網技術形態(瀏覽器)的歷史開始,通過對一些重大節點的還原,以史為鑒,從歷史的沿革總結具有啟發性的準則,來指導我們一起去看未來技術的發展走向。

                     

                     web誕生

                      在1989年3月,供職于歐洲粒子物理研究所Tim Berners Lee寫下了他關于萬維網(World Wide Web簡稱Web)的最初構想。提出了Web作為全球超鏈接信息共享空間的想法,它是一個抽象的(假想的)信息空間,作為Internet上的一種應用架構,是之于Internet的。web的首要任務就是向人們提供信息和信息服務。在一開始,它就開放給所有人,歡迎所有人的貢獻和參與,在Web上創建并分享內容,所有的人都可以分發、獲取和利用信息。

                      從技術層面看,Web架構的精華有三處:

                    • 用超文本技術(HTML)實現信息與信息的連接;
                    • 用統一資源定位技術(URI)實現全球信息的精確定位;
                    • 用新的應用層協議(HTTP)實現分布式的信息共享。

                      這三個特點無一不與信息的分發、獲取和利用有關。

                      既然web是一個抽象假想的空間,自然需要一個工具去訪問這個空間,于是1990年,Berners Lee編寫了世界上第一個web瀏覽器誕生。

                     1990--世界上第一個web瀏覽器

                      萬維網(WWW)是歐洲粒子物理研究所的一幫科學家為了方便看文檔、傳論文而創造的,就是用標記語言+超鏈接寫成的由文字和圖片構成的HTML頁面,隨著網頁從學術機構走向公眾社會,網頁承載的功能便超出了學術范圍而變得愈加豐富,因此早期網頁的局限性也逐漸顯露出來。

                    1. 所有的網頁都基于HTML頁面。因為沒有任何手段可以控制局部內容的顯示和隱藏,因此任何局部的變化哪怕只多出一個標點符號,都只能重新下載一個新的頁面。
                    2. 計算任務只能在服務端實現。由于網速限制,與服務器通信的過程是非常緩慢的,并且此過程是同步阻塞的,于是會出現這樣的場景:(表單驗證)用戶提交一個表單,然后整個頁面消失,瀏覽器呈現白屏,經過漫長的等待,瀏覽器渲染出一個和之前一模一樣的頁面,只不過輸入框旁邊多了一排紅色小字:用戶名錯誤。
                    3. 所有頁面都是靜態的。這意味著一個電商網站有一千種商品,哪怕頁面布局一模一樣,也必須寫一千個單獨的頁面。
                    P.S.
                    1994年 PHP 實現了與數據庫的交互以及用于生產動態頁面的模板引擎,是Web領域中最主流的服務端語言。
                    1995年網景推出了JavaScript,實現了客戶端的計算任務(如表單驗證)。
                    1999年微軟推出用于異步數據傳輸的ActiveX,衍生出了后來的Web網頁邁向Web應用的關鍵技術Ajax,特別是在谷歌使用Ajax技術打造了Gmail(04年)和谷歌地圖(05年)之后,Ajax獲得了巨大的關注。它標識著Web2.0時代的到來。(Web1.0:靜態網頁,純內容展示 Web 2.0:動態網頁,富交互,前端數據處理)
                    2006年,XMLHttpRequest被W3C正式納入標準。

                    至此,早期的Document終于進化為了Web page,上述三個局限都得到了妥善的解決

                     不平凡的1994

                      1994年可以看做前端歷史的起點,這一年10月13日網景推出了第一版Navigator;

                      這一年,Tim Berners-Lee創建了W3C;目前,與Web相關的各種技術標準都由著名的W3C組織(World Wide Web Consortium)管理和維護。

                      這一年,Tim的基友發布了CSS。還是這一年,為動態web網頁設計的服務端腳本PHP

                      這里提到了一家重要的公司--Netscape(網景),網景的歷史可以映射出web前期發展的歷史。

                     硅谷傳奇-網景

                      除了 JavaScript 以外,網景還催化了JAVA,Netscape Navigtor還定義了現代瀏覽器的其它功能,比如說 Cookies、HTML Frames、自動代理等等。95年之前網景是瀏覽器的標準制定者。在當時擁有如此之多先進的特性,Netcape Navigator 曾是世界上最流行的瀏覽器,一時風光無限。

                      但是網景壽命不長,94年成立,1998年11月,網景被美國在線(AOL)收購,03年被解散。這與其所經歷的兩次波折有關。一次是互聯網泡沫,一次是瀏覽器大戰。

                      互聯網泡沫

                      2000年的互聯網泡沫從網景的發行上市說起。因為正是這次IPO的超預期成功極大地刺激了市場的投資熱情。1995 年 8 月,網景公司在納斯達克市當天最高漲幅達154%,以上漲86%報收。網景公司股價的驚人表現掀起了美國20世紀90年代后半期波瀾壯闊的風險投資熱潮。大多數資本爭相流向了互聯網產業。其中亞馬遜(Amazon)、eBay等熱門股上漲了數十倍,2000年1月起,原本被追捧的互聯網股票突然被 大量拋售,并最終引發了整個納斯達克市場的崩潰。

                      瀏覽器大戰

                      Netvigator 開拓了民用瀏覽器市場,當他們正在大展拳腳之際,電腦平臺上的霸主微軟,突然以 Internet Explorer (IE) 向 Netscape 狂攻,開始了“第一次瀏覽器大戰”(95到99),因為,1995 年的 8 月推出了 IE 1.0,結果 IE 在 Windows 的捆綁優勢下,將 Netscape 擊得潰不成軍,當時市占率90%。對普通人來說,瀏覽器就是桌面上那個藍色的“e”,多年來微軟的 IE 瀏覽器幾乎成了瀏覽器的代名詞。

                      Netscape 后來把 Navigator 瀏覽器開源,創造了Mozilla,衍生出 Firefox 瀏覽器。05 年到 07 年的第二輪瀏覽器大戰,IE的份額被蠶食。這次大戰后 Firefox 在北美,歐洲等地區的占有率接近甚至超過了 20%,微軟全球范圍內的份額也從 IE 6 高峰時的 96% 先是下降到 85%,最后 07 年末的時候穩定在 60% 左右,不再是“唯一的瀏覽器”了。但盡管當時 Firefox 的性能遠勝不思進取的 IE,但 Windows 的捆綁優勢太強橫,使 Firefox 一直沒機會從后趕上。

                      直至 2008 年 Google 推出 Chrome 瀏覽器,其卓越的性能、簡潔的介面以及捆綁 Google 搜索的優勢,快速攻城掠地,除了侵蝕原有屬于 Firefox 的市場之外,也同時痛毆老舊的微軟 IE。2012年市占率第一。

                     移動互聯網時代

                      2007年第一代iPhone發布;

                      2008年第一臺Android發布;

                      2014年第五代HTML標準發布;

                      H5是由瀏覽器廠商(opera、蘋果)主導,與W3C合作制定的一整套Web應用規范,至今仍在不斷補充新的草案。我們可以清晰的感受到這一系列規范背后隱含的領導者的勃勃雄心:占領所有屏幕。

                      Google Chrome 的最大對手不再是其它品牌瀏覽器,而是瀏覽器之外的對手──本地應用(Native App)。

                      如此,衍生出了Web App與Native App之爭,在這之前有必要介紹H5的歷史,因為從其中可以窺見決定技術發展取向的基本準則。

                     從H5的發展探知技術發展準則

                      開放

                      從H5發展的歷史進程得到的啟發:HTML從早些年出現的2.0以后的版本都是又W3C來制定并維護。從97年到99年,HTML的版本從3.2快速迭代到了4.01。問題是到了4.01的時候W3C的認識發生了倒退,W3C沒有停止開發這門語言,只不過他們對HTML不再感興趣了。提出了XHMTL的概念,必須把文檔標記為XML,XML與HTML都是一種文檔標記語言,區別是XML的語法更加嚴格,(理論完美)比如屬性必須小寫,值要加引號。致命的是XML的錯誤處理模型:如果解析器遇到錯誤,就停止解析。結果是只要有一處錯誤,瀏覽器就會死掉,用戶將看不到任何網頁內容。

                      違反了重要的設計原理,就是著名的伯斯塔爾法則:發送時要保守,接受時要開放。接受時要開放,真是Web得以構建的基礎。開發瀏覽器的人,必須敞開胸懷去接受所有發送給瀏覽器的東西,包括之前不夠標準、規范的東西,這正是Web的發展動力。從某種角度講,Web走的正是一條混沌發展之路,雖然混沌,卻非常美麗誘人。作為專業人士,在發送文檔的時候要應該保守一些,盡量采用最佳實踐,盡量確保文檔格式良好,但從瀏覽器的角度說,他們必須以開放的姿態去接受任何文檔。所以過于苛刻的錯誤處理模型,使得不符合“接受開放”的法則,與伯斯塔爾法則是對立的。

                      用戶優先

                      因為理念上的不一致,導致04年以Opera為代表的廠商脫離W3C成立WHATWG,重新回到HTML的發展中。之后W3C包括Lee都意識到了方向性的錯誤,結束了不切實際的XHTML標準,也回到了HTML的標準建設中。現在二者同心同德,主要原因是對于H5的設計思想保持統一,其中最具有啟發性也是最重要的一條是:最終用戶優先。這個原理本質上是一種解決沖突的機制。換句話說,當面臨一個要解決的問題時,如果W3C和WHATWG給出了不同的解決方案,一旦遇到沖突,最終用戶優先,然后是作者,其次是實現者,再次是標準制定者,最后才是理論上的完美。理論上的完美,理解為創建出最完美的格式。標準制定者是WHATWG、W3C,實現者是瀏覽器廠商,作者是開發人員,用戶是第一位。

                      根據以上開發者在鏈條中的位置高于實現者,有更高的權重。它最重要,因為承認了用戶的權力,無論是設計一種格式,還是設計軟件,這條原理保證了用戶的發言權。而這條原理也正道出了事物運行的本質,用戶的權力大于作者,作者的權力大于實現者,實現者的權力大于標準制定者。然而,反觀其他規范,如XHTML2,就會發現完全相反的做法,把追求理論的完美放在第一位,而把用戶放在了鏈條的最低端,需要嚴格錯誤處理帶來的各種麻煩。這是一種完全不同的思維方式。

                      開放和用戶優先,是每一個人,無論設計一種格式,還是設計軟件,都要遵循的基礎準則。

                     Web VS Native

                      這一節我們來講移動互聯網下的Native App、Web App之爭。

                      Native App的優點:

                    • Native的原生控件有更好的體驗,比如消息推送,弱網離線使用;
                    • Native有更好的手勢識別;
                    • Native有更合適的線程模型,盡管Web Worker可以解決一部分問題,但如圖像解碼、文本渲染仍無法多線程渲染,這影響了Web的流暢性。
                    • Native能實現更豐富細膩的動畫效果,歸根結底是現階段Native具有更好的人機交互體驗。

                      Web App的優點:

                    • 搜索引擎入口。如果一個產品是內容主導的,可能很多流量是來自搜索引擎,這也可能是mobile web訪問量更多的原因之一。
                    • 即時更新。如果做native app的話,每次版本更新從審核、上架到用戶更新是有一個時間間隔的,很有可能用戶懶得更新,就一直運行著一個很久很久以前的版本,接觸不到新版本里的功能。如果ship的版本有問題的話,大量用戶可能直接就流失了,不像mobile web,有比較快的補救的可能。所以一般來說,mobile native ship的標準會更高。
                    • 設計和開發成本。Native app要為不同的平臺進行設計和開發,有不同的規范和語言,mobile web在這方面的工作量會小很多。

                      綜上,Web優勢是可以reach到更多用戶,而native是優于用戶體驗,黏性更強。

                      所以事實上的表現是,移動 Web 可以觸達的用戶是 App 的三倍之多,但用戶的留存時間卻明顯少于在 App 上的留存時間,Native app用戶每個月花的時間是mobile web用戶的18倍。

                      對于 Native App 來說,其最大的痛點正是web App的優點,由于其天生封閉的基因,內容無法被索引,而這條似乎又無法突破,這會導致后續一系列的問題。例如,用戶想知道紅燒肉的做法,還需要先知道App的名字,下載App后才能獲取內容,這個流程是十分不合理的。而隨著移動互聯網的發展,用戶下載App的熱情也逐漸減弱,再加上用戶80%的時間被Top3的超級App占據,所以也要考慮自己的產品有沒有潛力進入Top3,還是會是在長尾里,去跟許許多多的app競爭那剩下的那幾十分鐘,對于站點來說,應用分發成本也因此越來越高了。

                      移動端的發展進程和PC的歷史如出一轍,一開始都是Native的天下。但瀏覽器試圖取代操作系統的篡位之心從未消減。相比原生應用,Web有太多好處:無須開發兩套或者多套系統版本、無須安裝、無須手動升級、無須審核……而最大的好處以及驅動軟件形態轉向的主要原因是在于降低成本。

                     出路 & 現狀

                      據此,眾多的技術公司使出了各種各樣的奇門遁甲之術,歸納為兩條路。

                      一條路是整合各native。目前的Hybrid、react native、weex等都可以看做Web App在性能方面向Native靠近的嘗試。其中一個最重要的節點是,Facebook在2015.3.26 F8大會上開源了React Native。既擁有Native的用戶體驗、又保留React的開發效率。這個理念似乎迎合了業界普遍存在的痛點,盡管Native開發成本更高,但現階段Native仍然是必須的,因為Web的用戶體驗仍無法超越Native。但也有缺點,比如強依賴于Facebook,有政策風險等等。

                    P.S.
                    React實際是思想上的一次勝出。
                    現在編譯器制作越來越簡單,從語言到語言的翻譯器成本下降,將來javascript(es5)可能會成為一門中間語言,在這之上比如說reason,typescript,es6,java,oc都可以寫。
                    雖然js未必會一統天下,但翻譯器節省了跨語言的成本。

                      另一條路是擁抱web。比如小程序(易從Web遷移),PWA。相對于 Native App 的封閉,PWA 卻是完全開放的——PWA 現有的所有技術都是遵循W3C的標準,完全開放,因此能夠快速被站點接受、被瀏覽器快速支持。

                     2015--PWA

                      對于前期的失利,Web 顯然是不甘心的。想要繼續前進,就必須打造解開枷鎖的鑰匙——Progressive Web App( PWA ) 以及支撐 PWA 的一系列關鍵技術應運而生。其中,Servece Worker是至關重要的一項技術。早在 2014 年, W3C 公布就公布過 Service Worker 的相關草案,但是其在生產環境被 Chrome 支持是在 2015 年。因此,如果我們把 PWA 的關鍵技術之一 Service Worker 的出現作為 PWA 的誕生時間,那就應該是 2015 年。

                      PWA 不是特指某一項技術,而是應用了多項技術的 Web App。其核心技術包括 App Manifest、Service Worker、Web Push、Credential Management API ,等等。其核心目標就是提升 Web App 的性能,改善 Web App 的用戶體驗。

                      在用戶體驗和用戶留存兩方面都提供了非常好的解決方案。PWA 可以將 Web 和 App 各自的優勢融合在一起:漸進式、可響應、可離線、實現類似 App 的交互、即時更新、安全、可以被搜索引擎檢索、可推送、可安裝、可鏈接。

                      其中,App Manifest 讓 Web 站點能被添加到手機桌面,解決了用戶到達站點鏈條太長的問題;Service Worker 讓 Web 站點能夠離線狀態下正常使用,還有能讓用戶離線接受站點消息推送的 Web Push,這兩點非常值得關注。

                      PWA 剛推出時,就獲得了很多大型站點的支持,比如被騰訊戰略投資的印度最大的電商網站 Flipcart,它是第一個大規模應用 PWA 的站點,也取得了非常好的收益,用戶停留時長增長了 3 倍。

                     未來是web的天下

                      Native攜帶著天生封閉的基因,一種頑固而不可逆的特點。

                      而制約Web App的因素也有很多,但我們可以看到Web App一直在不斷修復缺陷、突破局限。網頁調取系統功能,Geolocation API、Camera API……你說網頁不像APP有圖標,safari早就支持在桌面上添加網頁鏈接的快捷圖標;你說網頁必須聯網,現在離線的方案也很多啊;你說Web App性能差,這個……你說得對,也就是這個原因,Native App還能作為主流存在一段時間,可是如果Web App的性能逐漸趕上Native了呢?

                    未來即使不是web的天下,那也一定是屬于開放的、最終用戶優先的、可以降低開發成本的一種技術形態。
                    QQ群:WEB開發者官方群(515171538),驗證消息:10000
                    微信群:加小編微信 849023636 邀請您加入,驗證消息:10000
                    提示:更多精彩內容關注微信公眾號:全棧開發者中心(fsder-com)
                    Web
                    網友評論(共0條評論) 正在載入評論......
                    理智評論文明上網,拒絕惡意謾罵 發表評論 / 共0條評論
                    登錄會員中心
                    福彩试机号今天