单页面

单页面应用

只有一张web页面的应用，是一种从web服务器加载的富客户端。
单页面跳转仅刷新局部资源，公共资源仅刷新一次，之后的操作交互，数据交互是通过路由、ajax来进行的，页面本身没有进行刷新。

单页面.png

JS会感知到URL的变化，我们通过JS感知到url的变化后，可以用JS动态的把页面清除掉，再把下一个页面的内容挂载到当前页面，这时候路由不是后端来做，而是前端来做。我们判断页面到底是显示哪一个组件，然后把以前的组件清除掉，再显示新的组件就可以了。这种过程就是单页应用的处理过程，不会每次跳跃的时候请求HTML文件了。 因为没有HTTP请求，所以页面切换的非常快。

优点：

（1）、页面片段间的切换快，用户体验良好。页面效果会比较炫酷（比如切换页面内容时的专场动画
（2）、用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小
（3）、前后端分离

缺点：

（1）、seo难度高——数据渲染在前端进行，seo主要是让网站对于搜索引擎的爬虫更加友好，spa页数据动态生成，爬虫识别不了
（2）、前进后退管理——单页面不能使用浏览器的前进后退，页面切换要自己建立堆栈管理，解决方法：利用url的散列+iframe实现
（3）、初次加载时耗时多

单页面优化：

• 注意网站标题、关键字和描述的写法。
• 网页标签的合理使用，尽可能的符合W3C的标准
• 注重外联锚文本多样化
• 避免全是图片展示——网站文字内容少不利于搜索引擎抓取和索引

多页面应用

多页面跳转刷新所有资源，每个公共资源(js、css等)需选择性重新加载，常用于 app 或 客户端等.
就是指一个应用中有多个页面，页面跳转时是整页刷新

多页面.png

• 数据传递，依赖 url传参、或者cookie 、localStorage等
• 适用于追求高度支持搜索引擎的应用
• 较低 ，但页面重复代码多。但是页面维护成本比较高

优点：

• 首屏快，SEO 效果好，
• 首屏时间叫做页面首个屏幕的内容展现的时间，当我们访问页面的时候，服务器返回一个html，页面就会展示出来，这个过程只经历了一个HTTP请求，所以页面展示的速度非常快

缺点：

• 页面切换慢；
• 每次跳转都需要发送一个HTTP请求，如果网络状态不好，在页面间来回跳转时，就会发生明显的卡顿，影响用户体验