单页面 Web 应用(Single Page Application，SPA)的工作原理介绍
原文地址
SPA 无处不在，但在网络开发人员中仍然是一个颇有争议的话题。
自 2003 年左右首次出现以来，单页 Web 应用程序已经取得了长足的进步。它们已成为现代 javascript 领域不可或缺的一部分。
但是在我与不少开发人员的讨论中，我觉得单页应用程序的实际工作方式仍然不够清晰。 因此，我决定卷起袖子（形象地说）并提供我对这个非常有趣的主题的看法。
所以，让我们从头开始。
what are single page applications?
在我看来，最好的定义是：单页应用程序是一种 Web 应用程序，它只需要将单个页面加载到浏览器中。
你可能会想，这到底是什么意思？ 一个只有单页的应用程序怎么可能对世界上的任何人有用？
答案很简单。 单页 Web 应用程序是围绕动态重写该单页内容的概念构建的。 这与从服务器加载预渲染页面不同。
这就是魔法发生的地方。 通过采用这种方式，单页面 Web 应用程序避免了由于在服务器上呈现页面而导致的中断。 这消除了 Web 开发世界在提供无缝用户体验方面通常面临的最大问题。
单页面应用的工作原理
在单页 Web 应用程序中，当浏览器向服务器发出第一个请求时，服务器会发回 index.html 文件。基本上就是这样。那是提供 html 文件的唯一时间。 html 文件有一个 .js 文件的脚本标记，它将控制 index.html 页面。所有后续调用仅返回数据，通常为 json 格式。应用程序使用此 json 数据动态更新页面。但是，页面永远不会重新加载。
一旦应用程序启动，客户端（而不是服务器）处理将数据转换为 html 的工作。基本上，大多数现代 spa 框架都有一个在浏览器中运行的模板引擎来生成 html。
将此与传统的 Web 应用程序形成对比。在传统应用中，每次应用调用服务器时，服务器都会渲染整个html页面。客户端接收呈现的页面并触发页面刷新。在这种情况下，浏览器是客户端。
下图解释了两种方法之间的区别：
单页面应用的优势
很明显，由于我们不会为每个用户交互通过网络发送任何 html，因此可以节省大量时间和带宽。由于各种开始和结束标签，html 版本通常更大。此外，在传统方法中，每次向服务器发出请求时，我们也会加载大量重复的 html。通过遵循 spa 方法，应用程序变得更加敏感。
无需猜测，更快的数据刷新和更少的带宽消耗会带来更好的用户体验。这在移动设备和较慢的互联网连接上非常有用。
有一些反对单页 Web 应用程序的论据说，javascript 包的大小可能会变得臃肿。然而，大多数优秀的 spa 框架都提供了很好的代码拆分方法。这可以控制您的包大小并在适用的情况下执行按需加载。
一个不太明显的好处是关于单页面应用的整体架构。使用 json 发送应用程序数据在视图层 (html) 和应用程序层之间创建了一种分离。这将表示层和应用层解耦，并允许开发人员独立发展每一层。您可以在不更改应用程序逻辑的情况下替换 html 标记。客户端和服务器也是完全独立的。
另一个被忽视的好处是单页应用程序的生产部署。单页面应用非常容易部署。当您构建用于生产的 spa 时，您通常会得到一个 html 文件、一个 css 包和一个 javascript 包。任何静态内容服务器都可以托管这些文件。很好的例子是 nginx、amazon s3 bucket、apache 或 firebase。
单页面应用的缺点
单页 Web 应用程序的最大缺点之一是它们无法被像谷歌这样的搜索引擎正确索引。 由于除了初始 index.html 文件之外没有 html 标记，搜索引擎无法索引内容，因为它们的爬虫无法执行用于生成 html 的 javascript。
然而，在官方公告中，谷歌表示他们的搜索引擎现在能够抓取 ajax 调用。
单页面 Web 应用(Single Page Application，SPA)的工作原理介绍相关推荐
- SPA设计与架构-理解单页面Web应用 (埃米顿.A斯科特) 中文pdf扫描版
SPA 开发技术的运用是当今Web 开发领域的热门趋势,但真正全面掌握该技术的开发者并不多.本书详尽阐述单页面Web 应用(SPA)开发技术,从SPA 构建基础入手,通过MV*.模块化编程.路由.模块 ...
- Single page application（单页面应用）
文章目录 vue-cli2 vue-cli3 介绍: Spa: Single page appliaction,只有一个 html 页面,对项目更好的分模块. vue-cli2 npm install ...
- vue安装Postcss_Flask和Vue.js构建全栈单页面web应用【通过Flask开发RESTful API】
前言: 看了一些国外的关于介绍flask和vue的前后端分离的文章,但没看到比较通俗易懂,代码完善的,直到昨天看到一篇新出的文章,而且内容非常棒,所以翻译过来,供大家一起学习. 原文来自Develop ...
- SPA（单页面web应用）和MPA（多页面web应用）
- SPA（单页面web应用）和MPA（多页面web应用）的区别
- Single Page Application概览
第一点 :传统web应用遇到的2个问题 1.User Experience 用户体验 2.Performance 性能问题 SPA如何解决这些问题的: 不重新加载页面,交互尽可能使用一个web doc ...
- Developing a Large Scale Application with a Single Page Application (S
https://www.codeproject.com/Articles/808213/Developing-a-Large-Scale-Application-with-a-Single 使用 An ...
- html5前端开发 原理,web前端开发应该明白的浏览器工作原理
作为前端开发,我们平常跟浏览器打交道的时间也是最多的.在前端面试中,一个较为经典的问题:在浏览器地址中输入url地址,敲回车,发生了什么?浏览器究竟做了什么?相信很多人脑海里都会出现个大概的轮廓,可是 ...
- SAP Spartacus B2B Unit page convertListItem方法的工作原理
点击expand all后,触发该方法: 输入参数unit,就是从后台OCC API返回的数据: 变量node绝大部分数据来自unit,使用-, 增添了一些额外属性: 递归调用: 递归函数处理之后的结 ...
最新文章
- 给Qt程序加上版本信息
- pdf转换成html python,在Python中将pdf转换为html
- pc寄存器or程序计数器
- android123 zhihuibeijing 新闻中心-新闻 页签 ViewPagerIndicator实现
- 特斯拉上海超级工厂Model Y日产量达到1000辆 超过Model 3
- [.NET] 《Effective C#》快速笔记（一）- C# 语言习惯
- [PHP] 网络与协议
- GDAL读写矢量文件——C#
- 软件项目版本号命名规则
- ElasticSearch 核心概念
- spark 程序配置日志级别 通过log4j
- layui数据表格接口_layui后台管理—table 数据表格详细讲解
- linux内核的学习方法
- PDF在线裁剪页面（一页剪切为多页并自动合并）的方法
- PC浏览器播放m3u8
- 关于Android Bluetooth(安卓蓝牙)在车载产品中的使用变化
- 四川江安戏剧“青年训练营”：播撒颗颗戏剧种子
- 不限速开源的下载工具：Persepolis Download Manager
- 微信小程序毕业设计——社区老人互助管理平台
- java 从视频里面提取音频 批量