[vue] 说说你对SPA单页面的理解,它的优缺点分别是什么?

介绍:SPA应用就是一个web应用,可理解为:是一种只需要将单个页面加载到服务器之中的web应用程序。当浏览器向服务器发出第一个请求时,服务器会返回一个index.html文件,它所需的js,css等会在显示时统一加载,部分页面需要时加载。
优点:
1.良好的交互式体验。意思是:用户无需刷新页面,获取数据通过异步ajax获取,页面显示流畅
2.良好的前后端分离模式(MVVM),减轻服务端压力。服务器只需要输出数据就可以,不用管逻辑和页面展示,吞吐能力会提高几倍
3.共用同一套后端程序代码,不用修改就可用于web界面,手机和平板等客户端设备
缺点:
1.不利于SEO优化
2.由于单页应用在一个页面中显示,所以不可以使用浏览器自带的前进后退功能,想要实现页面切换需要自己进行管理
3.首屏加载过慢(初次加载耗时多),原因是:为了实现单页web应用功能及展示效果,在页面初始化的时候就会将js,css等统一加载,部分页面在需要时加载。当然也有解决方法。
解决方法:①使用路由懒加载 ②开启Gzip压缩 ③使用webpack的externals属性把不需要的库文件分离出去,减少打包后文件的大小 ④使用vue的服务端渲染(SSR)
举例spa应用:网易云音乐、QQ音乐等

个人简介

我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易,
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题

[vue] 说说你对SPA单页面的理解,它的优缺点分别是什么?相关推荐

  1. (25):SPA单页面的理解

    对SPA单页面的理解,它的优缺点分别是什么,如何实现SPA应用 一.什么是SPA 1.SPA(single-page application),翻译过来就是单页应用 2.SPA是一种网络应用程序或网站 ...

  2. Vue(七)SPA 单页面及应用方式

    目录 SPA(Single Page Application) 单页面应用 1. 单页面应用与多页面应用对比 2. 单页面应用步骤 3. SPA路由跳转 SPA(Single Page Applica ...

  3. [vue] SPA单页面的实现方式有哪些?

    [vue] SPA单页面的实现方式有哪些? 1.监听地址栏中hash变化驱动界面变化2.用pushsate记录浏览器的历史,驱动界面发送变化3.直接在界面用普通事件驱动界面变化它们都是遵循同一种原则: ...

  4. Java快速开发平台,JEECG 3.7.5 Vue SPA单页面应用版本发布

    JEECG 3.7.5 Vue SPA单页面应用版本发布 导读            ⊙ Vue+ElementUI SPA单页面应用 ⊙Datagrid标签快速切换BootstrapTable列表风 ...

  5. 通过Blazor使用C#开发SPA单页面应用程序(4) - Ant Design

    通过Blazor使用C#开发SPA单页面应用程序(1) 通过Blazor使用C#开发SPA单页面应用程序(2) 通过Blazor使用C#开发SPA单页面应用程序(3) 前面学习了Blazor的特点.环 ...

  6. SPA单页面应用首屏加载速度提升方法

    SPA单页面应用首屏加载速度提升方法 首屏加载 计算首屏加载时间公式 解决方法 减少入口文件体积 静态资源本地缓存 UI框架按需加载 避免组件重复打包 图片资源压缩 开启GZip压缩 首屏加载 首屏加 ...

  7. spa单页面应用html缓存问题

    一.背景 浏览器的http请求都有一个缓存机制,简单点说就是同路径同名文件会默认被缓存下来,提升下次访问时的速度,默认只有刷新页面或长时间未访问时才会刷新缓存. 而spa单页面应用是通过路由切换来访问 ...

  8. 当spa单页面应用遇上SEO,蛋痛的经历

    spa单页面应用优点当然毋庸置疑:效果酷炫,我在视觉和产品面前无从反驳:性能高速度快,全JS嘛当然快,我在运维和产品面前无言以对:运算分散,异步加载,又省硬件又省流量,我在开发和产品面前彻底投降:JS ...

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

    2019年9月23--25日 .NET Core 3.0即将在.NET Conf上发布! .NET Core的发布及成熟重燃了.net程序员的热情和希望,一些.net大咖也在积极的为推动.NET Co ...

最新文章

  1. Java 11 新特性
  2. 支付宝架构师眼里的高并发架构
  3. php+防御+xss,PHP防御XSS攻击
  4. Delphi中TVarRec做为参数的用法
  5. modelsim与modelsim_altera使用的一些区别
  6. javascript之闭包深入理解(一)
  7. 初中数学503个必考知识点_初中数学无非就这146个必考知识点,全摸透,轻松应对考试!...
  8. 计算机二级web题目(7.2)--基本操作题1
  9. Kafka的10道基础面试题
  10. 确定比赛名次(HDU-1285)
  11. ICCV2021 人脸深伪分析挑战赛 重磅来袭
  12. IT人员应该掌握的30种技能
  13. java项目环境怎么写_开发环境怎么写
  14. python图像的手绘效果代码_python实现手绘效果图
  15. linux usb模拟网卡,开发板作为USB设备模拟网卡(linux usb 网卡)--gadgetrndis|cdc
  16. tomcat连接oracle报错,跪求解决在eclipse中开oracle数据库库TOMCAT报错
  17. 网络广告创意与制作技巧
  18. DRM HDMI 调试分析之热插拔后HDMI不输出
  19. Why you should take your 20s seriously
  20. 无心剑中译奥修《错在您》

热门文章

  1. gis计算各省河流长度_用河流和各方解释安全漏洞
  2. 数据库课程设计结论_结论:
  3. ThinkPHP整合百度Ueditor图文教程
  4. 节后的人才市场开始活跃了?
  5. docker启动sqlserver_Docker搭建SQLServer
  6. python快乐数字怎么表达_Python经典面试题:这些面试题你会了吗?
  7. 所给服务器端程序改写为能够同时响应多个客户端连接请求的服务器程序_一文读懂客户端请求是如何到达服务器的...
  8. oracle查出连续5行,Oracle期末考试复习题2
  9. php splqueue 5.5安装,解析PHP标准库SPL数据结构
  10. 高新园区到大连计算机学校,大连高新区中心小学