1.多页面应用
一个项目是由多个完整的html页面组成，每一次页面跳转，都会向服务器请求一个新的HTML文档，每个公共资源(js、css等)需选择性重新加载：
优点：首屏时间快，SEO效果好
缺点：页面切换慢
首先为什么首屏时间快呢？
因为当我们访问页面的时候，服务器返回一个HTML，页面就会展现出来，这个过程只进行一次http请求，所以首屏时间就很快。
SEO效果为什么好？
首先“搜索引擎优化（SEO）是指用于通过增加其搜索引擎页面排名来增加网站流量的方法。搜索引擎根据网页中的内容来给他增加权重，多页面应用内容都在HTML文档中，恰好搜索引擎只能读取到HTML中的部分，所以SEO效果好。
那么为什么页面切换慢呢？
因为他们次切换页面都是在重新请求一个HTML，公共资源都会选择性重新加载，这无疑会增加服务器负担（把网络调慢就会看到明显的延迟）
2.单页面应用
一个项目中只有一个完整的HTML页面，其他的都是部分的html片段组成。加载页面会把这个HTML外壳加载出来，同时加载公共资源(js、css等)注意：（所有公共资源只需这时加载一次），切换页面时，局部更新，把需要的部分由JS动态添加。
此处知识点：JS会感知到url的变化，可以用js动态地将当前页面的内容清除掉，然后将下一个页面的内容挂载到当前页面上。
如下图所示：只需要替换中间页面部分，公共资源不需要再次加载
优点：页面切换快
缺点：首屏时间较长，SEO效果不好
那么为什么页面切换快呢？
因为单页面应用在做页面跳转时，不需要再请求HTML，并且JS公共资源也不需要再次请求。
为什么首屏时间长呢？
因为在首页请求时，不光要进行一次html请求，还需要一次JS请求，这会比多页面应用时间长。
为什么SEO效果差呢？
因为上边说了，搜索引擎根据网页中的内容来给他增加权重，但是搜索引擎只能读取到HTML中的部分，单页面应用的内容是靠JS动态渲染上去的，搜索引擎读不到，自然效果就不好。
虽然单页面应用SEO效果不好，但是只要解决了这个问题，那么这将是非常完美的方案。解决方法有服务器端渲染技术（SSR）。
此处还有一个小点：既然搜索引擎只能读取到HTML中的部分，那么在设置网站LOGO的时候我们完全可以这样做： 把关键的词写在HTML中，但是页面上并不显示
次处是将LOGO作为背景图显示，标签中的文本是用来给搜索引擎看的，但是为了不让它显示，需要CSS来实现
上代码：
//HTML中
<h2><a href="http://www.baidu.com">英雄联盟</a></h2>
//css中
a{
display: block;
line-height: 1000px;
}
我们利用line-height会把文本垂直居中的属性，让文本超出页面，自然就看不到了。
以上是我的一些理解，有不同见解的还请多多指正... 感谢提供图片的博主。
