樹-渲染樹(render tree) ,渲染樹包含帶有顏色,尺寸等顯示屬性的矩形,這些矩形的順序與顯示順序一致。然後就是對渲染樹的每個節點進行布局處理,確定其在螢幕上的顯示位置。最後 就是遍歷渲染樹並用上一章提到的ui後端層將每乙個節點繪製出來。
以上步驟是乙個漸進的過程,為了提高使用者體驗,渲染引擎試圖盡可能快的把結果顯示給終端使用者。它不會等到所有html都被解析完才建立並布局渲染樹。它會在從網路層獲取文件內容的同時把已經接收到的區域性內容先展示出來。
不同渲染引擎具體不同的渲染流程
上面只是介紹了渲染引擎一般的處理流程,針對不同的渲染引擎具體步驟可能有所不同,就拿常見的webkit跟gecko來說吧。
首先是webkit的詳細渲染流程:
火狐等瀏覽器的gecko渲染流程:
從上面兩幅圖可以看出,儘管兩者使用了不同的「專業術語」,但是從圖上可以看出,兩者的渲染過程可謂大同小異,正是於此,我們可以再把具體的過程統一分離出來,接下來的四章會根據四個主要渲染過程進行一下較為細緻的說明。
關於提高瀏覽器渲染頁面速度的建議
瀏覽器載入和渲染html的順序
css的效率和瀏覽器渲染的速度
拾人牙慧:不同瀏覽器如何渲染不同border-style值
了解瀏覽器如何工作 渲染引擎1
從基礎架構上我們也可以看到瀏覽器的重頭戲其實在於渲染引擎 又稱排版引擎 很多頁面相容性問題的根源可以說也皆 於此。好了,那我們深入到渲染引擎內部仔細看一下吧 從基礎架構上我們也可以看到瀏覽器的重頭戲其實在於渲染引擎 又稱排版引擎 很多頁面相容性問題的根源可以說也皆 於此。360瀏覽器html5跑分再...
瀏覽器工作原理2 渲染引擎
介紹 渲染引擎 解析與dom樹構建 渲染樹構建 布局繪製 動態變化 渲染引擎的執行緒 css2可視模型 渲染引擎的職責就是渲染,即在瀏覽器視窗中顯示所請求的內容。預設情況下,渲染引擎可以顯示html xml文件及,它也可以借助外掛程式 一種瀏覽器擴充套件 顯示其他型別資料,例如使用pdf閱讀器外掛程...
瀏覽器工作原理之渲染引擎
備註 文件物件模型 document object model,簡稱dom 1.關於css阻塞 宣告 只有link引入的外部css才能夠產生阻塞。1.style標籤中的樣式 1 由html解析器進行解析 2 不阻塞瀏覽器渲染 可能會產生 閃屏現象 3 不阻塞dom解析 1 由css解析器進行解析。2...