单页应用和多页应用

5,256 阅读3分钟

一:单页应用

1)单页应用是什么?

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

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

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

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

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

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

二:多页应用(MultiPage Application,MPA)

1) 什么是多页面应用?

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

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

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

单页面应用(SinglePage Web Application,SPA)多页面应用(MultiPage Application,MPA)
组成一个外壳页面和多个页面片段组成多个完整页面构成
资源共用(css,js)共用,只需在外壳部分加载不共用,每个页面都需要加载
刷新方式页面局部刷新或更改整页刷新
url 模式a.com/#/pageonea.com/pageone.html
整页刷新
用户体验页面片段间的切换快,用户体验良好页面切换加载缓慢,流畅度不够,用户体验比较差
转场动画容易实现无法实现
数据传递数据传递依赖 url传参、或者cookie 、localStorage