從瀏覽器渲染的角度談談html標籤的語義化

大家都看過報紙或者雜誌的排版，裡面最主要的一些概念，就是版面的分割，標題的分級等等，web頁面作為一種資訊展示的形式，其基本的排版形式是從報紙雜誌等傳統媒介借鑑過來的，看一看html一些常用的tag就可以知道，比如h1-h6，p，img等等。

html的語義化從字面的意思來看，就是你選用的tag要儘可能的符合它適用的場景。為什麼要語義化呢？可以從瀏覽器開始說起，報紙和雜誌作為資訊的載體是通過印刷機將其呈現在大眾面前的，同理html是通過瀏覽器的介面將其展現在使用者面前的。html頁面展現在我們面前主要經過一下幾個步驟：

1、在位址列輸入url發起請求獲取 2、伺服器分返回html頁面 3、瀏覽器解析html頁面 4、瀏覽器渲染html頁面

只有到了第4步，一個html頁面才真真整整的呈現在使用者的面前。

大家在用表單的時候，可能會注意到，type為text的input，即使不設定樣式，它在瀏覽器中呈現的出的也是一個有邊框，背景為白色的矩形框，感興趣的可以看看textarea，select等等。為什會這樣？

以chrome為例，大家都知道webkit，同時一定也聽過V8引擎，在這裡要澄清一下，webkit是開源的瀏覽器渲染引擎，而V8是javascript的解析引擎。這裡主要說一下，瀏覽器在收到伺服器返回的html頁面之後，首先將html解析成DOM樹，然後再利用css的資訊結合DOM樹，生成一個渲染樹，然後瀏覽器再通過自己的UI後端元件呼叫作業系統的繪圖介面在瀏覽器視窗依據渲染樹的資訊繪製相應的圖形，因此在window視窗就能看到input，textarea的預設樣式了。

瞭解瀏覽器對於html頁面的解析繪製的過程之後，我們知道了瀏覽器的渲染引擎對於特定的標籤都有預設的繪圖樣式，使用非語義的tag會無端增加瀏覽器在頁面渲染階段的壓力。