JS展望之 - 提升用户体验

如何提供更好的用户体验？

做的更好的用户交互

随着移动 Web 的要求提高，人们希望有着类似于移动应用的用户体验。过去，在移动 Web 领域使用 Tap 事件来代替 Click 事件只是一个开始——使用 FastClick 这样的库来规避 Click 事件的延迟。

手势交互： 下拉时刷新在移动 Web 上已经不是新鲜的事，我们还要类似于微信的左右滑动切换不同的页面，除此还会有旋转、缩放等功能。

适配屏幕大小： 对于移动设备来说，屏幕是个大问题，应用既要支持 iPhone 这样的小屏幕，还要匹配上 iPad 这样的设备。可以使用媒体查询来解决，但设置合适的字体还是问题。px、em 已经很难满足要求了，我们还需要 rem 这样可以根据网页的根元素来设置字体大小的单位。

更流畅的体验

与桌面相比，移动 Web 页面对流畅度有着更高的要求，这主要是受限于移动设备。尽管新 iPhone 提供了相当快的处理能力，各大 Android 设备生产商在竞争中也在不断提高设备的处理能力，但是仍然有相当多的用户使用旧版移动设备。

在移动网页上，除了采用支持 Virtual DOM 的框架来提高性能，还可以采用 Virtual Scroll 机制——只渲染足够填充 Viewport 大小的数据集，页面滚动时再渲染新数据，以此改善移动端列表页面数据过多的问题。

除了对于页面本身的优化，还有相当多的内容是对于资源和 API 优化。Facebook 创建了 GraphQL 来减少 API 的请求，一次请求多个需要的 API；Netflix 创建了 Falcor 来合并多个数据源。这些都可以加快移动应用的响应速度，除此我们还注意到 Service worker 开始受到开发者追棒。

Service worker 是在 Web 应用和浏览器与网络之间的代理服务器，旨在创建更好的离线体验。并且可以依据当前网络是否可用、服务器是否有内容更新来采取合适的策略。同时它还支持通知推送及后台 API。