從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的天下，那也一定是屬於開放的、終端使用者優先的、可以降低開發成本的一種技術形態。