SPA单页应用的优缺点
SPA单页应用的优缺点
Single Page Web Application是一种特殊的Web应用,其所有的活动局限于一个Web页面中,仅在该Web页面初始化时加载相应的HTML、JavaScript、CSS文件,一旦页面加载完成,SPA不会进行页面的重新加载或跳转,而是利用JavaScript动态的变换HTML,默认Hash模式是采用锚点实现路由以及元素组件的显示与隐藏实现交互,简单来说SPA应用只有一个页面,通常多页面应用会有多个页面不断跳转,而单页面应用始终在一个页面中,默认Hash模式是通过锚点实现路由以及控制组件的显示与隐藏来实现类似于页面跳转的交互。
优点
- 良好的交互体验,页面首次加载完成后内容的改变不需要重新加载整个页面,具有更快的响应速度,具有桌面应用的即时性、网站的可移植性和可访问性。
- 良好的前后端工作分离模式,单页应用可以和
RESTful架构一起使用,通过RESTAPI提供接口数据,有助于分离客户端和服务器端工作与API通用化。 - 减轻服务端压力,服务端不需要处理页面模板的逻辑与拼接,除首次加载页面外只需要提供数据信息即可,把计算尽量放在客户端,单页应用能提高单位服务器的负载量。
- 可维护性高,通常采用组件化与模块化开发,代码复用程度高,相对来说可维护性高。
缺点
- 不利于
SEO,由于是采用前端渲染的方式,搜索引擎不会去解析Js从而只能够抓取首页未渲染的模板,如果需要单页面应用有更好的SEO,那么通常需要使用SSR服务端渲染,搜索引擎爬虫抓取工具可以直接查看完全渲染的页面,但是由于是服务端进行渲染,那么会对服务器造成一定压力,SSR服务端渲染属CPU密集型,当然如果只是需要SEO少数几个页面,可以采用预渲染的方式。 - 首次加载速度慢,
SPA单页应用通常首次加载页面时就会将相应的HTML、JavaScript、CSS文件全部加载,通常可以通过采取缓存措施以及懒加载即按需加载组件的方式来优化。
每日一题
https://github.com/WindrunnerMax/EveryDay
参考
https://www.jianshu.com/p/9258583ef4ab
https://juejin.im/post/6844903512107663368
https://blog.csdn.net/huangpb123/article/details/86183453
SPA单页应用的优缺点的更多相关文章
- 前端 SPA 单页应用数据统计解决方案 (ReactJS / VueJS)
前端 SPA 单页应用数据统计解决方案 (ReactJS / VueJS) 一.百度统计的代码: UV PV 统计方式可能存在问题 在 SPA 的前端项目中 数据统计,往往就是一个比较麻烦的事情,Re ...
- [vue]spa单页开发及vue-router基础
- 了解spa页面跳转方式:(2种) spa: 单页跳转方式 开发(hash模式): https://www.baidu.com/#2313213 生产(h5利于seo): history.pushS ...
- Javascript 与 SPA单页Web富应用
书单推荐 # <单页Web应用:JavaScript从前端到后端> http://download.csdn.net/detail/epubitbook/8720475 # <MVC ...
- 单页Web应用优缺点
一.定义单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用.它将所有的活动局限于一个Web页面中,仅在该Web页面初始化时加载相应的HT ...
- 【读书笔记】WebApi 和 SPA(单页应用)--knockout的使用
Web API从MVC4开始出现,可以服务于Asp.Net下的任何web应用,本文将介绍Web api在单页应用中的使用.什么是单页应用?Single-Page Application最常用的定义:一 ...
- 大熊君学习html5系列之------History API(SPA单页应用的必备)
一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...
- 基于VUE的SPA单页应用开发-加载性能篇
1.基于异步数据的vue页面刷新 先看看基于异步数据的vue页面刷新后,都发生了啥- 如图所示: 图1 基于异步数据的vue页面刷新 网络请求图 步骤如下: step1:请求页面: step2:请求页 ...
- 前端学习之路之SPA(单页应用)设计原理
SPA设计 1.设计意义 前后端分离 减轻服务器压力 增强用户体验 Prerender预渲染优化SEO 前后端分离:前端做业务逻辑,后端处理数据和接口,耦合度减少,开发效率提高. 减轻服务器压力:一个 ...
- 大熊君学习html5系列之------History API(SPA单页应用的必备------重构完结版)
一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...
- SPA单页应用前后分离微信授权
项目基于微信公众号开发,业务完全依赖微信授权,也就是用户进入页面已经完成授权获取到用户的OpenId. 需要有一个授权中间页:author.vue 基本实现思路: 无论使用哪个url进入页面都会先触发 ...
随机推荐
- iframe访问页面,出现 ERR_BLOCKED_BY_RESPONSE
那是因为服务器输出了 X-Frame-Options 头,只要把这个头删除掉,就没问题了
- [转帖]七. PostgreSQL逻辑结构(1)—数据库和模式
https://www.jianshu.com/p/ee8b1bdfdb19 在PostgreSQL里,逻辑结构从高到底依次是:数据库.模式(又叫架构).表.行.当我们打开PostgreSQL官方自带 ...
- [转帖]《Linux性能优化实战》笔记(二)—— CPU 上下文切换(上)
上一篇的最后一个例子,在多个进程竞争CPU时,我们看到每个进程实际上%usr部分只有20%多,70%多是在wait,但是load远远高于单个进程使用CPU达到100%. 这让我想到之前看的RWP公开课 ...
- [转帖]Datadog 能成为最大的云监控厂商吗
https://xie.infoq.cn/article/901cfd6b284e3e103ac70aeb3 作者:睿象云 2021-03-25 本文字数:2256 字 阅读完需:约 7 分钟 D ...
- [转帖]Linux系统硬链接和软链接具体实例讲解(超详细)
简介 在 Linux 中,元数据中的 inode 号(inode 是文件元数据的一部分但其并不包含文件名,inode 号即索引节点号)才是文件的唯一标识而非文件名.文件名仅是为了方便人们的记忆和使用, ...
- [转帖]Nacos 获取配置时启用权限认证
默认情况下获取 Nacos 中的配置是不需要权限认证的, 这个估计是由其使用场景决定的(绝大多数都是仅内网可访问). 今天调查了下如何在获取配置时增加权限验证以提高其安全性. 1. 启用 Nacos ...
- python+selenium+opencv验证滑块
我们在使用selenium爬虫的时候在登录时经常会遇到滑块验证码问题,导致登录受阻,正所谓万事开头难. 登录就登录不进去更别提往后的操作的.今天以登录京东后台来演示下如何破解滑块. 一.登录 首先我们 ...
- PGO前瞻
原文在这里. 原文发布于2023年2月8日 在构建Go二进制文件时,Go编译器会进行优化,以尽可能生成性能最佳的二进制文件.例如,常量传播可以在编译时对常量表达式进行求值,避免了运行时的计算开销:逃逸 ...
- python中可变参数与装饰器的例子
python的可变参数 方法定义 #*args是可以传list类型的可变参数,**kwargs是可以传dict的可变参数 def wrapper(*args, **kwargs): 使用示例 def ...
- MySQL【二】---数据库查询详细教程{查询、排序、聚合函数、分组}
1.数据准备.基本的查询(回顾一下) 创建数据库 create database python_test charset=utf8; 查看数据库: show databases; 使用数据库: use ...