# Web开发架构的变迁

# 前端开发架构

现在的 Web 应用程序除了外观比过去更好看以外，应用程序的架构和创建方式已经和过去有很大的不同。为突出这点，我们来看看如下的应用：

这是一个简单的商品目录浏览应用程序，它和这种类型的其它应用程序一样，通常包含一个主页、一个搜索结果页、一个详情页等等。

前端可以做到：读写数据、切换视图、用户交互，这意味着，网页其实是一个应用程序。

2010年后，前端工程师从开发页面，变成了开发“前端应用”（跑在浏览器里面的应用程序）。

如果你几年前做过这种应用程序，可能会采用包含多个单页面的方式。页面流可能会像下面这样：

在多页设计方式下，对于大多数改变页面显示的行为，Web 应用会导航到一个完全不同的页面。用户会看到原页面被销毁，然后出来一个新页面，这种用户体验很不尽人意。这对如何维护应用程序的状态有很大影响。除了通过 cookie 和一些服务端机制来保存用户数据外，基本上就不用管别的了。生活是美好的。

现代的应用程序趋向于采用单页应用（SPA）模式。这种模式下，我们不需要导航到不同的页面，甚至不需要重新加载一个页面。应用的不同视图被加载和卸载到同一页面上。

在单页应用模式下，应用看起来应该是这样子：

当用户与应用程序交互时，我们用匹配用户行为的数据和 HTML 替换红色虚线区域的内容，从而带来更流式的体验。我们甚至可以用很多视觉技术让新内容很好地过渡，而这种很酷的技术以前只在移动设备或者桌面应用中才有。这类效果在多个页面中导航时几乎是不可能的。

每一次页面跳转的时候，后台服务器都会返回一个新的html文档，这种类型的网站也就是多页网站，也叫多页应用。

第一次进入页面时会请求一个html文件，刷新清除一下，切换到其他组件，此时路径也相应变化，但是并没有新的html文件请求，页面内容却变化了。

SEO效果差，因为搜索引擎只认识html里的内容，不认识js渲染生成的内容，搜索引擎不识别，也就不会给一个好排名，会导致单页应用做出来的网页在搜索引擎上的排名差。

/	多页面应用模式MPA	单页面应用模式SPA
应用构成	由多个完整页面构成	一个外壳页面和多个页面片段构成
跳转方式	页面之间的跳转是从一个页面到另一个页面	一个页面片段删除或隐藏，加载另一个页面片段并显示。片段间的模拟跳转，没有开壳页面
跳转后公共资源是否重新加载	是	否
URL模式	`http://xxx/page1.html`和`http://xxx/page2.html`	`http://xxx/shell.html#page1`和`http://xxx/shell.html#page2`
用户体验	页面间切换加载慢，不流畅，用户体验差，尤其在移动端	页面片段间切换快，用户体验好，包括移动设备
能否实现转场动画	否	容易实现（手机APP动效）
页面间传递数据	依赖URL、cookie或者localstorage，实现麻烦	页面传递数据容易（Vuex或Vue中的父子组件通讯props对象）
搜索引擎优化（SEO）	可以直接做	需要单独方案（SSR）
特别适用的范围	需要对搜索引擎友好的网站	对体验要求高，特别是移动应用
开发难度	较低，框架选择容易	较高，需要专门的框架来降低这种模式的开发难度