什么是SPA

spa是单页面应用(single page web application),浏览器会一开始就加载所需要的html、css、javascript。一旦页面加载完毕,整个页面就不会因为用户的操作而重新加载或者页面跳转;没有页面的跳转,是如何实现页面跳转的效果呢?使用路由机制,一个key对应一个vlaue,实现内容的切换,实现不同内容的展示;

优点

使用MVVM经典模式,后端数据和页面结构分离,架构清晰,前端交互逻辑,后端负责数据处理;用户体验好,加载页面速度快,页面内容的改变不需要加载整个页面,避免了非必要的页面条状和重新渲染;

缺点

初次加载消耗过多,为了实现功能和显示效果,首次需要统一加载javascript、css、html ;页面的后退前进切换都是通过路由实现,不能使用浏览器的后退和前进按键;

由于所有的内容在一个页面显示,所以SEO天然存在弱势;

什么是SPA页面,它的优缺点?的更多相关文章

  1. SPA页面初试

    之前一直很好奇,SPA应用到底是怎么实现的,昨天无意间看到了有一篇介绍的文章,就想着来试一下水(以下根据我的理解所写,可能会让你看的云里雾里,如果想加深了解,最好先了解下window.location ...

  2. SPA页面

    背景: 单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用,它将所有的活动均局限于一个Web页面中:这就表示Web应用被加载出来之后,W ...

  3. requirejs+angularjs搭建SPA页面应用

    AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核 ...

  4. Html - SPA页面收集(有图)

    场景,左图,又字段的布局 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  5. SPA页面缓存再优化二

    部署到线上的步骤: 拿到打包之后的文件,删除服务器上的文件,再放上去的. 测试1: 更改js文件,删除并上传新包. 额外发现1:如果用户在上传期间,仍然在系统之内,此时即使将服务器上的包删除掉,用户不 ...

  6. SPA页面性能优化

    1. 快速启动 —— 极大提升加载速度(important) 快速启动应用,并行发起 Bundle 加载&拉取初始数据.相信大家已经发现了,SPA 初始化时候,不得不等待 bundle 返回并 ...

  7. VUE单页面的应用优缺点

    1.优 分离前后端关注点,前端负责界面显示,后端负责数据存储和计算. 减轻服务器压力,服务器只用出数据就可以: 同一套后端程序代码,不用修改就可以用于多种设备客户端: 2019-06-19用户体验好. ...

  8. vue等单页面应用及其优缺点

    优点: Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件,核心是一个响应的数据绑定系统.MVVM.数据驱动.组件化.轻量.简洁.高效.快速.模块友好. 缺点: 不支持低版本 ...

  9. 快速了解SPA单页面应用

    简要 SPA单页网页应用程序这个概念并不算新,早在2003年就已经有在讨论这个概念了,不过,单页应用这个词是到了2005年才有人提出使用,SPA的概念就和它的名字一样显而易懂,就是整个网站不再像传统的 ...

  10. 通过Blazor使用C#开发SPA单页面应用程序(2)

    今天我们尝试创建一个默认的Blazor应用. 1.安装 .Net Core 3.0需要Visual Studio 2019 的支持. 安装.Net Core 3.0 预览版 SDK版本,注意预览版对应 ...

随机推荐

  1. 【Java】Maven模块化工程SSM整合

    创建数据库一个演示表User CREATE TABLE `user` ( `id` int NOT NULL AUTO_INCREMENT, `name` varchar(64) DEFAULT NU ...

  2. 切记:使用nvidia omniverse时一定要用2T的固态硬盘

    最近在用nvidia omniverse时突然发现这样的一个问题,那就是这个软件实在是太太了,一个组件就4个多GB大小,如果安装几个组件后那么几十GB的硬盘就没有了,同时由于这个体积太大,因此再启动和 ...

  3. anaconda环境下:强化学习PPO算法仿真环境库sample-factory的python完美适配版本为python3.11

    anaconda环境下:强化学习PPO算法仿真环境库sample-factory的python完美适配版本为python3.11 库sample-factory地址: https://github.c ...

  4. 在深度计算框架MindSpore中如何对不持续的计算进行处理——对数据集进行一定epoch数量的训练后,进行其他工作处理,再返回来接着进行一定epoch数量的训练——单步计算

    如题所述: 深度学习框架MindSpore是华为公司研发的,由于性能设计的原因,MindSpore的一些使用方式和TensorFlow和PyTorch有一些不同,其中的一点就是在进行单步计算或者是非持 ...

  5. 如何使用git通过ssh协议拉取gitee上的项目代码——如何正确的免密使用git

    如何在gitee网站上生成/添加SSH公钥见教程: 生成/添加SSH公钥 测试公私秘钥是否成功: ssh -T git@gitee.com ============================== ...

  6. 强化学习的REIINFORCE算法和交叉熵RL算法

    注意: 本文并不讲REINFORCE算法,而是讲强化学习的交叉熵算法,关于REINFORCE算法可以参看: https://www.cnblogs.com/devilmaycry812839668/p ...

  7. Apache DolphinScheduler 3.2.1 版本发布:增强功能与安全性的全面升级

    近期,Apache DolphinScheduler 社区激动地宣布 3.2.1 版本的发布.此次更新不仅着力解决了前一版本(3.2.0)中遗留的问题,而且引入了一系列的功能增强和优化措施. 原先的问 ...

  8. Mac M1 安装Homebrew

    /bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"

  9. XSS 基本概念和原理介绍

    XSS 基本概念和原理介绍 基本概念 跨站脚本攻击 XSS(Cross Site Scripting),为了不和层叠样式表 ( Cascading Style Sheets,CSS ) 的缩写混淆,故 ...

  10. WPF 模仿前端大佬写一个Hover效果

    先看一下效果吧: 原博主的地址:[动画进阶]神奇的卡片 Hover 效果与 Blur 的特性探究 - ChokCoco - 博客园 (cnblogs.com) 原效果是一个css效果,我们采用WPF的 ...