- 浏览: 44596 次
- 性别:
- 来自: 深圳
最新评论
单页Web应用优缺点
一、定义
单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用。它将所有的活动局限于一个Web页面中,仅在该Web页面初始化时加载相应的HTML、JavaScript 和 CSS。一旦页面加载完成了,SPA不会因为用户的操作而进行页面的重新加载或跳转。取而代之的是利用 JavaScript 动态的变换HTML的内容,从而实现UI与用户的交互。由于避免了页面的重新加载,SPA 可以提供较为流畅的用户体验。
二、优缺点
单页Web程序的出现是富客户端发展的必然结果,但是该技术也是有些局限性,所以采用之前需要了解清楚它的优缺点。
1、优点:
1).良好的交互体验
用户不需要重新刷新页面,获取数据也是通过Ajax异步获取,页面显示流畅。
2).良好的前后端工作分离模式
单页Web应用可以和RESTful规约一起使用,通过REST API提供接口数据,并使用Ajax异步获取,这样有助于分离客户端和服务器端工作。更进一步,可以在客户端也可以分解为静态页面和页面交互两个部分。
3).减轻服务器压力
服务器只用出数据就可以,不用管展示逻辑和页面合成,吞吐能力会提高几倍;
4).共用一套后端程序代码
不用修改后端程序代码就可以同时用于Web界面、手机、平板等多种客户端;
2、缺点:
1).SEO难度较高
由于所有的内容都在一个页面中动态替换显示,所以在SEO上其有着天然的弱势,所以如果你的站点对SEO很看重,且要用单页应用,那么就做些静态页面给搜索引擎用吧。
2).前进、后退管理
由于单页Web应用在一个页面中显示所有的内容,所以不能使用浏览器的前进后退功能,所有的页面切换需要自己建立堆栈管理,当然此问题也有解决方案,比如利用URI中的散列+iframe实现。
3).初次加载耗时多
为实现单页Web应用功能及显示效果,需要在加载页面的时候将JavaScript、CSS统一加载,部分页面可以在需要的时候加载。所以必须对JavaScript及CSS代码进行合并压缩处理,如果使用第三方库,建议使用一些大公司的CDN,因此带宽的消耗是必然的。
三、框架AngularJS
AngularJS是一个 MV* 框架,最适于开发客户端的单页面应用。它不是个功能库,而是用来开发动态网页的框架。它专注于扩展HTML的功能,提供动态数据绑定(data binding),而且它能跟其它框架(如jQuery)合作融洽。
如果你要开发的是单页应用,AngularJS就是你的上上之选。Gmail、Google Docs、Twitter和Facebook这样的应用,都很能发挥AngularJS的长处。但是像游戏开发之类对DOM进行大量操纵、又或者单纯需要极高运行速度的应用,就不是AngularJS的用武之地了。
一、定义
单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用。它将所有的活动局限于一个Web页面中,仅在该Web页面初始化时加载相应的HTML、JavaScript 和 CSS。一旦页面加载完成了,SPA不会因为用户的操作而进行页面的重新加载或跳转。取而代之的是利用 JavaScript 动态的变换HTML的内容,从而实现UI与用户的交互。由于避免了页面的重新加载,SPA 可以提供较为流畅的用户体验。
二、优缺点
单页Web程序的出现是富客户端发展的必然结果,但是该技术也是有些局限性,所以采用之前需要了解清楚它的优缺点。
1、优点:
1).良好的交互体验
用户不需要重新刷新页面,获取数据也是通过Ajax异步获取,页面显示流畅。
2).良好的前后端工作分离模式
单页Web应用可以和RESTful规约一起使用,通过REST API提供接口数据,并使用Ajax异步获取,这样有助于分离客户端和服务器端工作。更进一步,可以在客户端也可以分解为静态页面和页面交互两个部分。
3).减轻服务器压力
服务器只用出数据就可以,不用管展示逻辑和页面合成,吞吐能力会提高几倍;
4).共用一套后端程序代码
不用修改后端程序代码就可以同时用于Web界面、手机、平板等多种客户端;
2、缺点:
1).SEO难度较高
由于所有的内容都在一个页面中动态替换显示,所以在SEO上其有着天然的弱势,所以如果你的站点对SEO很看重,且要用单页应用,那么就做些静态页面给搜索引擎用吧。
2).前进、后退管理
由于单页Web应用在一个页面中显示所有的内容,所以不能使用浏览器的前进后退功能,所有的页面切换需要自己建立堆栈管理,当然此问题也有解决方案,比如利用URI中的散列+iframe实现。
3).初次加载耗时多
为实现单页Web应用功能及显示效果,需要在加载页面的时候将JavaScript、CSS统一加载,部分页面可以在需要的时候加载。所以必须对JavaScript及CSS代码进行合并压缩处理,如果使用第三方库,建议使用一些大公司的CDN,因此带宽的消耗是必然的。
三、框架AngularJS
AngularJS是一个 MV* 框架,最适于开发客户端的单页面应用。它不是个功能库,而是用来开发动态网页的框架。它专注于扩展HTML的功能,提供动态数据绑定(data binding),而且它能跟其它框架(如jQuery)合作融洽。
如果你要开发的是单页应用,AngularJS就是你的上上之选。Gmail、Google Docs、Twitter和Facebook这样的应用,都很能发挥AngularJS的长处。但是像游戏开发之类对DOM进行大量操纵、又或者单纯需要极高运行速度的应用,就不是AngularJS的用武之地了。
发表评论
-
ES6 Array常用Api详解
2019-05-06 11:41 4041,Array.of Array.of方法用于将一组值, ... -
JavaScript基础
2019-03-23 21:23 01,数据类型 在JavaScri ... -
gulp
2019-03-21 10:25 0正则路径 https://blog.csdn.net/wi ... -
vue声明周期
2019-02-25 21:51 0vue -
Vue生命周期 VS React生命周期
2019-01-29 11:12 0Vue生命周: beforeCreate: c ... -
JavaScript 对象属性
2019-01-23 10:57 949JavaScript中的对象属性有两种: 一,数据 ... -
JavaScript闭包
2019-01-17 12:02 0要想真正理解闭包首先要先搞清楚作用域和作用域链。 1,作 ... -
常用收藏
2019-01-16 11:11 358参考链接 MongoDB用户权限管理 https:/ ... -
浏览器中进程与线程
2019-01-05 18:06 1222一,首先使用快捷键Shift+Esc打开浏览器Chrome任 ... -
Flex
2018-12-30 15:42 9492009年,W3C提出了一种新的布局方式:Flex布局。 ... -
linux下建立git仓库
2018-12-28 14:51 563参考文件 https://www.cnblogs.com/ ... -
Express中异常处理
2018-12-26 17:36 1327下面内容摘自网络文章,分析的很全面。 文章地址:http ... -
Express中如何使用async/await
2018-12-26 15:31 1261随着Node.js v7.6.0版本开 ... -
查看端口占用
2018-10-09 23:27 513参考:https://www.jianshu.com/p/ ... -
GIt部署到linux服务器
2018-09-30 12:01 951git一键部署代码到远程 ... -
JavaScript中常见继承方式
2018-09-14 18:16 564JavaScript作为弱类型语言,继承也是其强大的特性之 ... -
Node.js版本管理工具nvm
2018-09-09 10:52 600nvm是什么? nvm允许你在同一台机器上安装不同版 ... -
字符编码的发展历史
2018-09-08 09:52 0字符编码的发展历史 Unicode和UTF-8有何区别? ... -
nodejs-buffer
2018-09-07 18:13 0公所周知JavaScript语言不能处理二进制数据,但在服务 ... -
Git学习笔记
2018-09-04 18:07 384----------------------------- ...
相关推荐
"云计算的利弊优缺点分析" 云计算的利弊分析是当前IT行业的热门话题。本文将对云计算的定义、优缺点和应用进行详细的分析。 一、云计算的定义 云计算是一种新兴的、极具延展能力的运算方式,能将包括运算、储存及...
以下是这三个框架的详细优缺点分析: **Struts** Struts是一个开源的MVC框架,主要用于构建Web应用程序。它的主要优点包括: 1. **开源性**:Struts作为Apache基金会的项目,其源代码公开,开发者可以深入了解其...
以上是Vue后台管理系统中常用组件的优缺点分析,每种组件都有其适用场景和限制。在开发过程中,开发者需要根据实际需求和项目特点,选择合适的组件,并采取相应的策略来规避或减轻它们的缺点,以达到最佳的开发效果...
### STRUTS2 优缺点分析 #### 一、STRUTS2 优点概述 **1. Action 实现灵活性:** - **STRUTS2 的 Action 设计更灵活:**与 STRUTS1 中 Action 必须继承自 `Action` 类不同,STRUTS2 允许 Action 作为 POJO(Plain...
### CSS Sprite 原理与应用详解 #### CSS Sprite 概念 CSS Sprite,中文常称为“CSS精灵”,是一种常见的前端技术,用于优化网站加载速度和用户体验。它通过将多个小图片合并为一张大图,并借助CSS背景定位来实现...
### 单页面应用(SPA)与多页面应用(MPA)深入探讨 #### 一、概念解析 ##### 1. 单页面应用 SPA (Single Page Application) 单页面应用(SPA)是一种现代Web开发模式,其核心特点在于仅有一个HTML文件作为主入口...
### Struts, Spring, Hibernate 三大框架的优缺点分析 #### Struts框架 **优点:** 1. **组件模块化与灵活性:** Struts框架强调组件的模块化设计,这使得开发者可以根据项目的不同需求灵活地选择和组合这些组件。...
这里我们将详细探讨标题和描述中提到的三种定位方式:关键字、像素和百分比,并分析它们在多图片融合背景定位中的应用及其优缺点。 1. 关键字定位: 使用关键字如`background-position: top right;`,这种定位方式...
### Struts、Spring、Hibernate 的优缺点分析 #### 一、Struts 框架 **优点:** 1. **实现 MVC 架构模式:**Struts 通过 Model-View-Controller (MVC) 设计模式,使得业务逻辑与表示层分离,便于维护和扩展。 2. ...
让我们详细分析一下SSH的优缺点。 **Struts** Struts作为一个MVC框架,具有以下优点: 1. **MVC架构**:Struts通过分离业务逻辑、视图和控制逻辑,使应用结构清晰,易于维护和扩展。 2. **Taglib库**:Struts提供...
- **快速配置**:用户可以通过配置入口快速设置权限,包括配置应用、菜单页面、许可和授权,以满足不同角色和部门的需求。 - **配置入口**:在系统设置或管理界面,用户可以找到权限配置的入口,进行下一步操作。 ...
每种方式都有其特定的使用场景和优缺点,下面我们将详细对比分析。 1. URL参数传递 URL参数传递是通过将参数附加在URL后面进行页面间数据传递的方法。这种方式的优点是实现简单,不需要额外的状态管理机制,可以...
#### 三、优缺点分析 - **优点**: - **跨平台性**:使用HTML、CSS和JavaScript可以同时为目标平台制作Web App版本和Native App版本。 - **成本效益**:减少开发时间和维护成本,因为只需要一套代码就可以适应多...
文章比较了Java Web应用程序中基于客户端和基于服务器端图表生成技术的优缺点。基于客户端的技术,如使用Flash插件、HTML5的Canvas组件、JavaScript以及结合Ajax技术的异步更新工作方式,能够在不刷新整个页面的情况...
【CMS前端开发】是当前讨论的主题,...总结来说,这个CMS前端开发课程涉及Vue.js的工程搭建、Webpack的配置使用、单页面应用的优缺点分析,以及CMS页面的创建和路由配置。这些知识对于进行现代前端开发是必不可少的。
优缺点分析 多页面开发的优点是可以将项目拆分成多个小的单页面应用程序,提高开发效率和项目维护性。但是,多页面开发也存在一些缺点,例如: 1. 需要维护多个入口文件和模板文件,这可能会增加开发和维护成本。 ...
报告分析了这两种架构模式的优缺点,并探讨了如何通过Docker、Kubernetes等工具进行服务部署和管理。 七、持续集成与自动化测试 在开发过程中,持续集成(CI)和自动化测试是保证代码质量的有效手段。报告中详细...
总结来说,SPA WEB是一个关于使用现代Web技术构建单页面应用程序的主题,涵盖了前端框架的使用、源码分析、开发工具的介绍,以及可能的一个实际SPA项目案例。学习这部分内容有助于开发者掌握高效、响应式的Web应用...
共享内存是文件映射的一种特殊情况,进程在创建文件映射对象时用 0xFFFFFFFF 来代替文件句柄(HANDLE),就表示了对应的文件映射对象是从操作系统页面文件访问内存,其它进程打开该文件映射对象就可以访问该内存块。...