一、什么是SPA(单页面应用)

SPA 是一种特殊的 Web 应用,是加载单个 HTML 页面并在用户与应用程序交互时动态更新该页面的。它将所有的活动局限于一个 Web 页面中,仅在该 Web 页面初始化时加载相应的 HTML 、 JavaScript 、 CSS 。一旦页面加载完成, SPA 不会因为用户的操作而进行页面的重新加载或跳转,而是利用 JavaScript 动态的变换 HTML(采用的是 div 切换显示和隐藏),从而实现UI与用户的交互。在 SPA 应用中,应用加载之后就不会再有整页刷新。相反,展示逻辑预先加载,并有赖于内容Region(区域)中的视图切换来展示内容。

二、SPA的特点

单页Web应用(single page web application,SPA)是当今网站开发技术的弄潮儿,很多传统网站都在或者已经转型为单页Web应用,新的单页Web应用网站(包括移动平台上的)也如雨后春笋般涌现在人们的面前,如Gmail、Evernote、Trello等。如果你是一名Web开发人员,却还没开发过或者甚至是没有听说过单页应用,那你已经Out很久了。

单页Web应用和前端工程师们息息相关,因为主要的变革发生在浏览器端,用到的技术其实还是HTML+CSS+JavaScript,所有的浏览器都原生支持,当然有的浏览器因为具备一些高级特性,从而使得单页Web应用的用户体验更上一层楼。

单页Web应用,顾名思义,就是只有一张Web页面的应用。浏览器一开始会加载必需的HTML、CSS和JavaScript,之后所有的操作都在这张页面上完成,这一切都由JavaScript来控制。因此,单页Web应用会包含大量的JavaScript代码,复杂度可想而知,模块化开发和设计的重要性不言而喻。

三、SPA优缺点

1、 优点 

1) 有良好的交互体验
能提升页面切换体验,用户在访问应用页面是不会频繁的去切换浏览页面,从而避免了页面的重新加载;
2) 前后端分离开发
单页Web应用可以和 RESTful 规约一起使用,通过 REST API 提供接口数据,并使用 Ajax 异步获取,这样有助于分离客户端和服务器端工作。更进一步,可以在客户端也可以分解为静态页面和页面交互两个部分;
3) 减轻服务器压力
服务器只用出数据就可以,不用管展示逻辑和页面合成,吞吐能力会提高几倍;
4) 共用一套后端程序代码
不用修改后端程序代码就可以同时用于 Web 界面、手机、平板等多种客户端;

2、缺点:
1) SEO难度较高
由于所有的内容都在一个页面中动态替换显示,所以在SEO上其有着天然的弱势,所以如果你的站点对SEO很看重,且要用单页应用,那么就做些静态页面给搜索引擎用吧;
2) 前进、后退管理
由于单页Web应用在一个页面中显示所有的内容,所以不能使用浏览器的前进后退功能,所有的页面切换需要自己建立堆栈管理,当然此问题也有解决方案,比如利用URI中的散列+iframe实现;
3) 初次加载耗时多
为实现单页Web应用功能及显示效果,需要在加载页面的时候将JavaScript、CSS统一加载,部分页面可以在需要的时候加载。所以必须对JavaScript及CSS代码进行合并压缩处理;

关于前端SPA(单页面应用)相关推荐

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

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

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

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

  3. 【浅入浅出】现代前端框架单页面

    在前端预备:现代前端框架单页面概念这一篇里,作者讲到了单页面,跟前端路由实现,我准备分两篇来记录. 首先,里面提到了一个概念:DOM 直出 简单说就是在浏览器输入网址后发起请求,返回来的 HTML 页 ...

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

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

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

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

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

    [vue] 说说你对SPA单页面的理解,它的优缺点分别是什么? 介绍:SPA应用就是一个web应用,可理解为:是一种只需要将单个页面加载到服务器之中的web应用程序.当浏览器向服务器发出第一个请求时, ...

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

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

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

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

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

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

  10. 前端的单页面模式和多页面模式

    一.前言 前端部分的搭建,需要考虑使用哪种模式进行页面之间的跳转交互, 而项目内的页面交互,不可避免的需要相互之间的数据共享. 这就引出了本篇博客的目的,一起来谈谈:项目前端部分的构建方式以及数据共享 ...

最新文章

  1. Halcon 点云拟合平面并获取单位法向量及位姿
  2. 有没有记录程序运行中所有的函数调用堆栈的工具?
  3. 1.24 Lambda表达式与匿名内部类的联系和区别
  4. CodeForces - 1333D Challenges in school №41(构造+模拟)
  5. IP通信基础 实验三
  6. 【声学基础】概述——吸收
  7. 清华,北大坐实亚洲大学Top2,泰晤士2020亚洲大学榜
  8. 微信小程序 JavaScript(JS)字符串转gbk(无需下载,无需积分)
  9. keil安装GD32 pack包安装不上 不显示 没有了
  10. java根据天数求周数_利用Java中Calendar计算两个日期之间的天数和周数
  11. 【Python】可视化台风路径轨迹图
  12. git 如何把develop分支代码合并到master主分支
  13. 认证系统之 devise 简单入门教程 (三)
  14. NV12图片裁剪算法
  15. select中选中option的方法
  16. Simulink简单模型
  17. 城市轨道交通联锁试验方法介绍
  18. 第一课:Mstar-Non-OS方案(一)——搭建编译环境
  19. 理论基础篇 -- 【计算机网络通关29讲笔记】
  20. commonjs 与 esm 的区别

热门文章

  1. java overload_Java中的Overload和Override有什么区别
  2. 算法界的“视界杯”,2021腾讯广告算法大赛来了!
  3. 使用html表单制作简单网页(加表单详细知识点)
  4. 代理模式实例与解析--实例一:论坛权限控制代理
  5. 恶魔奶爸 指南帖——简易版
  6. Android 4.1 Netd详细分析(一)概述与应用实例
  7. android 相对布局(RelativeLayout)
  8. 知乎推荐育儿书籍汇总
  9. 通感一体化学习笔记(1)——匹配滤波与脉冲压缩
  10. EasyUI下拉框自适应高度