WEB前端底層知識之瀏覽器是如何工做的

    概述

    對於一直從事B/S（其實我感受BS也是一種CS架構，只不過CS本身寫顯示而BS有相對統一的顯示引擎實現而已）模式WEB領域的開發人員來講，瀏覽器Browser再熟悉不過了。無論你是JAVA流仍是微軟流抑或PHP流，WEB開發新流派。不論你的服務器端採用哪一種業務架構，ORACLE數據庫仍是MSSQL，站在用戶的角度思考，這個纔是他們直接能接觸到的，前端的用戶體驗給了用戶直觀的印象，投其所好，咱們也總少不了要跟它打交道，不少問題的根源皆來源於此，瞭解一下其內部執行原理，也許對咱們的開發工做會事半功倍，從一位純粹的開發人員到一位技術領域的專家，也許就在於這些細節中。

　　接下來的文章系列裏，我將要給你們講述一下瀏覽器是如何在後臺默默工做的。當咱們在瀏覽器地址欄中輸入'oschina.net'直到從瀏覽器視圖區域browser screen見到咱們想要的結果這個過程當中,瀏覽器內部是如何實現的。

　　瀏覽器種類

　　咱們如今常用的主要有5種瀏覽器，Internet Explorer,Firefox,Safari,Chrome跟Opera,包含了市面上3種主流的瀏覽器網頁排版引擎，WebKi（chrome,safari,opera），Gecko（Mozilla，Firefox 等使用的排版引擎）和Trident（也稱爲MSHTML，IE 使用的排版引擎）。（詳見http://www.cnblogs.com/liuzijing688/archive/2008/05/18/1201755.html）。其中Firefox,Chrome ,Safari三款瀏覽器部分源代碼是開源的，一些分析工做正式基於其源碼進行的分析。順便說一句， Chrome等開源瀏覽器市場中所佔的份額愈來愈高（見http://www.w3schools.com/browsers/browsers_stats.asp）， HTML5前端開發利器的推出，HTML支持標準的逐漸統一，IE6(7,8)等低版本的逐漸淘汰，也許日後針對CSS HACK等兼容性場景的需求會愈來愈少，專一於實現而不是專一於兼容，提升咱們的效率，體現思想價值核心，這纔是開發人員真正該乾的事。站在用戶的角度來思考，只是稍微改變一下操做方式換來的是真正的產品易用性與安全性的提高，也是一件好事。

　　瀏覽器的主要職責

　　瀏覽器，咱們每天在用，但是若是哪天面試一個WEB領域的開發，要你說出他的職責，未必人人都能一會兒清楚的表述出來。我以爲瀏覽器的首要功能就是把用戶想要的各類形式WEB資源確認無誤的顯示出來，一般咱們見到的資源格式主要是HTML，固然還包括PDF,圖片，視頻等，資源的定位經過URI來實現（Uniform resource Identifier）。

