自从 HTML5 降生以后，关于 Web App 和 Native App 的议论就从未间断过，孰优孰劣人人各不相谋。但作为前端开辟者的我们，内心实际上是邃晓的，这个天下是你们的（Native App），也是我们（Web App）的，但究竟照样我们的，假如几十年后再回头看这一起的话，会发明你们不过是一插罢了。哈哈哈哈哈哈
但如今摆在面前的事实是，Native App 比 Web App 的市场大，人人更情愿去用 Java 或许 OC ，而不情愿用 Js。人人都不喜好用 Web App ，究其原因不过就两点：兼容性、慢。
那我们就来谈谈慢这个题目。但貌似这个题目很巨大，这里就谈一些我相识的东西。
进步页面加载速率，这个题目陈词滥调了，什么多域名、CDN、组件化、seajs都是解决方法，淘宝首页就是个很好的案例。这里我们就不再赘述，网上许多别的相干的材料。
动画才是我们本日要议论的主要内容：怎样做到 60fps。
60pfs 这是CRT显现器的革新频次，也是人眼觉得不到卡顿的频次，也就是每秒 60 帧，每帧的时刻距离是 16ms。然后我们相识一下浏览器的衬着机制，盘算机须要在 16ms 内完成下面这些使命：
- 盘算 Js
- 浏览器盘算 layout
- 画图 paint
- 在 GPU 上拼合图层 composite
第一步 JS 盘算是由开辟者掌握的，在这里的操纵会影响到下面三步。在前端机能上我们常常碰到的题目就是回流，这就是由于开辟者挪用了一些要领触发了 layout，然后浏览器就接着 paint、composite。
所以在做动画的时刻，不要用 JS 做盘算密集型的使命，jQuery 返回的对象做好缓存，防止屡次挪用。layout 能不触发就不触发，paint 能不触发就不触发。那怎么做才只触发 composite 呢？ opacity 和 transform 这两个属性是不会触发 layout 和 paint 的。所以作为前端开辟，我们很喜好也很乐于做透明度淡入淡出，由于这个不会用太大的机能题目。
有的同砚就要问了：咦？color 和 box-shadow 这些也不涉及到 layout 啊，那我能够大规模的应用吗？
答案是不可，为何呢？由于在 layout、paint 和 composite 中，最斲丧机能的就是 paint。详细有多斲丧呢？
上面是我翻开一个带有视差转动效果的 medium 页面后，从上向下转动时发生的数据，个中绿色部份就是 paint + composite。能够看到在桌面上，视差转动委曲到达 60fps，如许的机能在手机上肯定是惨绝人寰的。其实在视差转动中，元素的色彩大小位置都没有转变，理论上是不须要 repaint 的，那末怎样才防止它呢？
个中一种要领就是建立新的 layer，但这类要领有肯定的价值，个中最着名的就是在高 DPI 屏幕下字体显现题目，另有子元素position:fixed错位等等一些事变。
上面的图片就是在 surface pro3 + chrome 接见 feedly 的截图，能够显著的看到笔墨发虚。
日子照样要过的，Native App 也是要被打败的，那末怎么办呢？
Flipboard 开辟团队就发清楚明了一种丧尽天良的方法：用 canvas 衬着。Canvas 直接与 GPU 打交道，衬着速率非常快。但在使用过程中照样有许多挂念的，下面是会碰到的一些题目：
- 笔墨换行怎样处置惩罚
- 图片须要加载后才放入 canvas
- 元素层级怎样处置惩罚
- 自定义字体
- 怎样排版
尤其是排版题目，CSS已很成熟了，本身建立别的机制来排版无疑是搬石头砸本身的脚。所以 Flipboard 开辟小组就将 DOM 和 Canvas 合二为一，应用 DOM 的排版上风和 Canvas 的衬着上风。
如今用手机接见 Flipboard 就能够看到他们的这一效果了，其要领就是文档构造根据一般的 DOM 来，然则不加任何的色彩款式，然后把这一层透明度改成 0 。在其上层再到场一层 canvas ，用来显现衬着的效果。效果照样很不错的：
总的来说，将来照样很灼烁的，虽然 web app 有林林总总的机能题目，但它照样向着越来越好的方向生长。只需我们适宜的应用浏览器给我们的资本，我们照样能够做出优异的效果的。
参考文章：
参考视频：
