应用模式

模式示意图

多页面应用

每一次页面跳转的时候,后台服务器都会返回一个新的html文档,这种类型的网站也就是多页网站,也叫多页应用。

页面跳转: 返回HTML
优点: 首屏时间快,SEO效果好
缺点: 页面切换慢

1. 为什么多页应用的首屏时间快?

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

2. 为什么搜索引擎优化效果好(SEO)?

搜索引擎在做网页排名的时候,要根据网页的内容才能给网页权重,来进行网页的排名。搜索引擎是可以识别html内容的,而我们每个页面所有的内容都放在html中,所以这种多页应用SEO排名效果好。

3. 缺点:切换慢

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


单页面应用

第一次进入页面时会请求一个html文件,刷新清除一下,切换到其他组件,此时路径也相应变化,但是并没有新的html文件请求,页面内容却变化了。

原理: js会感知到url的变化,通过这一点可以用js动态地将当前页面的内容清除,然后将下一个页面的内容挂载到当前页面上。这个时候的路由不再是后端来做了,而是前端来做,判断页面显示相应的组件,清除不需要的。

页面跳转: js渲染
优点: 页面切换快
缺点: 首屏时间稍慢,SEO差

1. 为什么页面切换快?

页面每次切换跳转时,并不需要处理html文件的请求,这样就节约了很多HTTP发送时延,所以我们在切换页面的时候速度很快。

2. 为什么首屏时间慢,SEO 差?

单页应用的首屏时间慢,首屏时需要请求一次html,同时还要发送一次js请求,两次请求回来了,首屏才会展示出来。相对于多页面应用,首屏时间慢。

SEO效果差,因为搜索引擎只认识html里的内容,不认识js渲染生成的内容,搜索引擎不识别,也就不会给一个好排名,会导致单页应用做出来的网页在搜索引擎上的排名差。

3. 为什么还要用 Vue 呢?

Vue官方提供了一些其他的技术来解决这些缺点,比如服务端渲染技术(SSR),通过这些技术可以完美解决这些缺点,这样一来单页面应用对于前端来说就是非常完美的页面开发解决方案了。


总结

/ 多页面应用模式MPA 单页面应用模式SPA
应用构成 由多个完整页面构成 一个外壳页面和多个页面片段构成
跳转方式 页面之间的跳转是从一个页面到另一个页面 一个页面片段删除或隐藏,加载另一个页面片段并显示。片段间的模拟跳转,没有开壳页面
跳转后公共资源是否重新加载
URL模式 http://xxx/page1.htmlhttp://xxx/page2.html http://xxx/shell.html#page1http://xxx/shell.html#page2
用户体验 页面间切换加载慢,不流畅,用户体验差,尤其在移动端 页面片段间切换快,用户体验好,包括移动设备
能否实现转场动画 容易实现(手机APP动效)
页面间传递数据 依赖URLcookie或者localstorage,实现麻烦 页面传递数据容易(VuexVue中的父子组件通讯props对象)
搜索引擎优化(SEO) 可以直接做 需要单独方案(SSR)
特别适用的范围 需要对搜索引擎友好的网站 对体验要求高,特别是移动应用
开发难度 较低,框架选择容易 较高,需要专门的框架来降低这种模式的开发难度
 
 

