什么是SPA页面,它的优缺点?
什么是SPA
spa是单页面应用(single page web application),浏览器会一开始就加载所需要的html、css、javascript。一旦页面加载完毕,整个页面就不会因为用户的操作而重新加载或者页面跳转;没有页面的跳转,是如何实现页面跳转的效果呢?使用路由机制,一个key对应一个vlaue,实现内容的切换,实现不同内容的展示;
优点
使用MVVM经典模式,后端数据和页面结构分离,架构清晰,前端交互逻辑,后端负责数据处理;用户体验好,加载页面速度快,页面内容的改变不需要加载整个页面,避免了非必要的页面条状和重新渲染;
缺点
初次加载消耗过多,为了实现功能和显示效果,首次需要统一加载javascript、css、html ;页面的后退前进切换都是通过路由实现,不能使用浏览器的后退和前进按键;
由于所有的内容在一个页面显示,所以SEO天然存在弱势;
什么是SPA页面,它的优缺点?的更多相关文章
- SPA页面初试
之前一直很好奇,SPA应用到底是怎么实现的,昨天无意间看到了有一篇介绍的文章,就想着来试一下水(以下根据我的理解所写,可能会让你看的云里雾里,如果想加深了解,最好先了解下window.location ...
- SPA页面
背景: 单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用,它将所有的活动均局限于一个Web页面中:这就表示Web应用被加载出来之后,W ...
- requirejs+angularjs搭建SPA页面应用
AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核 ...
- Html - SPA页面收集(有图)
场景,左图,又字段的布局 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- SPA页面缓存再优化二
部署到线上的步骤: 拿到打包之后的文件,删除服务器上的文件,再放上去的. 测试1: 更改js文件,删除并上传新包. 额外发现1:如果用户在上传期间,仍然在系统之内,此时即使将服务器上的包删除掉,用户不 ...
- SPA页面性能优化
1. 快速启动 —— 极大提升加载速度(important) 快速启动应用,并行发起 Bundle 加载&拉取初始数据.相信大家已经发现了,SPA 初始化时候,不得不等待 bundle 返回并 ...
- VUE单页面的应用优缺点
1.优 分离前后端关注点,前端负责界面显示,后端负责数据存储和计算. 减轻服务器压力,服务器只用出数据就可以: 同一套后端程序代码,不用修改就可以用于多种设备客户端: 2019-06-19用户体验好. ...
- vue等单页面应用及其优缺点
优点: Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件,核心是一个响应的数据绑定系统.MVVM.数据驱动.组件化.轻量.简洁.高效.快速.模块友好. 缺点: 不支持低版本 ...
- 快速了解SPA单页面应用
简要 SPA单页网页应用程序这个概念并不算新,早在2003年就已经有在讨论这个概念了,不过,单页应用这个词是到了2005年才有人提出使用,SPA的概念就和它的名字一样显而易懂,就是整个网站不再像传统的 ...
- 通过Blazor使用C#开发SPA单页面应用程序(2)
今天我们尝试创建一个默认的Blazor应用. 1.安装 .Net Core 3.0需要Visual Studio 2019 的支持. 安装.Net Core 3.0 预览版 SDK版本,注意预览版对应 ...
随机推荐
- Jmeter函数助手34-digest
digest函数用于返回特定哈希算法的加密值. 算法摘要:填入算法,如MD2.MD5.SHA-1.SHA-224.SHA-256.SHA-384.SHA-512 String to be hashed ...
- Python将信息发送到指定邮箱
目的:将Python执行脚本结果发送到指定邮箱 使用场景:可将每天.每周定时任务python跑的结果汇总,定时发送到小组成员/领导邮箱中 1.以下163邮箱为例,设置发件人是163邮箱,接收人是qq邮 ...
- 【Java】Collections 集合工具类
Collections 集合工具类 - 操作Set.List.Map等集合的工具 - 提供了排序.查询.修改.操作,提供对对象设置不可变对集合容器对象实现同步控制等方法 排序操作: - static ...
- NVIDIA的ROS项目 —— Isaac ROS
文档地址: https://nvidia-isaac-ros.github.io/index.html Github地址: https://github.com/NVIDIA-ISAAC-ROS
- 《A Palestinian Woman Embraces the Body of Her Niece》—— 4月19日报道 2024年世界新闻摄影大赛结果在荷兰出炉,一张巴勒斯坦妇女在加沙地带抱着被杀害的五岁侄女尸体的照片被评为年度最佳作品
The genocide is not just a matter between the parties involved; it's a concern for all humanity. Gen ...
- openAI的仿真环境Gym Retro的Python API接口
如题,本文主要介绍仿真环境Gym Retro的Python API接口 . 官网地址: https://retro.readthedocs.io/en/latest/python.html ===== ...
- PEP 703作者给出的一种no-GIL的实现——python3.9的nogil版本
PEP 703的内容是什么,意义又是什么呢? 可以说python的官方接受的no-GIL提议的PEP就是PEP 703给出的,如果GIL帧的从python中移除那么可以说对整个python生态圈将有着 ...
- /usr/bin/ld cannot find -lGL
安装mujoco报错: /usr/bin/ld cannot find -lGL 解决方法: sudo apt install libgl1-mesa-dev
- ubuntu22.04系统环境下使用vs code安装pylint检查python的代码错误
紧跟前文: ubuntu18.04系统环境下使用vs code安装pylint检查python的代码错误 pylint官网: https://pylint.pycqa.org/ =========== ...
- java:找不到符号(使用lombok)
1.背景 启动报错: Error:(76, 34) java: 找不到符号 符号: 方法 getOrderNo() 位置: 类型为XXXXX.request.coupon.SubmitOrderObj ...