{"action":"opened","issue":{"url":"https://api.github.com/repos/SoXnix/Front-end-day-by-day/issues/7","repository_url":"https://api.github.com/repos/SoXnix/Front-end-day-by-day","labels_url":"https://api.github.com/repos/SoXnix/Front-end-day-by-day/issues/7/labels{/name}","comments_url":"https://api.github.com/repos/SoXnix/Front-end-day-by-day/issues/7/comments","events_url":"https://api.github.com/repos/SoXnix/Front-end-day-by-day/issues/7/events","html_url":"https://github.com/SoXnix/Front-end-day-by-day/issues/7","id":157931012,"number":7,"title":"Hybrid App 优化笔记","user":{"login":"XueSeason","id":6612558,"avatar_url":"https://avatars.githubusercontent.com/u/6612558?v=3","gravatar_id":"","url":"https://api.github.com/users/XueSeason","html_url":"https://github.com/XueSeason","followers_url":"https://api.github.com/users/XueSeason/followers","following_url":"https://api.github.com/users/XueSeason/following{/other_user}","gists_url":"https://api.github.com/users/XueSeason/gists{/gist_id}","starred_url":"https://api.github.com/users/XueSeason/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/XueSeason/subscriptions","organizations_url":"https://api.github.com/users/XueSeason/orgs","repos_url":"https://api.github.com/users/XueSeason/repos","events_url":"https://api.github.com/users/XueSeason/events{/privacy}","received_events_url":"https://api.github.com/users/XueSeason/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2016-06-01T15:05:59Z","updated_at":"2016-06-01T15:05:59Z","closed_at":null,"body":"混合型 App 优化的地方需要注意的细节有挺多地方，这里我把自己未来这一个月的工作感受都汇总到这里，方便大家参考。  \r\n\r\n## 框架的选择\r\n技术选型上，我对比了 Angular、React 和 Vue 三个框架，就在前天之前，我是没学习过 Vue 的。Angular 1.x 版本性能问题和大体积带来的流量问题第一个被我放弃掉，4月初我有学习过 Angular 2.0，相对于 1.x 版本有了很大的进步，但是考虑到依旧处于 Beta 版本，不敢冒险投入到生产环境中。  \r\nReact 是个非常好的框架，可能是从 iOS 转过来的缘故吧，JSX 语法并没有那么反人类，而且在刚来小影的第一个项目就是用 React + Ant + Koa 这套技术栈基本完成了 Growth hacking 的数据报表页面的雏形。整个开发过程并没有遇到特别大的问题，基本上官方文档也写得足够详细。如果作为移动开发，React 是一个好的选择。但是就来说说这次为什么选择 Vue 的原因，首先 React 是通过重新渲染 Vitural DOM ，然后和原生 DOM 进行 diff 比较，修改不同的节点这样一个工作原理。这里带来了一个问题就是直接操作原生 DOM 不是特别方便，虽然有 refs 和 findDOMNode 这些方式，但是写起来感觉还是不够优雅，而且这样就完全享受不到 Vitural DOM 带来的好处。第二个原因就是 React 是单向数据流，这样做看起来业务逻辑更加清晰，其实间接地带来另一个坑，就是不好管理各个组件的状态，而且组件之间的交互也变得困难。虽然 Flux 规范的框架一定程度上缓解了问题，但是同样带来了学习的成本。Redux 实现 FLux 规范，统一通过 state tree 来管理状态，每个行为触发一个 action，dispatch 分发 action 从而 reduce 出一个新的 state，state 一旦发生变化，就带来视图的重新渲染。上面这一套流程，对于刚接触 Redux 的童鞋来说，多少会有点懵逼。  \r\n最后说说我为什么选择 Vue，首先 Vue 是 MVVM 框架，双向绑定非常便捷，但是底层实现通过将普通 data 改造为 getter/setter 的属性的 data，然后通过一个 watcher 当做 DOM 和 Model 之间的媒介，从而达到一旦数据发生改变就通知视图重新渲染，视图上修改的数据同样反向通知 Model 进行同步修改。这样维护视图数据就变得非常轻松。然后一个原因就是 Vue 足够的轻量，而且性能突出。这两个特点简直太适合移动端的开发，流量是非常重要的一个因素，作为用户，谁也不希望打开一个页面需要加载好几MB的资源文件吧。和 App 合作的童鞋刚好也是支付宝过来的，他的要求就是一个页面尽量不要超过 200 kb。在流量方面后续还会有更多要讲，这里就点到为止。其实性能不是体现在 JS 的执行上，而是体现在 DOM 操作上，Vue 在 DOM 渲染上的优化工作实现起来非常简单，主要优化体现在列表循环等，官方文档有详细说明，这里不再赘述。总之，Vue 既有 Angular 的 MVVM 实现，同时也有指令、过滤器等特性，同时有像 React 的组件化开发体验，而且比 Angular 轻量高速、比 React 更方便操控 DOM。这就是我选择 Vue 的原因。\r\n\r\n## Native 方面的优化\r\n首先我们要知道 Hybrid App 的一套工作流程，Hybrid App 并非套壳浏览器这么简单。Native 层会构造出一个容器，用来呈现静态网页。这个容器内部有一个浏览器，一般内核为 Webkit。容器载入静态网页后，会注入一段 JS 脚本，通过这个脚本来实现 Native 和 JS 的交互。Native 这边预先设置调用原生 API 的接口，Web 层通过注册相应的事件，触发对应的回调函数。\r\n\r\n-- 待续"}}
{"actor":{"display_login":"XueSeason"}}