使用H5新標籤重構舊專案時的思考

duck2u發表於2019-02-16
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 {...}

但是，要避免像上面這樣過度限制選擇器，否則瀏覽器將花費更多的時間。

相關文章