從Web到將來

本文是對我在某次公司部門分享的演講稿整理。

文章會以時間軸爲主線，從介紹咱們最爲熟悉的一種承載互聯網技術形態（瀏覽器）的歷史開始，經過對一些重大節點的還原，以史爲鑑，從歷史的沿革總結具備啓發性的準則，來指導咱們一塊兒去看將來技術的發展走向。

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的天下，那也必定是屬於開放的、最終用戶優先的、能夠下降開發成本的一種技術形態。