主流框架粗略对照
| 对照类别 | angularjs | angular2+ | vue | react |
|---|---|---|---|---|
| 数据流 | 双向 | 单向 | 单向 | 单向 |
| 状态管理 | vuex | redux+react-redux | ||
| 数据绑定 | 双向（脏值检测） | 双向（[可定制]脏值检测） | 双向（变量劫持+观察订阅模式） | 单向 |
| 体积和性能 | 大 | 大 | 小（vdom） | 小（vdom） |
| 通用app（webapp） | NativeScript、 ionic | ionic2 | react-native | |
| SEO支持 | Angular-universal | Angular-universal | nuxt.js | next.js |
| 测试 | jasmine | jasmine | jest | |
| 优点 | 生态完善 | 简单、效率高 | 组件化提高复用 | |
| 缺点 | 开发周期长，学习成本高 | 生态相对不完善 | React 只是一个 View 层，它是为了优化 DOM 的操作而诞生的 |
可复用的组件
概括起来，就是Vue、Component的组件相对灵活、轻量，添加依赖就可以无缝集成到遗留系统中。对于从0到1的系统，也可以使用新的实践来构建工程，例如ES6、Webpack等技术。Angular4官方推荐使用TypeScript，这需要单独构建和打包，不方便与遗留系统集成。Ember.js自定义了一整套生态，基于CoC理念的设计，采用了前端工程中比较前沿的实践和标准，很难与遗留系统集成，更适合在新项目中使用。至于数据绑定，各有优势。双向绑定在表单交互多的场景中更便捷，单向绑定在管理跟踪记录组件状态时更高效。组件状态更新，各有不同的实现:
- Vue2.js通过定义setter来监听状态变化，特殊场景需要特殊的API支持, 基于virtual DOM的视图更新。
- React在组件的状态或属性的变化后，也是基于virtual DOM的视图更新。
- Angular4在引起状态变化的时刻，框架自动触发脏检查，也可以手动执行脏检查，直接操作HTML DOM更新视图。
- Ember.js提供数据模型，所有数据的操作通过API执行，使用Glimmer引擎进行HTML渲染和更新。
其中，主要的区别是Angular4是通过事件监听，对比数据更新，直接操作DOM来更新视图，而其它都通过Virtual DOM的思路来更新视图。
学习曲线
Vue.js和React的重点更侧重于创建可复用、易于测试、能灵活集成的组件。当然，通过其它扩展组件，以及一些脚手架插件的支持，也可以方便的搭建一个采用最新实践的前端应用的构建框架。它们最大的优点是按需定制，学习曲线平滑，构建出来的应用小而精。
相对来说，Angular4和Ember是大而全的框架，它们更侧重于大型前端工程的构建，为开发人员屏蔽项目构建底层的细节，提出了自己的一套解决方案。使用它们的难点是要度过前期曲线陡峭的学习期，优点是由于使用了标准化的开发方式，后期能极大的提高开发生产力，提升开发效率。
Reference
https://www.zhihu.com/question/35069742
https://www.jianshu.com/p/b2b8161c9565
http://imweb.io/topic/573e766f1156025b1dce9404
h5和原生android的优缺点
| native（原生） | h5 | Hybrid（混合） | |
|---|---|---|---|
| 优点 | 充分发挥系统特性（调用系统服务，内存管理），操控设备硬件（相机、蓝牙、振动器等），提供更好用户体验、界面，适合游戏等性能要求高的应用开发，可访问本地资源。 | 使用web方式制作mobie app最大的好处是，客户端无需更新，而且界面的更新由于是基于html5，可能只需要写几个插件就完成了功能的更新添加。 对于对界面的灵活性有较高要求的app，比较倾向于用web方式实现mobie app。 | 混合方式开发的app拥有上述两者的一些优点,比如Web app的更新迅速,简单,成本低之类的,也能像Native app一样访问本地的很多资源和服务 。 |
| 缺点 | 更新发布版本不方便； 各平台不兼容，多平台的开发、移植比较复杂，开发成本高，开发周期长； 针对多种设备（不同分辨率、不同硬件配置等）的调试和适配较麻烦，开发成本高，开发周期长。 | 受限于手机浏览器的支持。 性能上无法充分发挥系统特性（调用系统服务、内存管理等），无法操控设备硬件（如相机、蓝牙、振动器等）。 | Hybrid App与移动Web App有一些共同的特点。不像纯粹的Native App可直接使用操作系统提供的图形API和用户界面服务，在Hybrid App中，大多数页面由浏览器的渲染引擎来执行——就好比它们是在网页里面。这就意味着，目前，只有以原生方式编写的页面才能获得游戏质量的图形. |
编写h5需要注意什么
https://juejin.im/entry/589810295c497d00560194d8
单个页面内容不能过多
导航栏与底部工具栏会遮挡
标题简短
导航条宽度有限
css动画要加webkit前缀
使用 CSS3 来制作动画效果的话，webkit 前缀一定记得加，要不然在某些手机下动画效果是没有的。
二维码图片不要设置为背景
不然没办法出发长按扫描的功能。
cookie、sessionStorage、localStorage
| 特性 | Cookie | localStorage | sessionStorage |
|---|---|---|---|
| 数据的生命期 | 一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效 | 除非被清除，否则永久保存 | 仅在当前会话下有效，关闭页面或浏览器后被清除 |
| 存放数据大小 | 4K左右 | 一般为5MB | |
| 与服务器端通信 | 每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题 | 仅在客户端（即浏览器）中保存，不参与和服务器的通信 | |
| 易用性 | 需要程序员自己封装，源生的Cookie接口不友好 | 源生接口可以接受，亦可再次封装来对Object和Array有更好的支持 |