sroll-snap-type 可能算得上是新的滚动规范里面最核心的一个属性样式。
scroll-snap-type：属性定义在滚动容器中的一个临时点（snap point）如何被严格的执行。
光看定义有点难理解，简单而言，这个属性规定了一个容器是否对内部滚动动作进行捕捉，并且规定了如何去处理滚动结束状态。让滚动操作结束后，元素停止在适合的位置。
看个简单示例：
当然，scroll-snap-type 用法非常多，可控制优化的点很多，限于篇幅无法一一展开，具体更详细的用法可以看看我的另外一篇文章 -- 使用 sroll-snap-type 优化滚动
控制滚动层级，避免页面大量重排这个优化可能稍微有一点难理解。需要了解 CSS 渲染优化的相关知识。
先说结论，控制滚动层级的意思是尽量让需要进行 CSS 动画（可以是元素的动画，也可以是容器的滚动）的元素的 z-index 保持在页面最上方，避免浏览器创建不必要的图形层（GraphicsLayer），能够很好的提升渲染性能。
这一点怎么理解呢，一个元素触发创建一个 Graphics Layer 层的其中一个因素是：
元素有一个 z-index 较低且包含一个复合层的兄弟元素
根据上述这点，我们对滚动性能进行优化的时候，需要注意两点：
通过生成独立的 GraphicsLayer，利用 GPU 加速，提升滚动的性能
如果本身滚动没有性能问题，不需要独立的 GraphicsLayer，也要注意滚动容器的层级，避免因为层级过高而被其他创建了 GraphicsLayer 的元素合并，被动的生成一个 Graphics Layer ，影响页面整体的渲染性能
如果你对这点还有点懵，可以看看这篇文章 -- 你所不知道的 CSS 动画技巧与细节
点击交互优化在用户点击交互方面，也有一些有意思的小细节。
优化手势 -- 不同场景应用不同 cursor对于不同的内容，最好给与不同的 cursor 样式，CSS 原生提供非常多种常用的手势。
在不同的场景使用不同的鼠标手势，符合用户的习惯与预期，可以很好的提升用户的交互体验。
首先对于按钮，就至少会有 3 种不同的 cursor，分别是可点击，不可点击，等待中：
{ cursor: pointer; // 可点击 cursor: not-allowed; // 不可点击 cursor: wait; // loading }除此之外，还有一些常见的，对于一些可输入的 Input 框，使用 cursor: text，对于提示 Tips 类使用 cursor: help，放大缩小图片 zoom-in、zoom-out 等等：
一些常用的简单列一列：
按钮可点击: cursor: pointer
按钮禁止点击：cursor: not-allowed
等待 Loading 状态：cursor: wait
输入框：cursor: text;
图片查看器可放大可缩小：cursor: zoom-in/ zoom-out
提示：cursor: help;
当然，实际 cursor 还支持非常多种，可以在 MDN 或者下面这个 CodePen Demo 中查看这里看完整的列表：
CodePen Demo -- Cursor Demo
点击区域优化 -- 伪元素扩大点击区域按钮是我们网页设计中十分重要的一环，而按钮的设计也与用户体验息息相关。
考虑这样一个场景，在摇晃的车厢上或者是单手操作着屏幕，有的时候一个按钮，死活也点不到。
让用户更容易的点击到按钮无疑能很好的增加用户体验及可提升页面的访问性，尤其是在移动端，按钮通常都很小，但是受限于设计稿或者整体 UI 风格，我们不能直接去改变按钮元素的高宽。
那么这个时候有什么办法在不改变按钮原本大小的情况下去增加他的点击热区呢？
这里，伪元素也是可以代表其宿主元素来响应的鼠标交互事件的。借助伪元素可以轻松帮我们实现，我们可以这样写：
.btn::befoer{ content:""; position:absolute; top:-10px; right:-10px; bottom:-10px; left:-10px; }当然，在 PC 端下这样子看起来有点奇怪，但是合理的用在点击区域较小的移动端则能取到十分好的效果，效果如下：