h5 新增语义化布局标签：header,nav,section,aside,article,footer，均表现为块级
canvas,video,audio,sessionStorage,localStorage,
拖放API(源对象：ondragstart,ondrag,ondragend；源对象标签属性要设置为draggable=true
目标对象：ondragenter,ondragover,ondragleave,ondrop;
ondragover事件默认会屏蔽ondrop事件,
如果要触发ondrop事件，需要在ondragover事件函数中阻止默认屏蔽行为
event.preventDefault()
)
//谷歌浏览器v56 之后，window,document,body的touchstart,touchmove事件会被默认为pssive:true
//解决方法一：window.addEventListener(‘touchstart’,func,{passive:false})
//解决方法二，添加样式：*{touch-action:none} 取消所有元素默认事件

//实现把A标签拖到B标签
1.A标签开始拖动时
ondragstart(event){
  event.dataTransfer.setData('source',event.target.id)
}
2.B标签监听拖拽结束后
ondrop(event){
  var source = document.getElementById(event.dataTransfer.getData('source'))
  event.target.appendChild(source)
}

History常用场景
单页应用中：实现网页无刷新更新数据的同时，解决浏览器无法前进/后退的问题
pushState:每执行一次都会增加一条历史记录，浏览器在返回时，就不会返回前一个页面，并且不会刷新浏览器
replaceState：用来修改当前历史记录，而不是创建一个新的历史记录，点击返回按钮照样会返回上一个页面
onpopstate：点击后退，前进或者调用history.back()，history.forward(),history.go()方法

跨文档通讯

定义：跨文档消息传送，来自不同域的页面间传递消息
使用场景：内嵌框架和其父文档相互进行数据传输或者通讯

postMessage

window.postMessage(message,origin,transfer)
message:发送到子文档的信息，一般转成字符串，否则可能出现浏览器不兼容
origin:域信息，告诉子文档，消息来源，用于判断来源是否匹配，然后才进行相关操作
transfer:转移消息对象，可选参数，是一串和message同时传递的Transferable对象，这些对象的所有权将被转移给消息的接收方，而发送方将不再保有所有权

onmessage

onmessage事件回调函数参数event事件对象
event.data:postMessage传输过来的第一个参数，通常是字符串类型，（也可以是其他类型，但可能出现浏览器不兼容情况，所以一般转成字符串传递）
event.origin:postMessage传输过来的第二个参数，是用来匹配来源方的域
event.source:来源方目标文档的window引用，通常用作单次握手回应数据（event.source.postMessage()）
event.ports:MessageEvent接口特有属性，用于获取消息端口集合对象

实现

父文档A通过iframe内嵌框架加载B子文档
通过iframe内嵌框架的onload事件回调父文档的sendMsg函数
再sendMsg函数中通过postMessage()函数向子文档B发送消息

子文档B监听onmessage事件，当文档收到消息后会执行该事件回调函数
回调函数内通过event对象判断域是否安全，然后处理推送过来的消息，
可以再通过调用event.source.postMessage向父文档发送消息

地理位置

navigator.geolocation.getCurrentPosition(success,error,option)
success:成功得到位置时的回调函数，使用Position对象作为唯一的参数
error:失败时回调，使用PositionError对象作为唯一参数
options：可选参数，对请求做一些配置

离线存储优势

离线浏览：当用户网络断开时，可以继续访问页面
访问速度快：将资源缓存到本地，已缓存资源加载更快
减少服务器负载：浏览器将只会从服务器下载更新过或者更改过的资源

视频播放兼容

Flv.js

H5 Flash(FLV)播放器,纯原生js开发，使H5能够支持FLV格式的视频
原理：将FLV文件流转码复用为ISO BMFF(MP4碎片)片段，然后通过Media Source Extension将MP4片段汇进浏览器
使用es6编写，通过Babel Compiler编译成es5能够支持FLV格式的视频

Video.js

几乎兼容所有浏览器,且优先使用H5，在不支持的浏览器中自动使用Flash播放
构建视频播放页面耗时短，界面可定制，开源，纯JS和css实现，文档详细

#Canvas绘制动画步骤
1.清空canvas
除非接下来要画的内容会完全充满canvas(例如背景图)，否则需要清空所有，最简单
的做法就是clearRect方法
2.保存canvas状态
如果需要改变一些会改变canvas状态的设置(样式，变形之类的)，又要在每画一帧之时，都是原始状态的话，需要先保存一下
3.绘制动画图形
重绘动画帧
4.恢复canvas状态
如果已经保存了canvas的状态，可以先恢复它，然后重绘下一帧

transform

2D功能函数组合使用时，先写的后执行
perspective：100px 可以设置3d旋转时的景深
transform-origin:可以改变中心点

响应式布局

可以通过link标签配置media去使用不同比例的CSS样式

1 2	<link rel='stylesheet' media='screen and (max-device-width:480px)' href='./css1.css'> <link rel='stylesheet' media='screen and (min-device-width:480px)' href='./css2.css'>

一些触摸事件的实现