SPA架构的优点和缺点以及一些思考
SPA是什么?
全称是单页面应用。
一个SPA就是一个WEB应用,它所需的资源(HTML CSS JS等),在一次请求中就加载完成,也就是不需刷新地动态加载。
用术语“单页”就是因为页面在初始化加载后就永远不会重新加载刷新。
优点:
减轻服务器端的压力。
因为服务器先将一份包含了静态资源、JavsScript和模板的静荷数据(payload)发送到了客户端,之后客户端只需要获取渲染页面或视图所需要的数据即可。
payload就是起关键作用的资源
提高了页面的渲染效果。
由于移动设备的流行,可以开发提供JSON格式数据的网络服务,然后可以提供不同的客户端使用。
SPA的使用,我们可以使用一个HTTP API,一个HTTP API相比在服务端渲染一个HTML页面有诸多好处,这样就可以很方便的进行单元测试等操作,还可以被其他很多客户端程序所用。
SPA最大的好处就是大量的工作都在浏览器中完成,服务端承担更少的工作,这样就可以处理更多的请求。同时SPA需要额外的请求模版开销,我们可以通过预编译模版、缓存机制和将多个模板拼接成一个大的模板来减少请求数量。
缺点:
首屏加载时间会很长。
SEO不友好。
主要是因为SPA利用了hash片段实现路由,而利用hash片段不会作为HTTP请求中的一部分发送给服务器。
而SPA使用hash片段的目的是:当片段的内容发送变化时,浏览器不会像URI发送变化时那样发起新的网络请求。这样就可以只请求页面或视图渲染所需要的数据,而不是为每一个页面获取并解析整份文档。
SPA架构的优点和缺点以及一些思考的更多相关文章
- 架构设计的UML图形思考
本篇紧接着上一篇 基本OOP知识 ,介绍高焕堂老师的第二讲. 架构设计的UML图形思考.本篇最重要的是三个词语:图形.思考.UML. 架构师的作用体现主要在项目开发前期.在整个项目还没有完毕的时 ...
- 单页面应用SPA架构
个人认为单页面应用的优势相当明显: 前后端职责分离,架构清晰:前端进行交互逻辑,后端负责数据处理. 前后端单独开发.单独测试. 良好的交互体验,前端进行的是局部渲染.避免了不必要的跳转和重复渲染. 当 ...
- 构建iOS稳定应用架构时方案选择的思考,主要涉及工程结构,数据流思想和代码规范
工程结构架构,减少耦合混乱以及防治需求大改造成结构重构,如何构建稳定可扩展可变换的工程结构的思考 我打算采用Information flow的方式自上而下,两大层分为基础层和展现层的结构.基础层分为多 ...
- 关于PHP架构师进阶的一些思考
相信大家都有感觉,就是当程序员写业务写了几年后,就会有想进阶的想法,技术方面当然就是架构师了,然后具体从哪些方面丰富自己才能个达到目的呢?大部分人可能会很迷茫,当然也包括我, 最近和很多大牛交流了一些 ...
- Serverless 架构的优点和缺点
Serverless 的优势 在我使用 Serverless Framework 开发 AWS Serverless 应用的过程中,最方便的莫过于,第一次部署和第二次.第三次部署没有什么区别.只需要执 ...
- 关于三层架构和MVC模式的思考
MVC模式 核心: 1.解耦Model和View,即使得Model可以被不同的展示,比如一批统计数据可以分别用柱状图.饼图表示 2.Controller用来保证Model和View的同步 Model ...
- SPA架构
databus ajax处理得到得数据 service 对databus做缓存,以及业务(如评论列表,评论详情) component 组件 html+css+js组成 evenbus 组件之间通讯,数 ...
- ASP.NET三层架构的优点和缺点
原文发布时间为:2009-10-24 -- 来源于本人的百度文章 [由搬家工具导入] 小项目,以后变动不大的不用三层架构。 ASP.NET三层结构说明 完善的三层结构的要求是:修改表现层而不用修改逻辑 ...
- 《SPA设计与架构》之认识SPA
原文 简书原文:https://www.jianshu.com/p/84323f530223 大纲 前言 1.什么是单页面应用程序(SPA) 2.SPA与传统Web应用的区别 3.关于SPA的使用 4 ...
随机推荐
- lombok的简单介绍
##lombok的使用 一直在使用lombok的set和get,对其他的功能用的比较少,蓦然发现这个库好用的功能不要太多啊 有必要深入理解一番. ###lombok安装 1 需要IDE支持,不然开发的 ...
- MySQL解压包的安装教程
一.下载MySQL解压包 解压过的文件夹里面是没有 data 文件夹的. 二.创建文件 1.在根目录下创建 my.ini文件 内容如下: [mysqld] # 设置mysql的安装目录 basedir ...
- 201621123002《JAVA程序设计》第十四周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结与数据库相关内容. 2. 使用数据库技术改造你的系统 2.1 简述如何使用数据库技术改造你的系统.要建立什么表?截图你的表设计. 用 ...
- UI设计之动画—从虚拟到现实
以下内容由摹客团队翻译整理,仅供学习交流,摹客iDoc是支持智能标注和切图的产品协作设计神器. 用户界面设计中的动画一直是这几年热议的话题,尤其活跃在概念动画领域.它为设计师提供创造性实验并推动UI动 ...
- vue中提示$index is not defined
今天学习Vue中遇到了一个报错信息:$index is not defined,是我写了个for循环在HTML中,然后是因为版本的问题 下面是解决方法: 原来的是 v-for="person ...
- C/C++生成静态库动态库及语言交互
C++静态库与动态库(比较透彻) Go中调用C的动态库与静态库 我的示例 文件结构 |- sample |- c |- libsample |- libsample.h |- libsample.cp ...
- Linux环境(Centos7)下部署.NetCore2.0的Web应用
Web应用基于Windows环境下开发,然后部署到Linux 1.进入VS2017,点击新建->项目->.NetCore->ASP.NET Core Web应用程序,确定 2.选择W ...
- 2019浙江省赛K zoj4110 Strings in the Pocket(manachar)
http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=6012 题意 给你两个串,可以翻转a串的一个区间,问有多少对l,r使得翻转后的a ...
- JavaScript-BOM与DOM
BOM与DOM BOM: Browser Object Model(浏览器对象模型),即把 浏览器 当做一个对象来看待.BOM 除了可以访问文档中的组件之外,还可以访问 浏览器组件,比如页面中的 na ...
- [swarthmore cs75] Compiler 1 – Adder
课程回顾 Swarthmore学院16年开的编译系统课,总共10次大作业.本随笔记录了相关的课堂笔记以及第3次大作业. 编译的过程:首先解析(parse)源代码,然后成抽象语法树(AST),再生成汇编 ...