一文解读MPA/SPA(转)的更多相关文章

  1. 一文解读AI芯片之间的战争 (转)

    2015年的秋天,北京的雨水比往年要多些,温度却不算太冷.这一年里,年仅23岁的姚颂刚刚拿到清华大学的毕业证书;32岁的陈天石博士毕业后已在中科院计算所待了整整8年;而在芯片界摸爬滚打了14年的老将何 ...

  2. Programming好文解读系列(—)——代码整洁之道

    注:初入职场,作为一个程序员,要融入项目组的编程风格,渐渐地觉得系统地研究下如何写出整洁而高效的代码还是很有必要的.与在学校时写代码的情况不同,实现某个功能是不难的,需要下功夫的地方在于如何做一些防御 ...

  3. 一文解读RESTful (转)

    01 前言 回归正题,看过很多RESTful相关的文章总结,参齐不齐,结合工作中的使用,非常有必要归纳一下关于RESTful架构方式了,RESTful只是一种架构方式的约束,给出一种约定的标准,完全严 ...

  4. 一文解读Redis (转)

    本文由葡萄城技术团队编撰并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 引言 在Web应用发展的初期,那时关系型数据库受到了较为广泛的关注和应用,原 ...

  5. 一文解读HTTP2 (转)

    作为一个经常和web打交道的程序员,了解这些协议是必须的,本文就向大家介绍一下这些协议的区别和基本概念,文中可能不局限于前端知识,还包括一些运维,协议方面的知识,希望能给读者带来一些收获,如有不对之处 ...

  6. 一文解读HTTP (转)

    先扒一扒HTTP协议背景? HTTP(HyperText Transfer Protocol) 即超文本传输协议,现在基本上所有web项目都遵从HTTP协议(协议就是一种人为的规范). 目前绝大部分使 ...

  7. 一文解读MVC/MVP/MVVM (转)

    这篇文章对目前 GUI 应用中的 MVC.MVP 和 MVVM 架构模式进行详细地介绍. MVC 在整个 GUI 编程领域,MVC 已经拥有将近 50 年的历史了.早在几十年前,Smalltalk-7 ...

  8. 一文解读CQRS (转)

    先从CQRS说起,CQRS的全称是Command Query Responsibility Segregation,翻译成中文叫作命令查询职责分离.从字面上就能看出,这个模式要求开发者按照方法的职责是 ...

  9. 一文解读Spring全家桶 (转)

    Spring框架自2002年诞生以来一直备受开发者青睐,它包括SpringMVC.SpringBoot.Spring Cloud.Spring Cloud Dataflow等解决方案.有人亲切的称之为 ...

随机推荐

  1. CodeForces - 5C(思维+括号匹配)

    题意 https://vjudge.net/problem/CodeForces-5C 给出一个括号序列,求出最长合法子串和它的数量. 合法的定义:这个序列中左右括号匹配. 思路 这个题和普通的括号匹 ...

  2. vue组件常用声明方式

    一.前言 这是自己重新写的一个,感觉以前的太写了很多不必要的方式 实际当中基本不会用的 所以自己写了一个常用的组件什么方式 更加的通俗易懂 二.代码如下 <!DOCTYPE html> & ...

  3. VisualStudio编译不生成xml、pdb文件的方法

    我们为了减少发布/Release时项目的体积,希望在编译时不生成xml注释文档(包括引用的其他类库),和pdb调试文件 用你喜欢的文本编辑器打开项目.csproj文件,找到PropertyGroup节 ...

  4. Python 标准类库-数字和数学模块之decimal使用简介

    标准类库-数字和数学模块之decimal使用简介 by:授客 QQ:1033553122 例子 >>>from decimal import * >>>getcon ...

  5. 通过U盘在物理机安装CentOS出现Timeout的问题

    错误信息:centos dracut timeout..... 解决方案: 在进入install页面是,按e,启动编辑.要保证Label与U盘的卷标保持一致即可.

  6. MySQL日志简介

    一.MySQL日志简介 二.错误日志 作用: 记录mysql数据库的一般状态信息及报错信息,是我们对于数据库常规报错处理的常用日志. 默认位置: $MYSQL_HOME/data/ 开启方式:(MyS ...

  7. maven配置多个镜像

    问题场景 1.国内访问maven默认远程中央镜像特别慢 2.用阿里的镜像替代远程中央镜像 3.大部分jar包都可以在阿里镜像中找到,部分jar包在阿里镜像中没有,需要单独配置镜像 解决方案 setti ...

  8. InnoDB Architecture (InnoDB In-Memory Structures 转载)

    转载.节选于 https://dev.mysql.com/doc/refman/8.0/en/innodb-in-memory-structures.html InnoDB Architecture ...

  9. 如何通过 subprocess 持续获取输出内容

    在实际应用中会用到subprocess的Popen方法执行一些命令,而我们需要通过执行这个命令的来获取输出进行一些信息记录或者分析使用,如果是很快就可以执行完的那还好,有时需要持续跟踪内容的输出,比如 ...

  10. JS-for循环练习题

    1.大马驮2石粮食,中马驮1石粮食,两头小马驮一石粮食,要用100匹马,驮100石粮食,该如何调配? //驮100石粮食,大马需要50匹 for(var a=0;a<=50;a++){ //驮1 ...