渲染引擎的職責就是渲染，即在瀏覽器視窗中顯示所請求的內容。
預設情況下，渲染引擎可以顯示html、xml文件及，它也可以借助外掛程式（一種瀏覽器擴充套件）顯示其他型別資料，例如使用pdf閱讀器外掛程式，可以顯示pdf格式，將由專門一章講解外掛程式及擴充套件，這裡只討論渲染引擎最主要的用途——顯示應用了css之後的html及。
渲染引擎首先通過網路獲得所請求文件的內容，通常以8k分塊的方式完成。
下面是渲染引擎在取得內容之後的基本流程：
解析html以構建dom樹->構建render樹->布局render樹->繪製render樹
圖2：渲染引擎基本流程
圖3：webkit主流程
圖4：mozilla的geoko 渲染引擎主流程
從圖3和4中可以看出，儘管webkit和gecko使用的術語稍有不同，他們的主要流程基本相同。gecko稱可見的格式化元素組成的樹為frame樹，每個元素都是乙個frame，webkit則使用render樹這個名詞來命名由渲染物件組成的樹。webkit中元素的定位稱為布局，而gecko中稱為回流。webkit稱利用dom節點及樣式資訊去構建render樹的過程為attachment，gecko在html和dom樹之間附加了一層，這層稱為內容接收器，相當製造dom元素的工廠。下面將討論流程中的各個階段。
跟html的變體xhtml不同，html更寬容，它允許忽略一些特定標籤，有時可以省略開始或結束標籤，這個特點讓html的解析更加困難。
1.使用解析演算法 the parsing algorithm進行符號化和構建樹
符號化是詞法分析的過程，將輸入解析為符號，html的符號包括開始標籤、結束標籤、屬性名及屬性值。
符號識別器識別出符號後，將其傳遞給樹構建器，並讀取下乙個字元，以識別下乙個符號，這樣直到處理完所有輸入。
2.符號識別演算法 the tokenization algorithm
基本示例——符號化下面的html：
hello world
body>
html>
當讀取到「>」，當前的符號就完成了，此時，狀態回到「data state」，「」重複這一處理過程。到這裡，html和body標籤都識別出來了。現在，回到「data state」，讀取「hello world」中的字元「h」將建立並識別出乙個字元符號，這裡會為「hello world」中的每個字元生成乙個字元符號。
這樣直到遇到「」中的「」。然後，產生乙個新的標籤符號並回到「data state」。後面的「」將和「」一樣處理。
圖10：符號化示例輸入
3.樹的構建演算法 tree construction algorithm
來看一下示例中樹的建立過程：
hello world
body>
html>
狀態此時變為「before head」，接收到body符號時，即使這裡沒有head符號，也將自動建立乙個htmlheadelement元素並附加到樹上。
現在，轉到「in head」模式，然後是「after head」。到這裡，body符號會被再次處理，將建立乙個htmlbodyelement並插入到樹中，同時，轉移到「in body」模式。
然後，接收到字串「hello world」的字元符號，第乙個字元將導致建立並插入乙個text節點，其他字元將附加到該節點。
接收到body結束符號時，轉移到「after body」模式，接著接收到html結束符號，這個符號意味著轉移到了「after after body」模式，當接收到檔案結束符時，整個解析過程結束。
步驟就是先生成html解析符號，再將符號構建成element樹
未完待續…
朝辭白帝彩雲間，千里江陵一日還。
兩岸猿聲啼不住，輕舟已過萬重山。
div>
style="padding: 20px 20px; background-color: rgb(250, 192, 143);font-family: simkai;">
李白乘舟將欲行，忽聞岸上踏歌聲。
桃花潭水深千尺，不及汪倫送我情。
div>
style="padding: 20px 20px; background-color: rgb(250, 192, 143);font-family: simkai;">
日照香爐生紫煙，遙看瀑布掛前川。
飛流直下三千尺，疑是銀河落九天。
div>
div>
style="text-shadow: 5px 5px 5px #787878;color: #fff;background-color: #cdc9c9;">
style="margin-right: 10px;">☆span>發：啟程。白帝城：故址在今重慶市奉節縣白帝山上。p>
style="margin-right: 10px;">☆span>踏歌：唐代民間流行的一種手拉手、兩足踏地為節拍的歌舞形式，可以邊走邊唱。p>
style="margin-right: 10px;">☆span>桃花潭：在今安徽涇縣西南一百里。《一統志》謂其深不可測。深千尺：詩人用潭水深千尺比喻汪倫與他的友情，運用了誇張的手法。p>
div>
body>
html>
瀏覽器快取篇
在前端開發中，快取有利於加快網頁的載入速度，同時快取能夠被反覆利用，所以可以減少流量和頻寬的開銷。瀏覽器的快取問題，主要指的是http的快取 即協議層。而h5新增的storage和資料庫快取，那是應用層快取，並不被計入本篇的分析內容裡面。下面我們正式開始來進行快取的分析。協議層的快取，其實，可以被分...
複習html（瀏覽器）
一 doctype的作用 宣告一般位於文件的第一行，他的作用只要告訴瀏覽器以什麼樣的模式來解析文件。一般指定了之後會以標準模式來進行文件解析，否則就一相容模式解析。在標準模式下，都是最新標準。相容模式下都是向後相容的方式來模擬老式瀏覽器的行為，以保證一些老的 的正確訪問 二 http和https的區...
Nginx瀏覽器快取篇
環境 centos7 nginx 1.16.0 expires原理 給http新增cache control expires頭 expires指令控制http應答中的 expires 和 cache control header頭部資訊，啟動控制頁面快取的作用 time 可以使用正數或負數。expi...