瀏覽器渲染過程

hlcc 發布于2019-08-23 13:41 / 3293人閱讀

摘要：在這個過程中，中可能會通過去引入其他相應的資源，比如的資源，這個時候瀏覽器可能就會兵法的向服務器去請求這個相關的靜態資源，請求回來后通過解析器對其進行解析，從而生成一個樹，去和樹進行結合生成一個，進一步的進行一個布局，最終進行繪制。

網頁內容的組成

doctype: 提供瀏覽器的html版本信息

head : html頭部

meta: 元數據信息

charset: 聲明當前文檔所實用的字符編碼

http-equiv: 客戶端行為，如渲染模式，緩存等

name[keywords]: 搜索引擎關鍵字

name[description]: 搜索引擎描述

name[viewport]: 瀏覽器視口設置

link

script: 需要在body前完成加載或運行的腳本

body: html實體

script: 需要在body解析時加載或運行的腳本

渲染需要做的工作

通過上面的圖可以知道，網頁內容首先會被html解析器解析成一個DOM樹，實際上html是我們最先會通過網址向服務器請求回來的，請求回來的html從字節流轉成字符流，我們的瀏覽器實際拿到的就是一個字符流，然后瀏覽器通過詞法分析對輸入字節流進行逐字掃描，根據構詞規則識別單詞和符號，分詞，生成相應的token，之后會將這些token通過nextToken()添加到dom樹中去。所以html解析是從上到下對文檔進行一個此法分析，所以它首先遇到html標簽的時候會對html生成一個token，這個token會被標記成一個startTag的類型，對于header的花也會被標記成startTag，但是它會聲稱為headerToken，就是說對于不同類型的html標簽格式，在詞法分析的過程中，會解析成一個相應的對象，然后token類型會被瀏覽器解析，最后會將token類型append到dom樹上去。

在這個過程中，html中可能會通過link去引入其他相應的資源，比如css的資源，這個時候瀏覽器可能就會兵法的向服務器去請求這個相關的靜態資源，請求回來后通過css解析器對其進行解析，從而生成一個css樹，去和dom樹進行結合生成一個render Tree，進一步的進行一個布局，最終進行繪制。

加載

css的加載不會阻塞dom解析，但是會阻塞頁面渲染，所以一般把css加載放在頭部

css會去阻塞js的執行，就是說css資源在加載完之前，js的執行會被阻塞，但是css不會阻塞js腳本的加載

js會去阻塞頁面dom的解析

js不阻塞資源的加載

js順序執行，阻塞后續js邏輯的執行

云服務器 GPU云服務器 jsp 瀏覽器渲染云渲染平臺視頻渲染代渲染 3d渲染

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99373.html

瀏覽器渲染那些事之 Reflow、Repaint

摘要：原文鏈接瀏覽器渲染那些事之瀏覽器內核渲染引擎在各個瀏覽器廠商你追我趕的形勢下，截止今日，產生了很多不同的瀏覽器，各個瀏覽器本質大同小異，核心部分基本相似，由渲染引擎和引擎組成。原文鏈接瀏覽器渲染那些事之 Reflow、Repaint 瀏覽器內核（渲染引擎）在各個瀏覽器廠商你追我趕的形勢下，截止今日，產生了很多不同的瀏覽器，各個瀏覽器本質大同小異，核心部分基本相似，由渲染引擎和 J...

morgan 2019-08-29 12:19 評論0 收藏0
你不知道的瀏覽器頁面渲染機制

摘要：前言瀏覽器的內核是指支持瀏覽器運行的最核心的程序，分為兩個部分的，一是渲染引擎，另一個是引擎。渲染引擎在不同的瀏覽器中也不是都相同的。接下來就是瀏覽器的渲染過程。布局完成后，瀏覽器會立即發出和事件，將渲染樹轉換成屏幕上的像素。前言瀏覽器的內核是指支持瀏覽器運行的最核心的程序，分為兩個部分的，一是渲染引擎，另一個是JS引擎。渲染引擎在不同的瀏覽器中也不是都相同的。目前市面上常見的瀏覽...

zhunjiee 2019-08-23 16:50 評論0 收藏0
你不知道的瀏覽器頁面渲染機制

摘要：前言瀏覽器的內核是指支持瀏覽器運行的最核心的程序，分為兩個部分的，一是渲染引擎，另一個是引擎。渲染引擎在不同的瀏覽器中也不是都相同的。接下來就是瀏覽器的渲染過程。布局完成后，瀏覽器會立即發出和事件，將渲染樹轉換成屏幕上的像素。前言瀏覽器的內核是指支持瀏覽器運行的最核心的程序，分為兩個部分的，一是渲染引擎，另一個是JS引擎。渲染引擎在不同的瀏覽器中也不是都相同的。目前市面上常見的瀏覽...

aboutU 2019-08-19 11:36 評論0 收藏0
瀏覽器渲染頁面過程與頁面優化

摘要：由一道面試題引發的思考從用戶輸入瀏覽器輸入到頁面最后呈現有哪些過程一道很常規的題目，考的是基本網絡原理，和瀏覽器加載，過程。所以抽出時間研究下瀏覽器渲染頁面的過程。由一道面試題引發的思考：從用戶輸入瀏覽器輸入url到頁面最后呈現有哪些過程？一道很常規的題目，考的是基本網絡原理，和瀏覽器加載css，js過程。答案大致如下：用戶輸入URL地址瀏覽器解析URL解析出主機名瀏覽...

djfml 2019-08-29 12:58 評論0 收藏0
面試題之從敲入 URL 到瀏覽器渲染完成

摘要：響應由三個部分組成，分別是狀態行消息報頭響應正文。詳情參考小汪之前寫的文章瀏覽器內核之解釋器和模型解釋解釋過程是指從字符串經過解釋器處理后變成渲染引擎內部規則的表示過程。 showImg(https://segmentfault.com/img/remote/1460000016404846); 前言小汪最近在看【WebKit 技術內幕】一書，說實話，這本書寫的太官方了，不通俗易懂。...

MAX_zuo 2019-08-23 11:59 評論0 收藏0