页面组成 单页&&多页
前端程序员越来越频繁提到“单页应用”、“多页应用”这些，那这又分别代表什么呢？
# 单页应用
其实很简单，单页应用与多页最简单的区别就是，单页应用，是一个HTML文件。
当我们需要更改页面的展示，我们会移除掉部分元素，然后将需要新增的内容填充进去，与画画的擦除重绘相似。
单页应用的好处是：
- 页面的数据状态都能维持着。
- 部分擦除重绘，比整个页面刷新的效果体验要好很多。
当然，单页应用也会有缺点：
- 不利于 SEO。
- 请求等待时间长。
事物都是有利有弊，单页应用的最大痛处在于 SEO。 搜索引擎优化
(opens new window)（英语：search engine optimization，缩写为 SEO），是一种通过了解搜索引擎的运作规则来调整网站，以及提高目的网站在有关搜索引擎内排名的方式。
而关于单页应用的 SEO，也是有各种各样的方式优化的，大家也可以去了解。
# 多页应用
多页应用，更常见于相同的业务不同的页面的开发，这些页面或许没有很多的联系或者公用的数据，每个页面维护各自的状态。
如今 H5 的业务多了，直出渲染也多了些。而多页应用和直出也是不错的搭配。
# 单页与多页应用的比较
| - | 单页面应用 | 多页面应用 |
|---|---|---|
| 组成 | 一个外壳页面和多个页面片段组成 | 多个完整页面构成 |
| 资源共用(css,js) | 共用，只需在外壳部分加载 | 不共用，每个页面都需要加载 |
| 刷新方式 | 页面局部刷新或更改 | 整页刷新 |
| url 模式 | a.com/#/pageone a.com/#/pagetwo |
a.com/pageone.html a.com/pagetwo.html |
| 用户体验 | 页面片段间的切换快，用户体验良好 | 页面切换加载缓慢，流畅度不够，用户体验比较差 |
| 页面跳转动画 | 容易实现 | 无法实现 |
| 数据传递 | 容易 | 依赖 url 传参、或者 cookie 、localStorage 等 |
| 搜索引擎优化(SEO) | 需要单独方案、实现较为困难、不利于 SEO 检索 可利用服务器端渲染(SSR)优化 | 实现方法简易 |
以上表格内容来自《前端：你要懂的单页面应用和多页面应用》
# 直出和同构
直出，常常指代后端渲染，即我们请求的页面已经是把模版和数据组合好，直接吐出来给到浏览器。
与此相对的，是前端渲染。例如单页应用，我们拿到的只是一个简单的空<html>，然后浏览器解析发现需要一些请求的数据和资源，发起二次请求。
当然，这样一来一去，消耗和等待的时间便会长了。
同构又是什么呢？
直出渲染的后端可以有很多，像 PHP、JSP、Node.js 等都是可以的。而同构的意思是，前后端使用一套代码。所以简单来说，就是 Node.js 的胜出了，同构最明显的优势，则是方便维护。
