1 Html5新特性

• 语义化标签：footer、nav、aside、header
• 新增多媒体标签：<audio>、<video>
• canvas（画布）、Geolocation（地理定位）
• input标签的新属性：placeholder、autocomplete、autofocus、requierd

2 ES6新特性

1. 扩展运算符
2. 块级作用域
3. promise异步操作
4. 箭头函数
5. set和map
6. 模板字符串
7. 解构表达式

3 HTML页面的渲染过程

1. 浏览器解析HTML标签，创建DOM树
2. 浏览器解析CSS样式，创建CSSOM树
3. 由DOM树和CSSOM树组成渲染树，它和DOM树类似，不过DOM树与标签一一对应，而渲染树会忽略掉不需要渲染的元素
4. 一旦渲染树创建好，浏览器就根据渲染树将页面渲染至屏幕

重绘：当某个元素样式改变，会发生重绘，重绘不一定发生重排

重排：元素样式改变引起页面布局发生变化，就会发生重排

如何减少重绘和重排？

• 将多次改变样式的属性合并为一次操作
• 如果需要对一个元素进行复杂操作，那么可以先对其设置display：none，最后再设置display：block让其显示，这样只会触发两次重排
• 需要多次重排的元素，可以让其脱离文档流存在，即设置position：fixed或absolute

4 BFC是什么？

BFC为块级格式化上下文，它是一个独立渲染区域，区域内元素与外界元素不会相互影响

如何形成BFC？

1. float存在且不为none
2. overflow存在且不为visible
3. display为inline-block、block、flex
4. position为absolute或fixed

特性：

1. 容器内部元素不会影响外部
2. 盒子垂直排列，垂直间距由margin决定
3. 相邻块级盒子外边距发生折叠
4. BFC区域能够识别浮动元素，计算其区域高度时，浮动元素也会参与计算

5 水平垂直居中样式

（1）未知宽高元素 div{
    
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
}
（2）flex布局（父元素设置） div{
    
	display:flex;
	justify-content:center;
	align-items:center;
}

(3)grid布局（父元素设置） div{
    
	display:grid;
	place-items:center;	//justify-content和align-items的合写
}

6 CSS权重

1. id选择器
2. 属性选择器、类选择器、伪类选择器
3. 标签选择器、伪元素选择器

内联样式和！import具有更高的权重

7 +和~有什么不同

+匹配最近的一个兄弟元素
~匹配之后的所有兄弟元素

8 new操作符做了什么

9 手写new操作符

10 箭头函数与普通函数有什么区别