瀏覽器：一個家族的奮斗
我是你們每天都要使用的瀏覽器，自從90年代誕生以來，我們這個大家族變得非常的繁榮，在過去的幾十年中，我們一直兢兢業業地幫助你們人類去探索外部的互聯網世界。隨著互聯網和移動互聯網的發展，我們家族終于登上了成功的巔峰：幾乎占據了全球每一臺電腦和手機。
大家只看到表面的光鮮，可是誰知道我們家族在背后充滿血和淚的不懈努力呢？
1起步：從簡單到混亂
最初的時候，我們瀏覽器家族的工作很簡單，就是從遠端的服務器下載HTML頁面到本機，然后按照和你們人類的約定，把充滿標簽的HTML文本轉換成你們容易閱讀的頁面。例如當我們遇到<table>這樣的標簽，我們就展示一個表格，遇到<p>我們就會換行顯示一個新的段落，看到<img>就知道要顯示一個圖片等等。
由于HTML的結構很簡單，我們展示起來也不難，工作相對比較輕松。
可是你們人類很快就不滿足了，嚷嚷著說要看漂亮的頁面，漂亮的布局，就像報紙雜志那樣，分欄、圖文混排......
于是有不少人盯上了<table>這個標簽，這個標簽本來的目的是為了顯示數據用的，像這樣：
但是這些人發現，既然表格能把頁面分成一塊一塊的，那完全可以來做頁面布局啊！比如這個單元格可以作為頁面的頭，那個做左邊欄，右邊欄......等等。
這個口子一開，立刻成星火燎原之勢，再加上那些所見即所得的網頁編輯器（如DreamWeaver,FrontPge）推波助瀾，表格布局大行其道。
這可苦了我們瀏覽器家族，我們經常發現HTML中那些令人恐怖的表格，一個套著一個，我見過最極端的有上百個表格套在一起，組成超級無敵的頁面。為了把這些表格解析、展示出來，我們都是戰戰兢兢、如履薄冰，生怕出什么差錯。
有時候，程序員會忘記寫一些標簽的閉合標簽，例如</a></td>，我們還得猜測、推理、論證，最后展示出來的東西你們還不滿意：這是什么玩意兒，連個HTML都顯示不對！
我們家族的IE同學在這方面的研究可以說是登峰造極，他非常擅長處理這種亂七八糟的情形，他的縱容成功地讓你們把HTML越寫越亂！
2CSS來拯救
終于有一天這樣的HTML頁面連你們人類都看不懂了，你們吵了半天，放了一個“損招”出來：把結構和展示分開！
HTML只負責文檔的結構，一個叫做CSS的東西來控制這個結構到底展示成什么樣子。
在CSS中，程序員只需要用聲明的方式說，這個表格寬度是1px,字體是11px,邊框顏色是#666666，然后你們就不管了，具體怎么實現全部扔給了我們：
- table.gridtable {
- font-family: verdana,arial,sans-serif;
- font-size:11px;
- color:#333333;
- border-width: 1px;
- border-color: #666666;
- border-collapse: collapse;
- }
對于你們來說變簡單了，可是對我們瀏覽器來說就太難了。我們得老老實實地去解析HTML（這HTML有可能還不規范），形成一顆叫做DOM（DocumentObjectModel）的樹，這還不算，還要去解析CSS,形成另外一個叫做CSSOM(CSSObjectModel)的樹，然后把兩棵樹合并成一個“渲染樹”這才能在界面上繪制出來。
現在的CSS都已經出到第三個版本了，可是我們家族還有不少人沒法完整的支持這個規范，尤其是一些老舊的瀏覽器，可見這是多么不容易啊。
3誤入歧途
我們家族也走過一段彎路，那是一段不堪回首的瀏覽器插件的歷史。
當時有人提出HTML+CSS太簡單了，瀏覽器中的頁面沒法和當時的桌面應用相媲美，能不能用擴展一下啊？
最早的嘗試來自于JavaApplet，這也是Java賴以成名，從此走上第一大編程語言的絕技。那幫瘋狂的家伙們竟然在我們這單薄的小身板里安裝了一個Java虛擬機，用于從服務器端下載Java代碼、運行，展示出漂亮的動畫效果。
剛開始的時候我們努力地支持，但是它運行起來慢如蝸牛、丑陋無比。我們那些可愛的用戶也不答應，不去安裝或者禁止使用這傻大笨粗的Java虛擬機，于是JavaApplet就慢慢地銷聲匿跡了。
與此同時，一個叫做流氓插件的毒瘤也迅速地向我們襲來，在你瀏覽網頁的時候，這些流氓靜悄悄地潛入我們的身體，他們傳播病毒、彈出廣告、窺探用戶隱私，并且難于卸載，讓我們痛不欲生。后來數字公司推出了一個保鏢，殺了一個回馬槍，這次把流氓給清除了出去。
當然不能一棍子打死，插件中也有良民，比如Flash,這小子可是風光了好多年，收到了人民群眾的廣泛喜愛，當年出現了很多的Flash小動畫，小視頻，小游戲，我至今還記得有好事者竟然用Flash去做《鹿鼎記》動畫，也不知道他做完沒有。
Flash極為火爆，我們讓他在我們家族寄宿了20多年，直到移動互聯網時代的崛起，尤其是喬布斯的推波助瀾，這才慢慢退出歷史舞臺。
4重裝上陣：JavaScript
向我們家族里安裝插件的嘗試并不成功，但是我們還是想和桌面應用競爭，讓瀏覽器應用有著桌面應用的體驗，這時候有個叫JavaScript的屌絲自告奮勇，說自己可以在瀏覽器中執行代碼，提高頁面的動態性。
剛開始的時候我們并不待見他，本來解析HTML,CSS就夠我們受的了，我們竟然還要去執行JavaScript代碼。尤其煩人的是，JavaScript還可能對DOM進行修改，比如讓某個元素隱藏。唉，我們只好把畫好的元素重新渲染，重新繪制。
不僅是控制界面，JavaScript還要執行邏輯，剛開始的時候我們覺得這小子沒啥用處，無非就是做點簡單的判斷，像什么表單中用戶名不能為空了，密碼和確認密碼兩個輸入框的值必須得相等之類。
后來有人搞了一個叫做AJAX的東西出來，從此發展出一堆類似JQuery、Bootstrap、ExtJS這樣的類庫，瀏覽器中的頁面可用性越來越高，體驗越來越好。
最后隨著前端框架（Angular,Backbone,React等）出現，我們家族在瀏覽器中完全實現了界面的展示和頁面的調整，成功地做了前后端分離，把端服務器做的生意給搶過來一大部分，把他們氣得夠嗆。
5替人類保存數據
HTML來負責結構，CSS負責展示，JavaScript負責行為，這是我們每天要做的三件大事，還有一件重要的事情就是存儲數據。
想當年，人類把HTTP設計成一個沒有狀態的協議，即使是同一個人，在極短的時間內訪問同一個服務器，服務器也會認為這是完全兩個不同的請求，根本不知道是同一個人發出的。
當有成千上萬的人都來訪問同一個服務器的時候，服務器怎么才能把大家區分開呢？要是不區分開，服務器端怎么才能實現購物車的功能？服務器怎么才能記住這個褲子是張三買的，那個羽絨服是李四買的？
后來人類出了一個損招：當用戶使用我們訪問服務器的時候，會給每個用戶都建立一個會話，每個會話都有一個獨一無二的ID。這個ID服務器端會保存，同時也會發回到我們瀏覽器這邊，讓我們暫存起來，美名其曰小餅干(cookie)，聽起來不錯，但是這個小餅干卻不能吃。
當用戶訪問同一網站的時候，我們還得把這個cookie向服務器發送過去，服務器通過cookie取到那個會話ID，于是就知道是誰在訪問它了。
我們保存了這個小餅干，但是大家覺得這個小餅干能保存的數據量太小，于是我們就在瀏覽器中又開辟了兩塊巨大的空間，給JavaScript那小子提供了接口，讓他把字符串存儲到瀏覽器中。
這兩塊空間一個叫localStorage,一個叫sessionStorage。他們倆的用法非常相似，例如：
- localStorage.setItem("username","Andy");
- alert("username="+localStorage.getItem("username"));
這樣以來用戶就可以放心地在我們這里存儲大量的數據了。只不過這個sessionStorage和cookie類似，表示的是一個會話的概念，所以一般來說，頁面一旦關閉，存儲的數據就會消失。
但是這個localStorage就不同了，只要你不把數據刪除，它會一直存在。這引起了我們家族有些人的強烈抗議：如果JavaScript那小子忘記刪除，那垃圾豈不越來越多？
沒辦法，只有拜托各位程序員了，對于無用的數據，及時刪除吧。
6向多媒體和游戲進軍
要讓瀏覽器變成一個和桌面應用相媲美的平臺，僅僅有展示頁面和存儲數據的能力是不夠的。我們決定增加對視頻和音頻的支持，這一次直接撕去了插件的偽裝，“赤裸裸”地在HTML中加了<video>和<audio>這兩個新標簽，從此以后，家族的每個成員都得想辦法去播放音頻和視頻了：
- <videosrc="movie.mp4"width="320"height="240"controls="controls">
你的瀏覽器不支持video標簽
- </video>
- <audiosrc="song.mp3"controls="controls">你的瀏覽器不支持audio標簽</audio>
我們在手機上的瀏覽器兄弟們更加地努力，他們還支持直接調用手機的攝像頭去拍攝照片，這實在是太方便了。
既然都能支持音頻、視頻、攝像頭了，何不更進一步，在瀏覽器中搞一把實時通信？
不用額外安裝插件或者第三方軟件，在兩個瀏覽器之間就能進行語音或者視頻的聊天，這個想法確實是挺激動人心的，我們把它稱為WebRTC。不過這個想法的實現比較困難，雖說我們家族的Chrome再不遺余力地推動，但是要讓我們家族在所有的平臺上（Windows,Android,iOS,mac）都實現了還需要繼續努力。
此外我們還一直惦記著游戲這個令人垂涎三尺的大市場，絕對不能放過！于是我們添加了<canvas>的標簽，意思是畫布，這樣JavaScript那小子就可以在畫布上去繪制路徑、各種形狀、添加圖片......總而言之，程序員終于可以寫出一個只依賴瀏覽器就可以運行的游戲了，完全不用什么Flash。
看看下面這兩個簡單的小游戲，如果我不告訴你，估計你都不知道這完全是HTML+JavaScript做出來的吧：
水果忍者
中國象棋
7讓服務器從被動變為主動
你們人類原來指定的HTTP協議都是從我們這里向服務器端發出請求，然后服務器響應，一個請求，一個響應，嚴格對應。
后來大家發現這樣不好，服務器一直處于被動的地位，服務器端的數據有了變化（例如股票又漲了）后，瀏覽器如果不主動訪問的話是不知道的，所以瀏覽器只好一遍遍不厭其煩地發送請求：
瀏覽器：股票漲了沒有？ 服務器：沒有
瀏覽器：股票漲了沒有？ 服務器：沒有
瀏覽器：股票漲了沒有？ 服務器：沒有
......
瀏覽器：股票漲了沒有？ 服務器：漲了
這種方式叫做輪詢，效率極為低下。
能不能讓服務器向我們主動地推送數據呢？股票一漲，立刻就向瀏覽器推送，瀏覽器即刻展示。
我們和服務器做了多次談判，終于建立了這么一個辦法：雙方建立連接以后就不要斷開了，一直保持住，我們可以通過這個通道向服務器發送數據，服務器也可以主動向我們推送數據。
這個技術，我們把它稱為Websocket。
8總結
CSS,JavaScript,本地存儲，多媒體和游戲，WebSocket......這只是我們家族提供的一部分服務，還有很多其他的服務例如HTML標簽的語義化：我們提供了很多諸如<article>,<section>,<nav>,<aside>,<header>,<footer>這樣的標簽來幫助你們人類更好的定義網頁的結構。
這樣的東西非常非常的多，我想你應該明白我們家族的不斷努力了吧，如果你一邊聽我講一邊在思考，也許會悟出我們的使命：不斷提升應用程序在Web端的體驗。
也許有一天，所有的桌面應用都消失了，全部變成了在瀏覽器中運行的程序，那將是我們瀏覽器家族榮耀的頂峰，我們期待著這一天早日到來。
【本文為51CTO專欄作者“劉欣”的原創稿件，轉載請通過作者微信公眾號coderising獲取授權】
