passive touch event，will-change，css containment三个前沿的前端API介绍使用

web技术日新月异，新的标准或API不断涌现帮助开发者构建性能更佳的应用，下面汇总几个例子及其应用场景。

1. passive touch event

顺滑滚动对网页的良好体验非常重要，但如果js里监听了touchstart或touchmove事件，浏览器会等待这些事件的回调函数执行完后才决定是否继续滚动，如果回调函数里阻止了事件（preventDefault()），就不继续滚动，由此，如果回调函数执行事件长，势必会造成卡顿。

如果能保证不会阻止事件（preventDefault()），浏览器就不用等待事件的回调函数执行完。只需在监听事件时第三个参数参入passive为true，就能解决卡顿的问题。

 addEventListener(document, "touchstart", function(e) {
    console.log(e.defaultPrevented);  // will be false
    e.preventDefault();   // does nothing since the listener is passive
    console.log(e.defaultPrevented);  // still false
  }, Modernizr.passiveeventlisteners ? {passive: true} : false);

这里有个 具体项目(请在h5浏览器打开)中的例子，向上滑动显示底部下载栏，向下滑动隐藏底部下载栏，回调函数里需要计算页面滚动的方向，以及对底部下载栏的显示或隐藏，还是有点负担的。

这种情况确实是不需要阻止滚动的，所以使用passive touch event，能获得性能上的提升。

2. will-change

现在很多开发者使用css transitions, transforms和animations来做动画，那如何提升动画的性能呢？will-change能帮上忙。

那什么是will-change呢

will-change属性能提前通知浏览器将要对元素做的改动，浏览器就提前准备起来，比如提前创建渲染层，这样改动正在发生时，就能省去了许多准备工作，而且该层是在GPU渲染的，总之性能上会有所提升。

这个有个 动画的例子，点击按钮会移动圆，使用chrome dev工具捕获细节，就能发现有没有will-change的区别。

没有will-change

有will-change

有will-change时，动画的那个元素是在GPU里渲染后合并图层。

3. css containment

开发者添加或删减元素，改变属性或类名，触发动画，浏览器大部分情况下没法区别这部分的改动会不会对另一部分有影响，会需要检查整个DOM树。

新的css containment属性允许开发者限制节点的绘制、布局的作用域，一些独立的或者第三方的模块最好加上css containment。

以下以contain:layout为例讲解下。

「外部不会影响拥有这个属性的元素的内部布局，反之亦然。 」

用 例子讲解下，点击按钮，圆圈元素移动，使用chrome dev工具捕获细节

没有contain:layout

有contain:layout

快去应用这些使你应用快得飞起的属性吧。