【前端词典】单页应用 VS 多页应用

前言

最近看到一些人在问单页面和多页面应用的区别。因为最近在整理 Vue 相关的内容,所以也就输出这一篇短文希望可以给你一个整体的认识。

这里也会大体介绍单页应用实现的核心 —— 前端路由。

单页应用 VS 多页应用

直观对比图

单页应用(SinglePage Application,SPA)

指只有一个主页面的应用,一开始只需加载一次 js,css 等相关资源。所有的内容都包含在主页面,对每一个功能模块组件化。单页应用跳转,就是切换相关组件,仅刷新局部资源。

多页应用(MultiPage Application,MPA)

指有多个独立的页面的应用,每个页面必须重复加载 js,css 等相关资源。多页应用跳转,需要整页资源刷新。

两者对比表格:

SPA

MPA

结构

一个主页面 + 许多模块的组件

许多完整的页面

体验

页面切换快,体验佳;当初次加载文件过多时,需要做相关的调优。

页面切换慢,网速慢的时候,体验尤其不好

资源文件

组件公用的资源只需要加载一次

每个页面都要自己加载公用的资源

适用场景

对体验度和流畅度有较高要求的应用,不利于 SEO(可借助 SSR 优化 SEO)

适用于对 SEO 要求较高的应用

过渡动画

Vue 提供了 transition 的封装组件,容易实现

很难实现

内容更新

相关组件的切换,即局部更新

整体 HTML 的切换,费钱(重复 HTTP 请求)

路由模式

可以使用 hash ,也可以使用 history

普通链接跳转

数据传递

因为单页面,使用全局变量就好(Vuex)

cookie 、localStorage 等缓存方案,URL 参数,调用接口保存等

相关成本

前期开发成本较高,后期维护较为容易

前期开发成本低,后期维护就比较麻烦,因为可能一个功能需要改很多地方

单页应用实现 —— 前端路由

前端路由的核心:改变视图的同时不会向后端发出请求。

这里我讲讲 vue-router 路由的两种模式:hash&history

hash 模式

hash 模式背后的原理是 onhashchange 事件。

window.addEventListener('hashchange',function(e) { 
    console.log(e.oldURL);  
    console.log(e.newURL) 
},false);

通过 window.location.hash 属性获取和设置 hash 值。

由于 hash 发生变化的 url 都会被浏览器记录下来,所以浏览器的前进后退可以使用,尽管浏览器没有请求服务器,但是页面状态和 url 关联起来。后来人们称其为前端路由,成为单页应用标配。

hash 模式的特点在于 hash 出现在 url 中,但是不会被包括在 HTTP 请求中,对后端没有影响,不会重新加载页面。

history 模式

利用了 HTML5 History Interface 中新增的 pushState()replaceState(),它们提供了对历史记录进行修改的功能。

相关的 API:

history.pushState()

history.pushState(stateObj, title, url);
  1. state:一个与指定网址相关的状态对象, popstate 事件触发时,该对象会传入回调函数。如果不需要可填 null
  2. title:新页面的标题,但是所有浏览器目前都忽略这个值,可填 null
  3. url:新的网址,必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。

例如:history.pushState('new','new','new.html');

添加上面这个新记录后,浏览器地址栏立刻显示 ~/new.html,但并不会跳转到 new.html,它只是成为 history 中的最新记录。pushState 方法不会触发页面刷新,只是 history 对象变化,地址栏会变。

history.replaceState()

history.replaceState(stateObj, title, url);

参数同 pushState() 一样。

调用该方法,会修改当前的 history 对象记录, history.length 的长度不会改变

history.state

当前 URL 下对应的状态信息。如果当前 URL 不是通过 pushState 或者 replaceState 产生的,那么 history.statenull。当需要 state 和 URL 同步时可以使用 replaceState() 使之同步。

popstate 事件

同一个文档的 history 对象出现变化时,就会触发 popstate 事件。

不同的浏览器在加载页面时处理 popstate 事件的形式存在差异。页面加载时 Chrome 和 Safari 通常会触发 popstate 事件,但 Firefox 则不会。

注意:

调用 history.pushState() 或者 history.replaceState() 不会触发 popstate 事件. popstate事件只会在浏览器某些行为下触发, 比如点击后退、前进按钮(或者调用 history.back()、history.forward()、history.go()方法)。

Vue 相关文章输出计划

最近总有朋友问我 Vue 相关的问题,因此接下来我会输出 10 篇 Vue 相关的文章,希望对大家有一定的帮助。我会保持在 7 到 10 天更新一篇。

  1. Vuex 注入 Vue 生命周期的过程(完成)
  2. 学习 Vue 源码的必要知识储备(完成)
  3. 浅析 Vue 响应式原理(完成)
  4. 新老 VNode 进行 patch 的过程
  5. 如何开发功能组件并上传 npm
  6. 从这几个方面优化你的 Vue 项目
  7. 从 Vue-Router 设计讲前端路由发展
  8. 在项目中如何正确的使用 Webpack
  9. Vue 服务端渲染
  10. Axios 与 Fetch 该如何选择

本篇内容来源自:小生方勤

本文分享自微信公众号 - 全栈者(fullStackEngineer)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-08-09

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏程序员宇说

构建可读性更高的 ASP.NET Core 路由

  不知你在平时上网时有没有注意到,绝大多数网站的 URL 地址都是小写的英文字母,而我们使用 .NET/.NET Core MVC 开发的项目,因为在 C# ...

7110
来自专栏角落的白板报

52ABP-PRO 前后端分离架构概述

在阅读本文档之前,建议您先运行一次 52ABP 项目程序,打开过 Angular 版本的界面,如果你还没有运行过项目可以参考快速入门文档。 或者你已经对 ABP...

29540
来自专栏LNMP开发那些事

PSR-1: 基本编码规范

php代码必须使用<?php ?>标签或者短输出标签<?= ?>;一定不能使用其他类型的标签。

9640
来自专栏Seebug漏洞平台

Mybb 18.20 From Stored XSS to RCE 分析

2019年6月11日,RIPS团队在团队博客中分享了一篇MyBB <= 1.8.20: From Stored XSS to RCE[1],文章中主要提到了一个...

7320
来自专栏博客同步

HTML5表单

number : 只能包含数字的输入框 color : 颜色选择器 datetime : 显示完整日期(chrome) datetime-local...

15130
来自专栏图南科技

VsCode插件巡礼-phpcs

我们希望规范项目开发中PHP代码的编码规范,锁定了php-code-sniffer这款插件,在安装执行过程中遇到的问题及理解分享如下

64930
来自专栏码神路漫漫

从抓取豆瓣电影聊高性能爬虫思路

顶部导航为提供了很多种类型的入口,其中和电影有关的有:排行榜、选电影和分类。为了便于后续更精细的分析,这里选择进入分类页面,地址。通过浏览的开发工具,我们最终能...

12340
来自专栏博客同步

Flutter lesson 9: Flutter的网络(HTTP)请求

Flutter中网络请求有两种,一个是使用Flutter自带的网络请求,另一种则是使用第三方HTTP请求插件dio

21210
来自专栏后端开发随笔

细说RESTful API之版本管理

API版本管理的重要性不言而喻,对于API的设计者和使用者而言,版本管理都有着非常重要的意义。 首先,对于API的设计和实现者而言,需要考虑向后兼容性,但是随...

15830
来自专栏LNMP开发那些事

搜索引擎的高级搜索指令

搜索词使用双引号,代表匹配搜索,搜索结果的页面中应该包含所搜索的所有词,并且词语的排列顺序也应该完全匹配。

9030

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励