title
abstract
content
comments
username
content
username
content
摘要：最基本的元素选择器比如选择器比如类选择器比如在代码中常常用到，还有一些偶尔用到的兄弟选择器比如子选择器比如通用选择器。显然，关键选择器中类选择器会比标签选择器匹配更少的元素，浏览器能够更快的找到它们并渲染。
常用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，其原理类似。
IE浏览器需要respond.js配合才能实现对媒体查询（media query）的支持。
但是，要注意以下几点：
respond.js与跨域css的问题需要额外做一些跨域的配置。
respond.js不能在通过file://协议访问的页面上发挥正常的功能，务必通过http（https）协议访问页面。
respond.js不支持@import引入的css文件。
上面的方案解决了HTML 5新增结构元素和媒体查询的兼容问题，与此同时，尽量直接让IE浏览器运行最新的渲染模式。
如果是国内的浏览器，一般都同时支持兼容模式（IE内核）和高速模式（webkit内核），可以通过以下方式让国产浏览器默认采用高速模式渲染页面。
不要使用section、article作为div的替代品在使用HTML 5新增结构标签的过程中，新的结构标签能够较快的布局出页面骨架（skeleton），HTML代码的可读性和清晰度大大的提高，但是它们仅限于帮助构建文档概要的语义部分，如果是样式容器还是继续使用div。
CSS选择器效率问题title
abstract
content
comments
username
content
username
content
对我们大多数人来说，CSS选择器并不陌生。最基本的元素选择器（比如div）、ID选择器（比如#id）、类选择器（比如.class）在CSS代码中常常用到，还有一些偶尔用到的兄弟选择器（比如h2+p）、子选择器（比如ul>li）、通用选择器（*）。诸多的选择器类型导致选择同一个DOM元素的选择器会有多种，至于选择哪种，可以从高效的角度考虑来形成平时编写CSS选择器的规范。
单个选择器单个CSS选择器的效率从高到低的排序如下：
ID选择器（#id）
类选择器（.class）
元素选择器（div）
兄弟选择器（h2+p）
子选择器（ul>li）
后代选择器（ul li a）
通配符选择器（*）
属性选择器（type="text"）
伪类/伪元素选择器（a:hover）
组合选择器然而在实际应用场景中，更多用到是的组合选择器。组合选择器在被浏览器解析的时候是从右到左的方式，所以组合选择器里最右边的选择器（关键选择器）在效率方面起决定性作用，这样就可以根据单个选择器的效率选择在关键选择器处使用哪种类型的选择器了。
#links a {...}
#links a.link {...}
显然，关键选择器中a.link类选择器会比a标签选择器匹配更少的元素，浏览器能够更快的找到它们并渲染。
html body .wrapper #nav li a {...}
但是，要避免像上面这样过度限制选择器，否则浏览器将花费更多的时间。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/96322.html
摘要：最基本的元素选择器比如选择器比如类选择器比如在代码中常常用到，还有一些偶尔用到的兄弟选择器比如子选择器比如通用选择器。显然，关键选择器中类选择器会比标签选择器匹配更少的元素，浏览器能够更快的找到它们并渲染。 常用H5结构标签 在HTML 5中，为了解决文档结构不够清晰、明确，追加了很多跟结构相关的元素。 header元素 header元素是一种具有引导和导航作用的结构元素，通常用来放置...
摘要：难以通过重构手法完成设计的改动先想像重构的情况。何时不该重构现有代码根本不能正常运作。现在，我可以修改这个子类而不必承担午一中影响另一处的风险。 重构：对软件内部结构的一种调整，目的是再不改变软件的可观察行为的前提下，提高其可理解性，降低其修改成本。 两顶帽子 添加新功能 添加新功能时不应该修改既有代码，只管添加新功能，通过测试重构 重构时你就不能再添加功能，只管改进程序结构，此时...
摘要：写在前面月到这天，前端提升营，腾讯大佬们分享个人经验，使出各种前端方面的大招。并且减轻服务器的负担，的原则是按需取数据，可以最大程度的减少冗余请求和响应对服务器造成的负担。控制表单控件的禁用状态。 写在前面 5月24到30这7天，IMWeb前端提升营，腾讯大佬们分享个人经验，使出各种前端方面的大招。从中学习了很多前端方面的知识，也get到了前端学习的方法论，还有一些算法知识等等。 现将...
阅读 3813·2021-10-12 10:11
阅读 3637·2021-09-13 10:27
阅读 2539·2019-08-30 15:53
阅读 1972·2019-08-29 18:33
阅读 2189·2019-08-29 14:03
阅读 994·2019-08-29 13:27
阅读 3316·2019-08-28 18:07
阅读 763·2019-08-26 13:23
