在前端開發中，頁面渲染指什麼？

01-02

網頁加速中經常提到的

廢話少說，先來看個圖：

從上面這個圖中，我們可以看到那麼幾個事：

1）瀏覽器會解析三個東西：

一個是HTML/SVG/XHTML，事實上，Webkit有三個C++的類對應這三類文檔。解析這三種文件會產生一個DOM Tree。

CSS，解析CSS會產生CSS規則樹。

Javascript，腳本，主要是通過DOM API和CSSOM API來操作DOM Tree和CSS Rule Tree.

2）解析完成後，瀏覽器引擎會通過DOM Tree 和 CSS Rule Tree 來構造 Rendering Tree。注意：

Rendering Tree 渲染樹並不等同於DOM樹，因為一些像Header或display:none的東西就沒必要放在渲染樹中了。

CSS 的 Rule Tree主要是為了完成匹配並把CSS Rule附加上Rendering Tree上的每個Element。也就是DOM結點。也就是所謂的Frame。

然後，計算每個Frame（也就是每個Element）的位置，這又叫layout和reflow過程。

3）最後通過調用操作系統Native GUI的API繪製。

DOM解析

HTML的DOM Tree解析如下：

&Web page parsing&

This is an example Web page.&

上面這段HTML會解析成這樣：

下面是另一個有SVG標籤的情況。

CSS解析

CSS的解析大概是下面這個樣子（下面主要說的是Gecko也就是Firefox的玩法），假設我們有下面的HTML文檔：

&A few quotes&

Franklin said that &"A penny saved is a penny earned."&

FDR said &"We have nothing to fear but &fear itself.&"&

於是DOM Tree是這個樣子：

然後我們的CSS文檔是這樣的：

/* rule 1 */ doc { display: block; text-indent: 1em; }

/* rule 2 */ title { display: block; font-size: 3em; }

/* rule 3 */ para { display: block; }

/* rule 4 */ [class="emph"] { font-style: italic; }

於是我們的CSS Rule Tree會是這個樣子：

注意，圖中的第4條規則出現了兩次，一次是獨立的，一次是在規則3的子結點。所以，我們可以知道，建立CSS Rule Tree是需要比照著DOM Tree來的。CSS匹配DOM Tree主要是從右到左解析CSS的Selector，好多人以為這個事會比較快，其實並不一定。關鍵還看我們的CSS的Selector怎麼寫了。

注意：CSS匹配HTML元素是一個相當複雜和有性能問題的事情。所以，你就會在N多地方看到很多人都告訴你，DOM樹要小，CSS盡量用id和class，千萬不要過渡層疊下去，……

通過這兩個樹，我們可以得到一個叫Style Context Tree，也就是下面這樣（把CSS Rule結點Attach到DOM Tree上）：

所以，Firefox基本上來說是通過CSS 解析生成 CSS Rule Tree，然後，通過比對DOM生成Style Context Tree，然後Firefox通過把Style Context Tree和其Render Tree（Frame Tree）關聯上，就完成了。注意：Render Tree會把一些不可見的結點去除掉。而Firefox中所謂的Frame就是一個DOM結點，不要被其名字所迷惑了。

註：Webkit不像Firefox要用兩個樹來干這個，Webkit也有Style對象，它直接把這個Style對象存在了相應的DOM結點上了。

渲染

渲染的流程基本上如下（黃色的四個步驟）：

計算CSS樣式

構建Render Tree

Layout – 定位坐標和大小，是否換行，各種position, overflow, z-index屬性 ……

正式開畫

選自：http://coolshell.cn/articles/9666.html

來源：

CSS森林(CSS Forest): 瀏覽器工作原理淺析

瀏覽器這邊做的工作大致分為以下幾步：

載入：根據請求的URL進行域名解析，向伺服器發起請求，接收文件（HTML、JS、CSS、圖象等）。

解析：對載入到的資源（HTML、JS、CSS等）進行語法解析，建議相應的內部數據結構（比如HTML的DOM樹，JS的（對象）屬性表，CSS的樣式規則等等）

渲染：構建渲染樹，對各個元素進行位置計算、樣式計算等等，然後根據渲染樹對頁面進行渲染（可以理解為「畫」元素）

這幾個過程不是完全孤立的，會有交叉，比如HTML載入後就會進行解析，然後拉取HTML中指定的CSS、JS等。

頁面渲染就是瀏覽器將HTML變成人眼看到的圖像的全過程。

通常開發的時候說的render，就是產生HTML並把它塞進DOM的過程，有時候也專指通過一些代碼邏輯生成想要的HTML的過程。

從瀏覽器底層的角度來說，Render其實是指paiting的過程，也就是解析DOM並把它在屏幕上打出來的過程。

當xhtml，css，js文件被載入進瀏覽器後，執行的就是頁面渲染，瀏覽器會讓這些代碼能夠變成你看到的那個樣子。

同意前面陳遠航的回答

舉例子：

你要吃個菜，你找到廚師說，我要尖椒肉絲。

廚師就去翻菜譜，炒給你吃。

你是瀏覽者

菜是你將看到的頁面

廚師是瀏覽器

菜譜是程序員寫的頁面代碼

炒菜的過程，就是頁面渲染。

渲染大致分為兩部分，一部分是排版，一部分是繪製。排版就是根據文檔流，加上浮動、定位等屬性，確定各個盒子的位置還有尺寸。繪製就是將css的屬性例如字體、背景色、圓角等等按照給定的方式呈現出來。各個瀏覽器的渲染效率不一樣。

頁面渲染，就是瀏覽器將請求返回的頁面資源（HTML文本，圖像，動畫，視頻，音頻等）基於一定的規則（CSS語句，JS語句，瀏覽器本身的一些規則等）完成頁面布局及繪製的過程。

瀏覽器有自己的渲染器，當瀏覽網頁時，瀏覽器會載入HTML,CSS,JAVASCRIPT到本地，然後根據自己的渲染器渲染出頁面效果，各個瀏覽器的渲染機制不完全相同，這也是同樣的代碼在不同瀏覽器有時會有不同的效果的原因。

直接看這邊blog，有點長，也有中文版的，但是建議看英文版，最好有一點點的編譯基礎什麼的http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#The_browsers_we_will_talk_about 不用謝！！！！

PS：好吧，我沒有看過中文版的~~

頁面載入資源原理

http://www.douban.com/note/153864670/

http://gent.ilcore.com/2011/05/how-web-page-loads.html

將JSON數據生成DOM的過程

前段時間學習了這篇博客

前端必讀：瀏覽器內部工作原理

說得非常詳細，看完對於內部工作原理只能理解個大概，不過至於渲染還是比較好理解的，大致就是將代碼構解析某個結構然後展示在瀏覽器頁面的過程，包括HTML代碼構造成dom樹啊，css的樣式構造renders樹啊，就是瀏覽器一步步畫圖的過程。我覺得前端中的渲染和別的領域中的渲染核心上的意思是差不多的。

對於開發人員來說，就是修改dom，不同的做法對執行效率有很大影響