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

可是，要避免像上面这样过分限制选择器，不然浏览器将花费更多的时间。