什么是单页应用SPA
什么是单页应用？
单页应用的全称是 single-page application，简称 SPA，它是一种网站应用的模型，它可以动态重写当前的页面来与用户交互，而不需要重新加载整个页面。单页应用的流畅性让 Web 应用更像桌面端或 Native 应用了。相对于传统的 Web 应用，单页应用做到了前后端分离，后端只负责处理数据提供接口，页面逻辑和页面渲染都交给了前端。前端发展到现在，单页应用的使用已经很广泛，目前时兴的 React、Vue、Angular 等前端框架均采用了 SPA 原则。单页应用意味着前端掌握了主动权，也让前端代码更复杂和庞大，模块化、组件化以及架构设计都变得越来越重要。
说白了 就是整个使用流程里浏览器由始至终没有刷新，整个webapp就一个html文件，里面的各个功能页面是javascript通过hash,或者history api来进行路由，并通过ajax拉取数据来实现响应功能。因为整个webapp就一个html，所以叫单页面！
单页面应用的优缺点：
优点：
1、用户操作体验好，用户不用刷新页面，整个交互过程都是通过Ajax来操作。
2、适合前后端分离开发，服务端提供http接口，前端请求http接口获取数据，使用JS进行客户端渲染。
缺点：
1、首页加载慢
单页面应用会将js、 css打包成一个文件，在加载页面显示的时候加载打包文件，如果打包文件较大或者网速慢则用户体验不好
2、SEO不友好
SEO（Search Engine Optimization）为搜索引擎优化。它是一种利用搜索引擎的搜索规则来提高网站在搜索引擎排名的方法。目前各家搜索引擎对JS支持不好，所以使用单页面应用将大大减少搜索引擎对网站的收录。
为什么页面切换快？
页面每次切换跳转时，并不需要做html文件的请求，这样就节约了很多http发送时延，我们在切换页面的时候速度很快。
缺点：首屏时间慢，SEO差
单页应用的首屏时间慢，首屏时需要请求一次html，同时还要发送一次js请求，两次请求回来了，首屏才会展示出来。相对于多页应用，首屏时间慢。
SEO效果差，因为搜索引擎只认识html里的内容，不认识js的内容，而单页应用的内容都是靠js渲染生成出来的，搜索引擎不识别这部分内容，也就不会给一个好的排名，会导致单页应用做出来的网页在百度和谷歌上的排名差。
有这些缺点，为什么还要使用Vue呢？
Vue还提供了一些其它的技术来解决这些缺点，比如说服务器端渲染技术，通过这些技术可以完美解决这些缺点，解决完这些问题，实际上单页面应用对于前端来说是非常完美的页面开发解决方案。
| mm | 多页应用模式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或storage之类)
|
| 搜索引擎优化（SEO） | 可以直接做 | 需要单独方案做，有点麻烦 |
| 特别适用的范围 | 需要对搜索引擎友好的网站 | 对体验要求高的应用，特别是移动应用 |
| 搜索引擎优化（SEO） | 可以直接做 | 需要单独方案做，有点麻烦 |
| 开发难度 | 低一些，框架选择容易 | 高一些，需要专门的框架来降低这种模式的开发难度 |
什么是单页应用SPA相关推荐
- 单页应用 (SPA)
1.什么是单页应用? 单页Web应用(single page web application,SPA),就是只有一张Web页面的应用,是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的W ...
- 单页应用SPA的优缺点
单页应用的优缺点 1.优点 而单页应用则是一次性把web应用的所有代码(HTML,JavaScript和CSS)全部请求过来,有时候考虑到首屏加载太慢会按需加载.这样一来,以后用户的每一个动作都不会重 ...
- Vue单页应用(SPA)及其优缺点
一.什么是单页面应用和多页应用? 单页应用:只有一个主页面的应用,一开始只需要加载一次js.css等相关资源.单页应用跳转,就是使用路由跳转切换相关组件,仅刷新局部资源. 多页应用:多个独立的页面的应 ...
- 基于jQuery/zepto的单页应用(SPA)搭建方案
这里介绍一个基于jquery或zepto的单页面应用方案,遵循尽可能简单的原则,使大家一目了然,只需配置一个路由,之后完全按照jq日常写法即可完成.可做学习使用,也可修改后用于一些业务逻辑简单的spa ...
- 前端学习（1510）：单页应用SPA实现原理
- 前端学习（1509）：单页应用SPA特点
- 单页（SPA）首页白屏优化
背景:由于目前线上版本的h5加载一直很慢,于是趁着最近有空就打算优化一下,首先打开network分析影响加载速度的文件有哪些. 看原文件大小有接近1.4m,不能忍!!! 注意: 1.博主这里用的vue ...
- api存在csrf攻击吗_使用rest api防止单页应用上的csrf攻击
api存在csrf攻击吗 tl;dr - If your SPA uses a private REST API, use CORS and a CSRF Token header. If your ...
- 单页应用和多页应用的区别
一.定义区分 [1.1]单页应用 单页应用又称 SPA(Single Page Application)指的是使用单个 HTML 完成多个页面切换和功能的应用.这些应用只有一个 html 文件作为入口 ...
- 单页应用的优缺点_单页和多页应用程序之间的优缺点
单页应用的优缺点 Currently, there are two ways of building websites: as multi-page applications (MPAs) or as ...
最新文章
- 全新 DOCKER PALS 计划上线，带给您不一样的参会体验！...
- Monkey测试1——Monkey的使用
- 这六段代码隐藏着深度学习的前世今生！
- linux smplayer 快捷键,SMPlayer：让 MPlayer 的使用更简单
- python中ans的用法_Python的一些用法分享
- 服务器find寻找文件路径,Linux find 查找文件
- python - 定时拍照并发送到qq
- openstack数据库获取一个虚机的floating_ip, fix_ip, project_name, user_name, hostname, host
- iOS-在团队开发过程中控制代码版本
- python中的tkinter_基于python中tkinter的计算机实现
- Flink – SlotSharingGroup
- iOS 将16进制字符串转换成UIColor
- ASP.NET URL Routing
- SEO流量工具-免费SEO流量排名优化工具
- 多库多表场景下使用 Amazon EMR CDC 实时入湖最佳实践
- Win11 封杀第三方浏览器工具，不用 Edge 就不行
- 珍视友情、珍爱生命、珍重和平—读余秋雨散文作品感悟
- 计算机核心基础、计算机硬件组成原理、计算机硬件组成详解、硬盘接口及操作系统、计算机网络简述、OSI七层协议、子网划分、 VLAN简述
- Python开发常见bug
- 分析ERP审单失败，提示：库存不足的原因及应对方案