從瀏覽器渲染的角度談談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會無端增加瀏覽器在頁面渲染階段的壓力。