前端面试（二）

1、h5新特性？

	(1)	语义化标签：section article aside header footer nav hgroup figure figcaption 							details summary canvas video audio embed source datalist  mark meter output 		progress Time keygen command
	(2)	video/radio  视频/音频
	(3)	canvas 绘画
	(4)	geolocation 定位
	(5)	WebSocket 前后端双向通讯
	(6)	localStorage/sessionStorage代替cookie本地存储
	(7)	文件拖拽（drag事件+dataTransfer+FileReader）
	(8)	WebWorker js多线程,提高性能
	(9)	WebSQL 前端数据库(已被官方弃用)
	(10) manifest 离线缓存

2.HTML5 的离线储存？

localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 数据在浏览器关闭后自动删除。

3.sessionStorage 、localStorage 和 cookie 之间的区别

共同点：都是保存在浏览器端，且同源的。
区别：
	（1）、cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
	（2）、存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
	（3）、数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
	（4）、作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。

4、谈谈 This 对象的理解。

this 是 js 的一个关键字，随着函数使用场合不同，this 的值会发生变化。
但是有一个总原则，那就是 this 指的是调用函数的那个对象。
this 一般情况下：是全局对象 Global。 作为方法调用，那么 this 就是指这个对象

5.flex布局

display:flex;display:-webkit-flex;
该容器有以下六个属性：
	flex-direction (元素排列方向)
	    row, row-reverse, column, column-reverse
	flex-wrap (换行)
	    nowrap, wrap, wrap-reverse
	flex-flow (以上两者的简写)
	    flex-direction || flex-wrap
	justify-content (水平对齐方式)
	    flex-start, flex-end, center, space-between, space-around
	align-items (垂直对齐方式)
	    stretch, flex-start, flex-end, center, baseline
	align-content (多行垂直对齐方式)
	    stretch, flex-start, flex-end, center, space-between, space-around

项目的属性：

	order 排列顺序，数值，默认0  "integer"
	flex-grow ，定义放大比例，默认0，即如果存在剩余空间，也不放大。  "number"
	flex-shrink ，定义缩小比例，默认1，如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。 "number"
	flex-basis 定义项目占据的主轴空间，默认auto。会根据flex-direction定义的主轴（水平或者垂直定义项目本来的大小，跟width或者height一样。flex 推荐，以上三个的缩写，默认 0 1 auto "flex-grow" "flex-shrink" "flex-basis"
	align-self 单个项目有与其他项目不一样的对齐方式，可覆盖align-items "auto","flex-start","flex-end","center","baseline","stretch"