SPA单页应用的优缺点

Single Page Web Application是一种特殊的Web应用,其所有的活动局限于一个Web页面中,仅在该Web页面初始化时加载相应的HTMLJavaScriptCSS文件,一旦页面加载完成,SPA不会进行页面的重新加载或跳转,而是利用JavaScript动态的变换HTML,默认Hash模式是采用锚点实现路由以及元素组件的显示与隐藏实现交互,简单来说SPA应用只有一个页面,通常多页面应用会有多个页面不断跳转,而单页面应用始终在一个页面中,默认Hash模式是通过锚点实现路由以及控制组件的显示与隐藏来实现类似于页面跳转的交互。

优点

  • 良好的交互体验,页面首次加载完成后内容的改变不需要重新加载整个页面,具有更快的响应速度,具有桌面应用的即时性、网站的可移植性和可访问性。
  • 良好的前后端工作分离模式,单页应用可以和RESTful架构一起使用,通过RESTAPI提供接口数据,有助于分离客户端和服务器端工作与API通用化。
  • 减轻服务端压力,服务端不需要处理页面模板的逻辑与拼接,除首次加载页面外只需要提供数据信息即可,把计算尽量放在客户端,单页应用能提高单位服务器的负载量。
  • 可维护性高,通常采用组件化与模块化开发,代码复用程度高,相对来说可维护性高。

缺点

  • 不利于SEO,由于是采用前端渲染的方式,搜索引擎不会去解析Js从而只能够抓取首页未渲染的模板,如果需要单页面应用有更好的SEO,那么通常需要使用SSR服务端渲染,搜索引擎爬虫抓取工具可以直接查看完全渲染的页面,但是由于是服务端进行渲染,那么会对服务器造成一定压力,SSR服务端渲染属CPU密集型,当然如果只是需要SEO少数几个页面,可以采用预渲染的方式。
  • 首次加载速度慢,SPA单页应用通常首次加载页面时就会将相应的HTMLJavaScriptCSS文件全部加载,通常可以通过采取缓存措施以及懒加载即按需加载组件的方式来优化。

每日一题

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单页应用的优缺点的更多相关文章

  1. 前端 SPA 单页应用数据统计解决方案 (ReactJS / VueJS)

    前端 SPA 单页应用数据统计解决方案 (ReactJS / VueJS) 一.百度统计的代码: UV PV 统计方式可能存在问题 在 SPA 的前端项目中 数据统计,往往就是一个比较麻烦的事情,Re ...

  2. [vue]spa单页开发及vue-router基础

    - 了解spa页面跳转方式:(2种) spa: 单页跳转方式 开发(hash模式): https://www.baidu.com/#2313213 生产(h5利于seo): history.pushS ...

  3. Javascript 与 SPA单页Web富应用

    书单推荐 # <单页Web应用:JavaScript从前端到后端> http://download.csdn.net/detail/epubitbook/8720475 # <MVC ...

  4. 单页Web应用优缺点

    一.定义单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用.它将所有的活动局限于一个Web页面中,仅在该Web页面初始化时加载相应的HT ...

  5. 【读书笔记】WebApi 和 SPA(单页应用)--knockout的使用

    Web API从MVC4开始出现,可以服务于Asp.Net下的任何web应用,本文将介绍Web api在单页应用中的使用.什么是单页应用?Single-Page Application最常用的定义:一 ...

  6. 大熊君学习html5系列之------History API(SPA单页应用的必备)

    一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...

  7. 基于VUE的SPA单页应用开发-加载性能篇

    1.基于异步数据的vue页面刷新 先看看基于异步数据的vue页面刷新后,都发生了啥- 如图所示: 图1 基于异步数据的vue页面刷新 网络请求图 步骤如下: step1:请求页面: step2:请求页 ...

  8. 前端学习之路之SPA(单页应用)设计原理

    SPA设计 1.设计意义 前后端分离 减轻服务器压力 增强用户体验 Prerender预渲染优化SEO 前后端分离:前端做业务逻辑,后端处理数据和接口,耦合度减少,开发效率提高. 减轻服务器压力:一个 ...

  9. 大熊君学习html5系列之------History API(SPA单页应用的必备------重构完结版)

    一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...

  10. SPA单页应用前后分离微信授权

    项目基于微信公众号开发,业务完全依赖微信授权,也就是用户进入页面已经完成授权获取到用户的OpenId. 需要有一个授权中间页:author.vue 基本实现思路: 无论使用哪个url进入页面都会先触发 ...

随机推荐

  1. .NET技术面试题系列(2) -sql server数据库优化规范

    1.数据库优化规范 a.索引 每个表格都要求建立主键,主键上不一定需要强制建立聚集索引. 聚集索引,表中存储的数据按照索引的顺序存储,即逻辑顺序决定了表中相应行的物理顺序,因此聚集索引的字段值应是不会 ...

  2. [转帖]Linux命令之——rsync

    文章目录 1 rsync是干什么用的 2 rsync和scp有什么区别 3 rsync简单用法介绍 rsync四种工作方式 1. 本地文件系统上实现同步 2. 本地主机使用远程shell和远程主机通信 ...

  3. [转帖]grafana自定义告警模版

     发表于 2022-03-16  更新于 2023-03-03 因 grafana 告警信息太多无用数据,容易干扰查看例如使用 企业微信告警消息如下太多无用Labels 例如 endpoint,job ...

  4. [转帖]Innodb存储引擎-idb文件格式解析

    文章目录 ibd 文件格式解析 idb文件 page类型和格式(File Header & Trailer) FIL_PAGE_TYPE_FSP_HDR 格式 Extent Descripto ...

  5. [转帖]rsync参数详解

    最近经常需要传送文件,学习到rsync这个非常好用的工具.rsync的传输方不像是scp复制粘贴,而是是创建一个镜像,所以在传输效率上比scp命令要快很多,缺点就是对文件的属性如权限.用户.组.时间戳 ...

  6. [转帖]SystemStap、BCC、bpftrace

    https://plantegg.github.io/2019/09/16/SystemStap/ Linux 4.4+ 支持 eBPF.基于 eBPF 可以将任何内核函数调用转换成可带任何 数据的用 ...

  7. 【介绍一个工具】图形化界面查看一个 golang 二进制文件的汇编代码

    作者:张富春(ahfuzhang),转载时请注明作者和引用链接,谢谢! cnblogs博客 zhihu Github 公众号:一本正经的瞎扯 通常,可以通过命令行工具,来查看一个代码文件对应的汇编代码 ...

  8. 【解决了一个小问题】macbook m1上的docker build问题

    作者:张富春(ahfuzhang),转载时请注明作者和引用链接,谢谢! cnblogs博客 zhihu Github 公众号:一本正经的瞎扯 1. docker hub限制的问题 因为docker b ...

  9. Registration Authority 简介

    RA 功能简介 在公共密钥基础设施(PKI)中,CA(Certificate Authority,证书颁发机构)系统的RA(Registration Authority,注册机构)是PKI体系结构的重 ...

  10. Github搜索代码技巧

    ↵相关链接: 码云(gitee)配置SSH密钥 码云gitee创建仓库并用git上传文件 git 上传错误This oplation equires one of the flowi vrsionso ...