什么是網頁

首先,我們知道網頁是由html+css+javascript三大部分組成的,我們可以形象的把網頁比喻成一個人,html就是他的樣子,根據內容來形容他的高矮胖瘦,css就是他的外表,他的著裝是否華麗,五官是否精美,那么JavaScript的就相當于人的行為與動作.所以通過html、css、javascript可以組成一個完整的網頁。

那瀏覽器流程是怎樣的呢？

我們先來看看下面這幅圖

image.png

從上面的圖可以看出，瀏覽器會解析三個東西

一個是HTML，解析它時會產生一個DOM Tree。
CSS，解析CSS， 構建 CSSOM  Tree。
Javascript，腳本，主要是通過DOM API和CSSOM API來操作DOM Tree和CSS Rule Tree.

解析完成后，瀏覽器引擎會通過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繪制。