众所周知移动网站在开发、迭代版本方面，比原生APP更具有优势，但是在用户体验方面却逊色很多。用户体验差表现在哪些方面呢？主要是 互动（interaction）和动画（animation）这两方面。
那么为什么我们不能把移动web的用户体验做得更好呢？这还得从web的性能瓶颈说起 …
1. 移动网站为什么不能拥有原生般的体验？
阮一峰老师在他的 《也许，DOM 不是答案》一文中分析了移动 web 性能瓶颈的几个原因：
- Web基于DOM，而DOM加载很慢
- DOM拖慢JavaScript，因为所有的 DOM 操作都是同步的，一个操作没完，后面的操作都需要等待
- 网页是单线程的
- 网页没有硬件加速，网页由CPU处理，没用GPU图形加速。
这些原因对于 PC 端 网站没有太大影响。但是手机硬件资源有限，用户互动又相对频繁，于是跟原生应用相比，自然就出现了明显的不足。
2. 怎样做，移动网站才能拥有更好的用户体验？
既然 DOM 操作有性能瓶颈，要想突破这个瓶颈就只能抛弃 DOM 换用其他的解决方案了。
FlipBoard原本是一个手机App，他们的 Web 版本 没有使用DOM，而是将整个网站用canvas输出！
可以用手机打开 flipboard.com 体验一下，我觉得它里面的各种手势操作已经很流畅了，体验基本已经快要接近原生了。
这个方案的出发点是这样的：如果将网页变成了一个个canvas，用户就等于在跟图片互动，这样就绕开了DOM，降低了操作时滞。而且，canvas可以被硬件加速，这样就提高了性能。具体的技术细节，可以参考原文。canvas的转化基于React框架实现，FlipBoard 开发了一个专门的库 React-canvas，已经开源。
3. web 的未来
PC 时代，web 在与 原生应用的角逐中占了上风。
到了移动互联网时代，原生应用又凭借良好的用户体验现在又跟 web 平分秋色了。
那么未来又会是怎样呢？如果我们能再多出几种像 flipboard 这种的性能解决方案，相信我们 web 还会在下一个时代，再次打败原生应用独占鳌头。
参考文章：
更多文章，可以访问: 我的csdn博客
- 本文作者： 敲完代码再睡觉
- 本文链接： https://teamonn.github.io/2017/05/05/make-mobile-web-look-likes-app/
- 版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！