关于HTML5新特性的一些知识和面试相关点

HTML5新特性

html5新特性?
1.语义化标签,比如header,nav,section,main,aside,article,footer.
2.音视频,比如audio,video.
3.画布canvas,矢量图svg.
4.画布canvas的api有fillStyle,fillRect,getContext,moveTo(x,y),lineTo(x,y).
5.本地存储localStorage和sessionStorage.
6.web worker.

2.语义化的好处?
1.语义化代码分块清晰,便于维护.
2.页面结构清晰,便于浏览器搜索引擎解析
3.便于搜索引擎爬取,利于SEO.

什么是Canvas?

HTML5<canvas>元素用于图形的绘制,通过脚本javascript来完成.
<canvas>标签只是图形容器,必须使用脚本来绘制.

Canvas常用的api有哪些?

• getContext：返回一个指定canvas的绘画环境对象
• beginPath：开始绘制
• moveTo：移动画笔位置
• lineTo：用来画线段
• stroke：用来实施绘制的操作
• lineStyle：设置线段的样式
• closePath：结束绘制

4.web worker有什么作用?应用场景有哪些?

Web Workers 使得一个Web应用程序可以在执行主线程时，开启一个子线程，且子线程的操作不受主线程的影响,这样做的好处是可以在一个单独的子线程中执行费时的处理任务结束后把结果返回给主线程，从而允许主(通常是UI)线程运行而不被阻塞.(好处:主线程可以把计算密集型的高延迟的任务交给worker线程执行，这样主线程就会变得轻松，不会被阻塞或拖慢).

• 大数据处理
• 耗费时间较长的操作

HTML5的WebStorage提供了两种API：localStorage（本地存储和sessionStorage（会话存储)

5.浏览器之本地缓存存储localStorage和sessionStorage之间的区别:

生命周期的不同:localStorage存储的一直在浏览器中,除非用户手动清除,而sessionStorage则当浏览器关闭或tab页面关闭时存储的数据就会销毁(仅仅存储在当前页面).

setItem(key,value)---保存数据,以键值对的方式存储信息
getItem(key)--获取数据,将键值传入即可获取到对应的value值
removeItem(key) —— 删除单个数据，根据键值移除对应的信息
clear() —— 删除所有的数据
key(index) —— 获取某个索引的key