提高web性能之--高效使用HTML標籤和CSS樣式

基本原理：

HTML是一門用來描述網頁的一種語言，它使用標記標籤來描述網頁，作爲一名合格的前端開發，你有必要去知道其常用標籤代表的含義(SEO)和屬性(表現形式)。

CSS指層疊樣式表 (Cascading Style Sheets)，如果說把頁面想象成一個人，HTML就是人的骨架，CSS就是人的衣裝，一個人的品味從他的衣裝就能一目瞭然。

一名專業的前端開發也是一名優秀的重構，因爲在頁面中經常會有各種不合理的嵌套和重複定義的CSS樣式，我不是要你重構頁面，只是希望你在碰到這種情況的時候解決這些問題。如這樣的HTML：

<table><tr><td>
<table><tr><td>
...
</td></tr></table>
</td></tr></table>

或者這樣的CSS:

body .box .border ul li p strong span{color:#000}

以上都是對HTML和CSS非常糟糕的使用方法。

正確理解：

HTML是一門標記語言，使用合理的HTML標籤前你必須瞭解其屬性，比如Flow Elements，Metadata Elements ，Phrasing Elements。比較基礎的就是得知道塊級元素和內聯元素、盒模型、SEO方面的知識。

CSS是用來渲染頁面的，也是存在渲染效率的問題。CSS選擇符是從右向左進行匹配的，這裏對css選擇符按照開銷從小到大的順序梳理一下：

◆ ID選擇符 #box

◆ 類選擇符 .box

◆ 標籤 div

◆ 僞類和僞元素 a:hover

當頁面被觸發引起迴流(reflow)的時候，低效的選擇符依然會引發更高的開銷，所以請避免低效。