使用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 {...}

但是，要避免像上面这样过度限制选择器，否则浏览器将花费更多的时间。