　　W3C (World Wide Web Consortium) 組織制定了一套HTML/CSS規範，清楚的描述了瀏覽器如何解釋HTML文件以及如何去顯示它，W3C 也是WEB領域標準協議的制定組織。目前咱們常見的HTML主要爲  HTML4.01跟XHTML1.0，由1999年推出(http://www.w3.org/TR/html401/)。 HTML5 規範如今仍處於發展階段，雖然已接近尾聲且各大主流瀏覽器都有所支持，但仍不是很完善。目前CSS也主要是CSS2.0（(http://www.w3.org/TR/CSS2/),     隨着時間的推移，硬件的發展，軟件行業的進步，HTML5/CSS3黃金組合必定會流行起來的，一樣，CSS版本3進行中。之前的瀏覽器市場是百花爭豔，百家齊鳴，每每只支持大部分的規範內容同時還在發展各自的拓展，這對於WEB開發人員和最終用戶來講帶來了嚴重的兼容性問題。幸虧，現現在大多數的瀏覽器漸漸的修正了這一錯誤行爲。

　　各大瀏覽器之間有不少共同點，其中公共的界面元素有：

1. 地址欄
2. 前進，後退按鈕
3. 書籤設置
4. 刷新，中止按鈕
5. 主頁按鈕

　　從瀏覽器界面上來看，沒有相關的規範居然能作到如此的一致，確實很奇怪。這正是各大瀏覽器廠商多年來相互的模仿致使的。HTML5協議並未約束瀏覽器要有哪些界面元素，只是列出了一些經常使用的，好比地址欄，狀態欄，工具欄。固然各瀏覽器都有一些各自的特性，如firefox的下載管理器。更多的介紹起參見之後的Browser User interface（瀏覽器界面元素）章節，此處再也不累牘。

　　上面說了咱們看到的瀏覽器大致狀況，接下來再談談瀏覽器的主要組件有哪些，相互間的關係是怎樣的。

　　瀏覽器的基礎架構

1. 界面元素（或界面控件） – 包括地址欄，前進後退，書籤菜單等窗口上除了網頁顯示區域之外的部分。
2. 瀏覽器引擎 – 查詢與操做渲染引擎的接口。
3. 渲染引擎 – 負責顯示請求的內容。好比請求到HTML, 它會負責解析HTML 與 CSS 並將結果顯示到窗口中。
4. 網絡 – 用於網絡請求, 如HTTP請求。它包括平臺無關的接口和各平臺獨立的實現。
5. UI後端 – 繪製基礎元件，如組合框與窗口。它提供平臺無關的接口，內部使用操做系統的相應實現。
6. JavaScript解釋器。用於解析執行JavaScript代碼。
7. 數據存儲。這是一個持久層。瀏覽器須要把全部數據存到硬盤上，如cookies。新的HTML規範 (HTML5) 規定了一個完整（雖然輕量級）的瀏覽器中的數據庫：’web database’。

　　須要注意的是，與其它瀏覽器不一樣chrome使用多個渲染引擎實例，每一個Tab頁一個，即每一個Tab都是一個獨立進程。

    渲染過程

    用戶請求的資源經過瀏覽器的網絡層到達渲染引擎後，渲染工做開始。每次渲染文檔一般不會超過8K的數據塊，其中基礎的渲染流程圖以下:       

　　

　　渲染引擎首先解析HTML文檔，轉換爲一棵DOM樹，此爲第一步。接下來無論是內聯式，外聯式仍是嵌入式引入的CSS樣式也會被解析，渲染出另一棵用於渲染DOM樹的樹-渲染樹(render tree) ，渲染樹包含帶有顏色，尺寸等顯示屬性的矩形，這些矩形的順序與顯示順序一致。而後就是對渲染樹的每一個節點進行佈局處理，肯定其在屏幕上的顯示位置。最後就是遍歷渲染樹並用上一章提到的ＵＩ後端層將每個節點繪製出來。

　　以上步驟是一個漸進的過程，爲了提升用戶體驗，渲染引擎試圖儘量快的把結果顯示給最終用戶。它不會等到全部ＨＴＭＬ都被解析完才建立並佈局渲染樹。它會在從網絡層獲取文檔內容的同時把已經接收到的局部內容先展現出來。

    更具體的流程可能與不一樣渲染引擎有關，webkit的以下

    

    DOM樹

    DOM對於前端JAVASCRIPT開發人員來講也許再熟悉不過了，DOM全稱爲Document Object Model,即咱們所說的文檔對象模型。咱們能夠把它看作是HTML元素對外的接口，有了這些接口javascript開發人員纔可以實現複雜的頁面功能。DOM樹的根節點是Document對象。

    Render樹 

    瀏覽器在構造DOM樹的同時也在構造着另外一棵樹-Render Tree,與DOM樹相對應暫且叫它Render樹吧，咱們知道DOM樹爲javascript提供了一些列的訪問接口（DOM API），但這棵樹是不對外的。它的主要做用就是把HTML按照必定的佈局與樣式顯示出來，用到了CSS的相關知識。從MVC的角度來講，能夠將render樹當作是V，dom樹當作是M，C則是具體的調度者，比HTMLDocumentParser等。

    DOM樹與Render樹

    能夠這麼說，沒有DOM樹就沒有Render樹，可是它們之間可不是簡單的一對一的關係。咱們已經知道了render樹是用於顯示的，那不可見的元素固然不會在這棵樹中出現了，譬如<header>，您還能想到哪些呢？除此以外，diplay等於none的也不會被顯示在這棵樹裏頭，可是visibility等於hidden的元素是會顯示在這棵樹裏頭的，能夠本身想一下爲何。說了這麼多render樹，咱們還沒見一下它的真容呢，它到底會是個什麼模樣呢？咱們看一下圖。

 

　　與DOM對象類型很豐富啊，什麼head,title,div，而Render樹相對來講就比較單一了，畢竟它的職責就是爲了之後的顯示渲染用嘛。從上圖咱們還能夠看出，有些DOM元素沒有對應的renderer，而有些DOM元素卻對應了好幾個renderer，對應多個renderer的狀況是廣泛存在的，就是爲了解決一個renderer描述不清楚如何顯示出來的問題，譬如select元素，咱們就須要三個renderer，one for the display area, one for the drop down list box and one for the button。

　　上圖中還有一種關係未可看出，即renderer與dom元素的位置也多是不同的。說的就是那些添加了float:---或者position:absolute的元素，由於它們脫離了正常的文檔流順序，構造Render樹的時候會針對它們實際的位置進行構造。

    佈局與顯示

    上面肯定了renderer的樣式規則後，而後就是重要的顯示因素佈局了。當renderer構造出來並添加到render樹上以後，它並無位置跟大小信息，爲它肯定這些信息的過程，咱們就稱之爲佈局。

    拿到一個HTML頁面，明確了頁面要實現的功能以後，首先開始動手作的就是佈局啦，其它譬如背景圖片，字體，文字啦之類的樣式問題還好說，佈局倒是讓人有點感受常常與其打交道卻常常的感受駕馭不了它，至於界面邏輯或者交互設計雖然也比較難可是至少能讓人摸着頭腦，因此有必要細說一下這個佈局。平時你們瀏覽網頁遇到好看的佈局也必定要多花點時間去分析分析它，非前端開發人員多掌握一點界面設計或者交互設計之類的知識何嘗不是一件好事，更況且如今好多狀況都是一套軟件產品從設計到出品整套製造過程都要參與，頗有收縮性。

    瀏覽器進行頁面佈局基本過程是以瀏覽器可見區域爲畫布，左上角爲（0,0）基礎座標，從左到右，從上到下從DOM的根節點開始畫，首先肯定顯示元素的大小跟位置，此過程是經過瀏覽器計算出來的，用戶CSS中定義的量未必就是瀏覽器實際採用的量，除非熟知了瀏覽器的計算規則，但靈活的佈局方式倒是靠經驗等得來的。若是顯示元素有子元素得先去肯定子元素的顯示信息，若是頁面佈局完後有改動能不總體從新佈局就不從新佈局，固然因爲腳本或者用戶操做也有可能隨時會被從新佈局，那就回到了本段路起點。

    高度和寬度

    顯示元素的高度(height)，寬度(width)的肯定。

    最終全部顯示元素被構建成一個盒子相似的東西構成了整個佈局效果，盒子模型效果圖以下：

 

    Box Model詳細描述可見http://www.w3.org/TR/CSS2/box.html

    BOX TYPE

    每一個顯示元素上還有一個重要屬性就是display及z-index，display不一樣的類型使用不一樣的渲染方式，即便沒有手動去指定它自己也會存在一個默認值，具體默認值狀況請參見 http://www.w3.org/TR/CSS2/sample.html.

    定位方案,座標值(left,top)

    Normal--定位基於基本佈局過程，從左到右，從上到下遞增實現。

    Float--脫離正常文檔流，居最左或居最右。

    Absolute--其位置信息由用戶指定。

    有了size（width,height),position(left,top),box type(display:none,inline,block..e.t.c)一個顯示元素基本就最終肯定了。

 

    佈局完成後，瀏覽器將結果渲染出來，最終咱們看到了眼前的頁面。