单页应用和多页应用

一：单页应用

1）单页应用是什么？

SPA(single page application): 单页面应用，即一个web项目就只有一个页面（即一个HTML文件）。

就是把整个项目的所有页面的所有内容分成了很多的小块（就是组件），可以重复利用的，可以任意调整的组件，每个组件就是一个独立的部分（包括html，css和javascript代码）。再做一个html（基本上啥也没有），这个html就是一个页面容器，需要放哪个组件时，直接引入就行。跳转时，直接跳转组件就行。当需要加载某个组件时，js会动态创建这些组件里的HTML，CSS。

2）单页应用的优缺点

• 优点

  • 1. 有良好的交互体验。能提升页面切换体验，用户在访问应用页面是不会频繁的去切换浏览页面，从而避免了页面的重新加载。

       单页面是一次性把web应用的所有代码（HTML，JavaScript和CSS）全部请求过来，有时候考虑到首屏加载太慢会按需加载。这样一来，以后用户的每一个动作都不会重新加载页面（即不用再问服务器要页面的HTML慢，css和js代码），取而代之的是利用 JavaScript 动态的变换HTML的内容（这不需要和服务器交互，除非数据是动态，那么只需要问服务器要数据即可）。

  • 2. 减轻服务器压力。服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍；
• 缺点
  • 1. SEO难度较高。SEO差的原因是因为页面中的内容都是靠js渲染出来了，在百度或者goole这样的搜素引擎当中，排名会比较差。
  • 2. 首屏加载(初次加载)耗时多。为实现单页Web应用功能及显示效果，需要在加载页面的时候将JavaScript、CSS统一加载，部分页面可以在需要的时候加载。所以必须对JavaScript及CSS代码进行合并压缩处理；

  • 3. 前进、后退管理。由于单页Web应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能。

       配置好路由信息，通过记录浏览过的历史路由信息，可以很好的记录或历史查看过的界面，也可以独立写个足迹功能实现。

二：多页应用（MultiPage Application，MPA）

1) 什么是多页面应用？

项目是由多个完整的页面组成。多页面跳转刷新所有资源，每个公共资源(js、css等)需选择性重新加载。

2) 多页应用的优缺点

• 优点
  • 有利于seo。
  • 首屏加载加载快。
• 缺点
  • 页面切换慢。资源共用(html、css,js)不共享，不共用，每个页面都需要加载。
  • 页面重复代码多。

  三：单页应用和多页应用对比