架构的目的：
满足产品质量和交付，团队快速协作(根据技术水平)，性能最优化。
构建思路（技术选型→协作开发→优化）：
1.第一阶段：库/框架选型
库(lib)特点：专业性、被动调用、不控制流程；
框架(frameword)：集成了多个库、控制程序生命周期、控制流程；
库或框架作用：高效率、兼容性、设计的合理性。
解决的痛点：DOM、通信、模板、路由、架构
DOM: jQuery、zepto.js 、手势Hammer.js、局部滚动iscroll.js、视频Video.js
通信： jQuery、socket.io(支持二进制、后台多语言支持)
模板：artTemplate、dustjs
路由： page.JS(类似Express.Router 的路由规则的前端路由库)
机理：监听URL变化→js切换跳转→历史管理
实现：location.hash +hashchange事件
history.pushState(null,null,新路径) +popstate事件（H5的api,有历史记录）
架构：MVC、MVVM、MV*，也是流行框架的设计思想，目的是解耦（通过事件、分层等实现,提供范式进行模块解耦、视图和模型分离、扩展性。
2.第二阶段：JS/CSS模块化&组件化开发（团队协作、分而治之）
模块化方案：AMD、commonJS、ES6 module；
组件化开发：用html+css+js构成具有独立视图和功能的文件包，拿来即用。
3.第三阶段：优化（高性能）
大体上有缓存控制、按需加载(懒加载)、同步/异步加载、移动端首屏CSS内嵌、图片Base64编码这些啦，在脚手架配置的同时，协作人员再共同遵守；
①减少HTTP请求（图片Base64编码、合并JS和CSS）
②添加Expires或Cache-control头（设置文件缓存）
③CSS文件顶部引入（避免无样式闪烁、白屏）
④JS文件底部引入（避免阻塞，优先DOM渲染）
⑤三层分离（方便扩展维护，代码重用）
⑥压缩文件（精简减小体积）
⑦避免重定向
⑧静态资源管理---前后端配合管理
