SPA（单页面应用）
在传统的网站中，不同的页面之间的切换都是直接从服务器加载一整个新的页面，这样大大加重了服务器的负担，响应速度有波动，用户等待的时间长且体验感差。而在SPA这个模型中，是通过动态地重写页面的部分与用户交互，而避免了过多的数据交换，响应速度自然相对更高
在服务端放了一个html 页面，里面有<script>//发请求，拿数据，模版引擎渲染等，$.ajax ,</script>
客户端发起请求，服务端把页面（响应的是字符串）发送过去，客户端从上到下依次解析，如果在解析的过程中，发现ajax
请求，再次像服务器发送新的请求，客户端拿到ajax 响应结果，模板引擎渲染。
过程至少和服务端发起两次请求
举个栗子，请看知乎首页
在知乎Web页面中，一些部分是几乎不会发生变化的，比如导航栏，当我们点了某一个问题进入之后，紧接着看下图
所以，可以看出它的导航栏没有什么变化，而在传统的Web网站中，进入了新的页面，会从服务器请求完整的一个整个页面，而在SPA中，当切换到新的页面，只需要重写页面发生了变化的部分。一旦页面加载完成， SPA 不会因为用户的操作而进行页面的重新加载或跳转。
SPA的优点：
1) 有良好的交互体验
能提升页面切换体验，用户在访问应用页面是不会频繁的去切换浏览页面，从而避免了页面的重新加载；
2) 前后端分离开发
单页Web应用可以和 RESTful 规约一起使用，通过 REST API 提供接口数据，并使用 Ajax 异步获取，这样有助于分离客户端和服务器端工作。更进一步，可以在客户端也可以分解为静态页面和页面交互两个部分；
3) 减轻服务器压力
服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍；
4) 共用一套后端程序代码
不用修改后端程序代码就可以同时用于 Web 界面、手机、平板等多种客户端，后端只需要提供API
SPA的缺点：
1) SEO难度较高
由于所有的内容都在一个页面中动态替换显示，所以在SEO上其有着天然的弱势，所以如果你的站点对SEO很看重，且要用单页应用，那么就做些静态页面给搜索引擎用吧；
2) 前进、后退管理
由于单页Web应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理，当然此问题也有解决方案，比如利用URI中的散列+iframe实现；
3) 初次加载耗时多
为实现单页Web应用功能及显示效果，需要在加载页面的时候将JavaScript、CSS统一加载，部分页面可以在需要的时候加载。所以必须对JavaScript及CSS代码进行合并压缩处理
SEO（
搜索引擎排名优化
）
搜索引擎优化是一种利用搜索引擎的搜索规则来提高目前网站在有关搜索引擎内的自然排名的方式。SEO是指为了从搜索引擎中获得更多的免费流量，从网站结构、内容建设方案、用户互动传播、页面等角度进行合理规划，以提高该网站在搜索引擎中某些关键词的搜索结果排名。
seo原理：
页面抓取： 蜘蛛向服务器请求页面，获取页面内容
分析入库：对获取到的内容进行分析，对优质页面进行收录
检索排序：当用户检索关键词时，从收录的页面中按照一定的规则进行排序，并返回给用户结果
seo优化：
通过网站的结构布局设计和网页代码优化，使前端页面既能让浏览器用户能够看懂，也能让“蜘蛛”看懂
(1) 网站结构布局优化：尽量简单、开门见山，提倡扁平化结构。
一般而言，建立的网站结构层次越少，越容易被“蜘蛛”抓取，也就容易被收录。一般中小型网站目录结构超过三级，“蜘蛛”便不愿意往下爬，“万一天黑迷路了怎么办”。并且根据相关调查：访客如果经过跳转3次还没找到需要的信息，很可能离开。因此，三层目录结构也是体验的需要。为此我们需要做到：
1. 控制首页链接数量
网站首页是权重最高的地方，如果首页链接太少，没有“桥”，“蜘蛛”不能继续往下爬到内页，直接影响网站收录数量。但是首页链接也不能太多，一旦太多，没有实质性的链接，很容易影响用户体验，也会降低网站首页的权重，收录效果也不好。
因此对于中小型企业网站，建议首页链接在100个以内，链接的性质可以包含页面导航、底部导航、锚文字链接等等，注意链接要建立在用户的良好体验和引导用户获取信息的基础之上。
2.扁平化的目录层次，尽量让“蜘蛛”只要跳转3次，就能到达网站内的任何一个内页。扁平化的目录结构，比如：“植物”–> “水果” –> “苹果”、“桔子”、“香蕉”，通过3级就能找到香蕉了。
3.导航优化
导航应该尽量采用文字方式，也可以搭配图片导航，但是图片代码一定要进行优化，<img>标签必须添加“alt”和“title”属性，告诉搜索引擎导航的定位，做到即使图片未能正常显示时，用户也能看到提示文字。
其次，在每一个网页上应该加上面包屑导航，好处：从用户体验方面来说，可以让用户了解当前所处的位置以及当前页面在整个网站中的位置，帮助用户很快了解网站组织形式，从而形成更好的位置感，同时提供了返回各个页面的接口，方便用户操作；对“蜘蛛”而言，能够清楚的了解网站结构，同时还增加了大量的内部链接，方便抓取，降低跳出率。
4. 网站的结构布局–不可忽略的细节
1）页面头部：logo及主导航，以及用户的信息。
2）页面主体：左边正文，包括面包屑导航及正文；右边放热门文章及相关文章，好处：留住访客，让访客多停留，对“蜘蛛”而言，这些文章属于相关链接，增强了页面相关性，也能增强页面的权重。
3）页面底部：版权信息和友情链接。
特别注意：分页导航写法，推荐写法：“首页 1 2 3 4 5 6 7 8 9 下拉框”，这样“蜘蛛”能够根据相应页码直接跳转，下拉框直接选择页面跳转。而下面的写法是不推荐的，“首页 下一页 尾页”，特别是当分页数量特别多时，“蜘蛛”需要经过很多次往下爬，才能抓取，会很累、会容易放弃。
5.控制页面的大小，减少http请求，提高网站的加载速度。
一个页面最好不要超过100k，太大，页面加载速度慢。当速度很慢时，用户体验不好，留不住访客，并且一旦超时，“蜘蛛”也会离开。
(2) 网页代码优化
1.<title>标题：只强调重点即可，尽量把重要的关键词放在前面，关键词不要重复出现，尽量做到每个页面的<title>标题中不要设置相同的内容。
2.<meta keywords>标签：关键词，列举出几个页面的重要关键字即可，切记过分堆砌。
3.<meta description>标签：网页描述，需要高度概括网页内容，切记不能太长，过分堆砌关键词，每个页面也要有所不同。
4.<body>中的标签：尽量让代码语义化，在适当的位置使用适当的标签，用正确的标签做正确的事。让阅读源码者和“蜘蛛”都一目了然。比如：h1-h6是用于标题类的，<nav>标签是用来设置页面主导航的等。
5.<a>标签：页内链接，要加“title” 属性加以说明，让访客和 “蜘蛛” 知道。而外部链接，链接到其他网站的，则需要加上el="nofollow"属性, 告诉 “蜘蛛” 不要爬，因为一旦“蜘蛛”爬了外部链接之后，就不会再回来了。
6.正文标题要用<h1>标签：“蜘蛛” 认为它最重要，若不喜欢<h1>的默认样式可以通过CSS设置。尽量做到正文标题用<h1>标签，副标题用<h2>标签, 而其它地方不应该随便乱用 h 标题标签。
7.<br>标签：只用于文本内容的换行
8.表格应该使用<caption>表格标题标签
9.<img>应使用 “alt” 属性加以说明
10.<strong>、<em>标签 : 需要强调时使用。<strong>标签在搜索引擎中能够得到高度的重视，它能突出关键词，表现重要的内容，<em>标签强调效果仅次于<strong>标签。
<b>、<i>标签: 只是用于显示效果时使用，在SEO中不会起任何效果。
11、文本缩进不要使用特殊符号 应当使用CSS进行设置。版权符号不要使用特殊符号 © 可以直接使用输入法，拼“banquan”，选择序号5就能打出版权符号©。
12、巧妙利用CSS布局，将重要内容的HTML代码放在最前面，最前面的内容被认为是最重要的，优先让“蜘蛛”读取，进行内容关键词抓取。
13.重要内容不要用JS输出，因为“蜘蛛”不认识
14.尽量少使用iframe框架,因为“蜘蛛”一般不会读取其中的内容
15.谨慎使用display：none ：对于不想显示的文字内容，应当设置z-index或设置到浏览器显示器之外。因为搜索引擎会过滤掉display:none其中的内容。
16. 不断精简代码
17.js代码如果是操作DOM操作，应尽量放在body结束标签之前，html代码之后
SPA与SEO的冲突
由于SPA是通过AJAX加载页面数据的，很难保证站内数据被SEO获取到，有些搜索引擎对JS和AJAX获取数据并不支持
