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. Laravel - Eloquent 更新数据

    public function ormUpdate()     {         # 1.通过模型更新数据        /*  $student = Student::find(14);      ...

  2. 类外static函数定义要不要加static关键字?

    类外static函数定义要不要加static关键字? 先说答案:不需要. 错误代码: #include<iostream> #include<memory> using nam ...

  3. Linux-文件指令-cat-less-head-touch

  4. [转帖]谈谈ClickHouse性能情况以及相关优化

    https://zhuanlan.zhihu.com/p/349105024 ClickHouse性能情况 主要分为4个方面 1.单个查询吞吐量 场景一: 如果数据被放置在page cache中,则一 ...

  5. [转帖][大数据]ETL之增量数据抽取(CDC)

    https://www.cnblogs.com/johnnyzen/p/12781942.html 目录 1 CDC 概念 1.1 定义 1.2 需求背景 1.3 考察指标 2 CDC 常见解决方案 ...

  6. [转帖]鲲鹏性能优化十板斧——鲲鹏处理器NUMA简介与性能调优五步法

    https://www.cnblogs.com/huaweicloud/p/12166354.html 1.1 鲲鹏处理器NUMA简介 随着现代社会信息化.智能化的飞速发展,越来越多的设备接入互联网. ...

  7. 【转帖】什么是RLHF

    什么是RLHF? **字面翻译:**RLHF (Reinforcement Learning from Human Feedback) ,即以强化学习方式依据人类反馈优化语言模型. 强化学习从人类反馈 ...

  8. JDK发布版本的总结

    https://www.oracle.com/java/technologies/javase/8all-relnotes.html 从官网总结一下每个版本的发布日期 Java SE 8u141 Ad ...

  9. 开源IM项目OpenIM每周迭代版本发布-群管理 阅后即焚等-v2.0.6

    新特性介绍 OpenIM每周五发布新版,包括新特性发布,bug修复,同时合并PR,解决issue等 一个完善的IM系统,非常复杂,功能繁多,需求不一,比如对象存储有云端oss,cos,s3,私有化存储 ...

  10. TienChin 渠道管理-添加渠道

    在我们平时新建一个全新的 Java 类,这个类需要存放的包不存在,可以使用如下的方式进行创建: 含义就是说,将 ChannelVO 这个类放在 vo 这个包当中,如果存在则不创建,存在就将新建的类放入 ...