标签：对比 预测 dex 表达 z-index hidden 节点 算法 执行
html 语义化主要指的是我们应该使用合适的标签来划分网页内容的结构。html 的本质作用其实就是定义网页文档的结构， 一个语义化的文档，能够使页面的结构更加清晰，易于理解。这样不仅有利于开发者的维护和理解，同时也能够使机器对文档内容进行正确的解读。比如说我们常用的 b 标签和 strong 标签，它们在样式上都是文字的加粗，但是 strong 标签拥有强调的语义。对于一般显示来说，可能我们看上去没有差异，但是对于机器来说，就会有很大的不同。如果用户使用的是屏幕阅读器来访问网页的话，使用 strong 标签就会有明显的语调上的变化，而 b 标签则没有。如果是搜索引擎的爬虫对我们网页进行分析的话，那么它会依赖于 html 标签来确定上下文和各个关键字的权重，一个语义化的文档对爬虫来说是友好的，是有利于爬虫对文档内容解读的，从而有利于我们网站的 SEO 。从 html5 我们可以看出，标准是倾向于以语义化的方式来构建网页的，比如新增了 header 、footer 这些语义标签，删除了 big 、font 这些没有语义的标签。（去掉样式或样式丢失的时候能让页面呈现清晰的结构）
（html本身是没有表现的，我们看到例如<h1>是粗体，字体大小2em，加粗；<strong>是加粗的，不能认为这是html的表现，这些其实是html默认的css样式在起作用，所以去掉样式或样式丢失的时候能让页面呈现清晰的结构不是语义化的有点，但是浏览器都有默认的样式，默认样式的目的也是为了更好的表达html的语义可以说浏览器的默认样式和语义化的html结构是不可分割的)
除了前三种基本选择器，还有一些扩展选择器，包括：
用1表示派生选择器的优先级，用10表示类选择器的优先级，用100表示ID选择器的优先级
//例子
//div.test .span var 优先级为：1+10 +10 +1
//span#xxx .songs li 优先级为：1+100 +10 +1
//下列代码<p>标签内的文字是什么颜色的？
<style>
.classA{
color:blue;
}
.classB{
color:red;
}
</style>
<body>
<p class=‘classB classA‘> 123 </p>
</body>
//答案：red，后面的样式覆盖前面的样式
被点击访问过后的超链接样式不再具有hover和active了，解决办法是改变CSS属性的排列顺序：L-V-H-A（link，visited，hover，active）
针对不同的浏览器写不同的CSS code的过程，就是CSS hack
//实例如下：
#test{
width:300px;
height:300px;
background-color:blue; /*firefox*/
background-color:red\9; /*all ie*/
background-color:yellow; /*ie8*/
+background-color:pink; /*ie7*/
_background-color:orange; /*ie6*/
}
:root #test {background-color:purple\9;} /*ie9*/
@media all and (min-width:0px){#test {background-color:black;}} /*opera*/
}
webkit和Firefox都做了这个优化，当执行JavaScript脚本时，另一个线程解析剩下的文档，并加载后面需要通过网络加载的资源。这种方式可以使资源并行加载从而使整体速度更快。需要注意的是，预解析并不改变DOM树，它将这个工作留给主解析过程，自己直解析外部资源的引用，比如外部脚本、样式表及图片
理论上，既然样式表不改变 DOM 树，也就没有必要停下文档的解析等待它们，然而，存在一个问题，JavaScript 脚本执行时可能在文档的解析过程中请求样式信息，如果样式还没有加载和解析，脚本将得到错误的值，显然这将会导致很多问题。
所以如果浏览器尚未完成 CSSOM 的下载和构建，而我们却想在此时运行脚本，那么浏览器将延迟 JavaScript 脚本执行和文档的解析，直至其完成 CSSOM 的下载和构建。也就是说，在这种情况下，浏览器会先下载和构建 CSSOM，然后再执行 JavaScript，最后再继续文档的解析。
为尽快完成首次渲染，我们需要最大限度减小以下三种可变因素：
优化关键渲染路径的常规步骤如下：
常见引起回流属性和方法：（任何会改变元素几何信息（元素的位置和尺寸大小）的操作，都会触发回流）
回流必定会发生重绘，重绘不一定会引发回流。回流所需的成本比重绘高的多，改变父节点里的子节点很可能会导致父节点的一系列回流
常见引起重绘属性和方法：
| color | border-style | visibility | background | text-decoration | background-image |
| bacground-positiong | background-repeat | outline-color | outline | outline-style | border-radius |
| outline-width | box-shadow | background-size |
常见引起回流属性和方法：
| width | height | margin | padding | display | border |
| position | overflow | clientWidth | clientHeight | clientTop | clientLeft |
| offsetWidth | offsetHeight | offsetTop | offsetLeft | scrollWidth | scrollHeight |
| scrollTop | scrollLeft | scrollIntoView() | scrollTo() | getComputedStyle() | getBoundingClientRect（） |
| scrollIntoViewIfNeeded() |
一些DOM的操作或者属性访问可能会引起页面的回流和重绘，从而引起性能上的消耗
当初始的HTML文档被完全加载和解析完成之后，DOMContentLoaded事件被触发，而无需等待样式表、图像和子框架的加载完成。Load事件是当所有资源加载完成后触发的
HTML5现在已经不是SGML的子集，主要是关于图像，位置，存储，多任务等功能的增加
新增的有：
移除的元素有：
<!--[if lt IE 9]> <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script><![endif]-->从页面显示效果来看，被<b>和<strong>包围的文字将会被加粗，而被<i>和<em>包围的文字将以斜体的形式呈现。但是<b><i>是自然样式标签，分别表示无意义的加粗，无意义的斜体，表现样式为{font-weight:bolder}，仅仅表示“这里该用粗体显示”或者“这里该用斜体显示”，此两个标签在HTML4.01中并不被推荐使用。而<em>和<strong>是语义样式标签。<em>表示一般的强调文本，而<strong>表示比<em>语义更强调文本。使用阅读设备阅读网页时：<strong>会重读，而<b>是展示强调内容
在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件
原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制（不是存储技术），通过这个文件上的解析清单利息那存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被利息那存储的数据进行页面展示。
如何使用：
<html lang="en" manifest="index.manifest">CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
// CACHE: 表示需要离线存储的资源列表，由于包含 manifest 文件的页面将被自动离线存储，所以不需要把页面自身也列出来
//NETWORK: 表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。不过，如果在 CACHE 和 NETWORK 中有一个相同的资源，那么这个资源还是会被离线存储，也就是说 CACHE 的优先级更高
// FALLBACK: 表示如果访问第一个资源失败，那么就使用第二个资源来替换他，比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了，那么就去访问 offline.html
在线的情况下，浏览器发现 html 头部有 manifest 属性，它会请求 manifest 文件，如果是第一次访问 app ，那么浏览器就会根据 manifest 文件的内容下载相应的资源并且进行离线存储。如果已经访问过 app 并且资源已经离线存储了，那么浏览器 就会使用离线的资源加载页面，然后浏览器会对比新的 manifest 文件与旧的 manifest 文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储
离线的情况下，浏览器就直接使用离线存储的资源
iframe 元素会创建包含另外一个文档的内联框架（即行内框架）
主要缺点有：
label 标签来定义表单控制间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上
//例如：
<label for="Name">Number:</label>
<input type=“text“ name="Name" id="Name"/>
autocomplete 属性规定输入字段是否应该启用自动完成功能。默认为启用，设置为 autocomplete=off 可以关闭该功能。自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。autocomplete 属性适用于
