使用H5新標籤重構舊項目時的思考

經常使用H5結構標籤

在HTML 5中，爲了解決文檔結構不夠清晰、明確，追加了不少跟結構相關的元素。

header元素

header元素是一種具備引導和導航做用的結構元素，一般用來放置整個頁面或頁面內的一個內容區塊的標題，但也能夠包含其餘內容，例如數據表格、搜索表單或相關的LOGO圖片。

nav元素

nav元素是一個能夠用來做爲頁面導航的連接組，其中的導航元素連接到其餘頁面或當前頁面的其餘部分。

main元素

main元素表示網頁中的主要內容。主要內容區域指與網頁標題或應用程序中本頁面主要功能直接相關或進行擴展的內容。

section元素

section元素用來對網站或應用程序中頁面上的內容進行分塊，一個section元素一般由內容及其標題組成。

article元素

article元素表明文檔、頁面或應用程序中獨立的、完整的、能夠獨自被外部引用的內容。

aside元素

aside元素用來表示當前頁面或文章的附屬信息部分，它能夠包含當前頁面或主要內容相關的引用、側邊欄、廣告、導航條，以及其餘相似的有別於主要內容的部分。

footer元素

footer元素能夠做爲其上層父級內容區塊或一個根區塊的腳註。footer一般包括其相關區塊的腳註信息，如做者、相關閱讀連接以及版權信息等。

新標籤如何向下兼容

兼容HTML 5新增結構元素和媒體查詢

因爲IE8及更早的IE瀏覽器不能解析HTML 5新增的結構元素，因此須要經過document.createElement來建立並設置默認樣式display:block來進行兼容處理。還有更簡單的辦法就是引入html5shiv，其原理相似。

<!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>
<![endif]-->

IE瀏覽器須要respond.js配合才能實現對媒體查詢（media query）的支持。

<!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

可是，要注意如下幾點：

• respond.js與跨域css的問題須要額外作一些跨域的配置。
• respond.js不能在經過file://協議訪問的頁面上發揮正常的功能，務必經過http（https）協議訪問頁面。
• respond.js不支持@import引入的css文件。

上面的方案解決了HTML 5新增結構元素和媒體查詢的兼容問題，與此同時，儘可能直接讓IE瀏覽器運行最新的渲染模式。

<meta http-equiv="X-UA-Compatible" content="IE=edge">

若是是國內的瀏覽器，通常都同時支持兼容模式（IE內核）和高速模式（webkit內核），能夠經過如下方式讓國產瀏覽器默認採用高速模式渲染頁面。

<meta name="renderer" content="webkit">

不要使用section、article做爲div的替代品

在使用HTML 5新增結構標籤的過程當中，新的結構標籤可以較快的佈局出頁面骨架（skeleton），HTML代碼的可讀性和清晰度大大的提升，可是它們僅限於幫助構建文檔概要的語義部分，若是是樣式容器仍是繼續使用div。

<article>
        <header>
            <h1>title</h1>
            <p>abstract</p>
        </header>
        <p>content</p>
        <section>
            <h2>comments</h2>
            <article>
                <header>
                    <div class="avatar"></div>
                    <h3>username</h3>
                </header>
                <p>content</p>
            </article>
            <article>
                <header>
                    <div class="avatar"></div>
                    <h3>username</h3>
                </header>
                <p>content</p>
            </article>
        </section>
    </article>

CSS選擇器效率問題

對咱們大多數人來講，CSS選擇器並不陌生。最基本的元素選擇器（好比div）、ID選擇器（好比#id）、類選擇器（好比.class）在CSS代碼中經常用到，還有一些偶爾用到的兄弟選擇器（好比h2+p）、子選擇器（好比ul>li）、通用選擇器（*）。諸多的選擇器類型致使選擇同一個DOM元素的選擇器會有多種，至於選擇哪一種，能夠從高效的角度考慮來造成平時編寫CSS選擇器的規範。

單個選擇器

單個CSS選擇器的效率從高到低的排序以下：

1. ID選擇器（#id）
2. 類選擇器（.class）
3. 元素選擇器（div）
4. 兄弟選擇器（h2+p）
5. 子選擇器（ul>li）
6. 後代選擇器（ul li a）
7. 通配符選擇器（*）
8. 屬性選擇器（type='text'）
9. 僞類/僞元素選擇器（a:hover）

組合選擇器

然而在實際應用場景中，更多用到是的組合選擇器。組合選擇器在被瀏覽器解析的時候是從右到左的方式，因此組合選擇器裏最右邊的選擇器（關鍵選擇器）在效率方面起決定性做用，這樣就能夠根據單個選擇器的效率選擇在關鍵選擇器處使用哪一種類型的選擇器了。

#links a {...}
#links a.link {...}

顯然，關鍵選擇器中a.link類選擇器會比a標籤選擇器匹配更少的元素，瀏覽器可以更快的找到它們並渲染。

html body .wrapper #nav li a {...}

可是，要避免像上面這樣過分限制選擇器，不然瀏覽器將花費更多的時間。