HTML

1. 谈谈你对 HTML5 的理解（从语义化方向延伸到新标签）

答：
HTML5的语义化指的是合理使用语义化的标签来创建页面结构，如header,footer,nav，从标签上即可以直观的知道这个标签的作用，而不是滥用div。
新增语义化标签结构标记
header 头部标签
nav 导航标签
article 内容标签
section 定义文档某个区域
aside 侧边栏标签
footer 尾部标签

2.块级元素和行内元素的区别（从布局，还有以及height属性上）

答：
从布局上：行内元素和其他行内元素都会在一条水平线上排列,都是在同一行的;块级元素却总是会 在新的一行，垂直向下排列，若想使其水平方向排序，可使用左右浮动（float：left/right）让其水平方向排列。

从样式上：行内元素不可以设置宽高，宽度高度随文本内容的变化而变化，但是可以设置行高（line-height），同时在设置外边距margin上下无效，左右有效，内填充padding上下无效，左右有效；块级元素可以设置宽高，并且宽度高度以及外边距，内填充都可随意控制

块级元素可以包含行内元素和块级元素，还可以容纳内联元素和其他元素；行内元素不能包含块级元素，只能容纳文本或者其他行内元素。

3.link 和 @import 的区别

答:
1.link标签除了可以加载css外，还可以做很多其他的事情，比如定义JS，定义rel连接属性等，@import只能加载CSS。

2.link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

3.兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的 才能识别，而link标签无此问题，完全兼容。

4.使用dom控制样式时的差别。当时用JavaScript控制dom去改变样式的时候，只能使用link标签， 因为@import不是dom可以控制的（不支持）

5.@import在再次引入样式表时会产生很多的HTTP请求增大服务器压力

4.重绘和重排

一个页面由两部分组成：
DOM：描述该页面的结构
render：描述 DOM 节点 (nodes) 在页面上如何呈现

重绘repaint：当 DOM 元素的属性发生变化 (如 color) 时, 浏览器会通知 render 重新描绘相应的元素,

重排reflow：当 DOM 元素的属性发生变化如果该次变化涉及元素布局 (如 width), 浏览器则抛弃原有属性, 重新计算并把结果传递给 render 以重新描绘页面元素,

PS：重绘重排都会影响浏览器性能尽量避免（课使用读写分离，集中样式改变，）

5.defer 和 async 加载 script 的区别

async属性，表示后续文档的加载和渲染与js脚本的加载和执行是并行进行的，即异步执行；

defer属性，加载后续文档的过程和js脚本的加载(此时仅加载不执行)是并行进行的(异步)，js脚本的执行需要等到文档所有元素解析完成之后，DOMContentLoaded事件触发执行之前

区别：defer属性加载过程中不执行，js脚本的执行需要在稳点所有元素解析完成后DOMContentLoaded事件触发执行之前，async属性边加载边执行

6.有了解过SEO吗?

SEO是搜索引擎的优化，利于网站的搜索排名，能让网站更靠前。百度的竞价排行