SPA单页应用的优缺点

单页站点优劣

单页站点的优势主要有三点

传输数据少

单页站点的重点是局部刷新，因此每次更新，传输的数据少，减少后端压力，甚至对于完全前后端分离的SPA应用，只需要传输少量json数据即可。这一点在移动端显得尤为重要，许多应用前端代码并不会频繁更新，完全可以由前端直接缓存起来，每次使用只需与后端交互少量数据，这样既省流量也能让用户获得接近native的体验

服务可不中断

一些特殊网站，如音乐播放、IM聊天等，不希望因为页面全部重载造成服务中断。单页应用因为局部刷新，可以将这些服务放置在刷新范围之外，持续提供服务

前后端开发更规范

前端也可按照MVC的模式更好的模块化开发，而后端开发仅仅只需要开发数据操作接口，对前后端开发而言都是一种解放

但单页站点也带来了一些新的问题，比如

首次加载数据大耗时长

特别是目前基于angular或者react的纯前后端分离的SPA，结合一些javascript方言，编译出来js相当的大，笔者曾在内网亲眼目睹10M级别的js文件，即便以内网的网速首次打开也需要3秒左右。为每个模块单独编译js是种办法，但实际操作会可能发现，随着项目越做越大，拆分成独立模块编译的成本会越来越大，最终不得不委曲求全整站使用一个js，除非从一开始就有良好的规范限制。

极差的SEO（搜索引擎优化）

众所周知，通过请求url即可获取到大量页面正文文本的页面是对搜索引擎最为友好的，虽然现在的爬虫已经具备解析运行页面js脚本索引动态内容的能力，但是每个网站千奇百怪，爬虫需要考虑触发什么事件、按什么顺序触发才能获取更多内容，索引动态内容的难度要远远大于索引静态内容。而目前主流的单页应用，几乎都是以前端js模板引擎来渲染html页面数据，直接通过url获取到的内容极少，这对搜索引擎非常不友好。SEO最差的单页应用可能仅仅只有首页能够被搜索引擎收录。这成了制约单页应用发展的一大障碍，即便现在又方案可以提高收录，但效果还是不好

导航需要人为处理

浏览器对div以及早期浏览器对iframe都不记录历史记录，因此需要开发对浏览器的前进后退做实现，通过修改hash或者history API来实现前进后退（后面会提到）