一文解读MPA/SPA(转)
应用模式
多页面应用
每一次页面跳转的时候,后台服务器都会返回一个新的
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.html 和http://xxx/page2.html |
http://xxx/shell.html#page1 和http://xxx/shell.html#page2 |
用户体验 | 页面间切换加载慢,不流畅,用户体验差,尤其在移动端 | 页面片段间切换快,用户体验好,包括移动设备 |
能否实现转场动画 | 否 | 容易实现(手机APP动效) |
页面间传递数据 | 依赖URL 、cookie 或者localstorage ,实现麻烦 |
页面传递数据容易(Vuex 或Vue 中的父子组件通讯props 对象) |
搜索引擎优化(SEO) | 可以直接做 | 需要单独方案(SSR) |
特别适用的范围 | 需要对搜索引擎友好的网站 | 对体验要求高,特别是移动应用 |
开发难度 | 较低,框架选择容易 | 较高,需要专门的框架来降低这种模式的开发难度 |
一文解读MPA/SPA(转)的更多相关文章
- 一文解读AI芯片之间的战争 (转)
2015年的秋天,北京的雨水比往年要多些,温度却不算太冷.这一年里,年仅23岁的姚颂刚刚拿到清华大学的毕业证书;32岁的陈天石博士毕业后已在中科院计算所待了整整8年;而在芯片界摸爬滚打了14年的老将何 ...
- Programming好文解读系列(—)——代码整洁之道
注:初入职场,作为一个程序员,要融入项目组的编程风格,渐渐地觉得系统地研究下如何写出整洁而高效的代码还是很有必要的.与在学校时写代码的情况不同,实现某个功能是不难的,需要下功夫的地方在于如何做一些防御 ...
- 一文解读RESTful (转)
01 前言 回归正题,看过很多RESTful相关的文章总结,参齐不齐,结合工作中的使用,非常有必要归纳一下关于RESTful架构方式了,RESTful只是一种架构方式的约束,给出一种约定的标准,完全严 ...
- 一文解读Redis (转)
本文由葡萄城技术团队编撰并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 引言 在Web应用发展的初期,那时关系型数据库受到了较为广泛的关注和应用,原 ...
- 一文解读HTTP2 (转)
作为一个经常和web打交道的程序员,了解这些协议是必须的,本文就向大家介绍一下这些协议的区别和基本概念,文中可能不局限于前端知识,还包括一些运维,协议方面的知识,希望能给读者带来一些收获,如有不对之处 ...
- 一文解读HTTP (转)
先扒一扒HTTP协议背景? HTTP(HyperText Transfer Protocol) 即超文本传输协议,现在基本上所有web项目都遵从HTTP协议(协议就是一种人为的规范). 目前绝大部分使 ...
- 一文解读MVC/MVP/MVVM (转)
这篇文章对目前 GUI 应用中的 MVC.MVP 和 MVVM 架构模式进行详细地介绍. MVC 在整个 GUI 编程领域,MVC 已经拥有将近 50 年的历史了.早在几十年前,Smalltalk-7 ...
- 一文解读CQRS (转)
先从CQRS说起,CQRS的全称是Command Query Responsibility Segregation,翻译成中文叫作命令查询职责分离.从字面上就能看出,这个模式要求开发者按照方法的职责是 ...
- 一文解读Spring全家桶 (转)
Spring框架自2002年诞生以来一直备受开发者青睐,它包括SpringMVC.SpringBoot.Spring Cloud.Spring Cloud Dataflow等解决方案.有人亲切的称之为 ...
随机推荐
- sqoop 安装与使用
Sqoop(发音:skup)是一款开源的工具,主要用于在Hadoop(Hive)与传统的数据库间进行数据的传递,可以将一个关系型数据库(例如 : MySQL ,Oracle ,Postgres等)中的 ...
- Matlab非线性规划
非线性规划 在matlab非线性规划数学模型可以写成一下形式: \[ minf(x)\\ s.t.\begin{cases} Ax \le B \\ Aeq·x = Beq\\ C(x) \le 0\ ...
- Eclipse——关联源代码
Eclipse——关联源代码 摘要:本文主要说明了如何在Eclipse里关联源代码. 下载源码包 首先去想要关联的jar包的官网下载对应jar包的源代码,拿Tomcat的类库举例,先去官网下载源码包: ...
- 让 Lua 访问数据库
Lua 自身并没有提供访问数据库的函数,但是借助外部扩展库我们可以很容易实现对数据库的各种操作,下面就为大家介绍这样一个扩展库 - LuaSQL,你可以在下载区得到它. LuaSQL 定义了一套简单的 ...
- 封装和@property
封装和@property 一.复习 1.接口类和抽象类 python中没有接口类,有抽象类,abc模块中的metaclass=ABCMeta,@abstructmethod,本质是做代码规范用的,希望 ...
- MySQL数据库基础笔记
数据库 数据库就是存储和管理数据的仓库,用户可以对数据库中的数据进行增删改查等操作. 数据库的分类 关系型数据库(Oracle.MySQL.SQLite等) 非关系型数据库(Redis.MongoDB ...
- 如何安装 IntelliJ IDEA 最新版本——详细教程
IntelliJ IDEA 简称 IDEA,被业界公认为最好的 Java 集成开发工具,尤其在智能代码助手.代码自动提示.代码重构.代码版本管理(Git.SVN.Maven).单元测试.代码分析等方面 ...
- C# List与Dictionary相互转换与高效查找
TestModel类定义: public class TestModel{ public int Id { get; set; } public string Name { get; se ...
- js 淡入淡出的tab选项卡
代码如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF- ...
- OPENGL 坐标轴转换
坐标轴 平移 旋转 缩放 重置坐标轴 矩阵操作 示例 1.坐标轴 OpenGL 使用的右手坐标系,从正面看原点,逆时针旋转被认为是正旋转. x轴:从左到右 y轴:从底部向上 z轴:从屏幕背向朝向前方 ...