域名

浅谈单页Web应用(SPA):工作原理及优缺点

字号+作者:益华科技来源:人工智能2025-11-03 23:43:03我要评论(0)

【.com快译】自2003年被首创以来,单页Web应用程序(Single Page Web Applications)已经走过它的第15个年头。如今,它已经成为了现代JavaScript领域不可或缺的

【.com快译】自2003年被首创以来,浅谈缺点单页Web应用程序(Single Page Web Applications)已经走过它的单页第15个年头。如今,应用S原理它已经成为了现代JavaScript领域不可或缺的工作一部分。

在和许多开发人员的及优讨论交流中,我发现他们对于单页应用程序的浅谈缺点实际工作方式不甚了了。因此,单页我决定在此为大家科普一下,应用S原理深入探究单页Web应用的工作工作原理与优缺点。

什么是及优单页应用程序?

在我看来***的定义应该是:单页Web应用程序是一种只需要将单个页面加载到浏览器之中的Web应用程序。

您可能已经开始寻思:这到底意味着什么?浅谈缺点一整套应用程序居然只用一个页面来提供服务,这怎么够用呢?单页

答案很简单。单页Web应用程序是应用S原理围绕着将单个页面内容进行动态重写的概念所构建。这与从服务器端加载过来的工作预渲染页面有着本质的不同。

通过采用这种方法,及优单页Web应用程序可以避免那些,在服务器上渲染各种页面时所产生的中断问题。因此,这就消除了一直以来困惑在Web开发业界的网站模板一个***问题:如何才能向用户提供无缝的访问体验。

既然听起来这是一个很棒的主意,让我们接着来看看它是如何运作的,相信您一定会感到更为惊讶。

魔术是如何发生的?

在单页Web应用程序中,当浏览器向服务器发出***个请求时,服务器会返回一个index.html文件。就这么简单,不过这也是全程唯一提供HTML文件的一次。

该HTML文件为.js类型的文件准备了一个脚本标签,而该标签正好可以被用来控制index.html页面。由于所有后续的调用都只会返回JSON格式的数据,因此应用程序也就使用此类JSON数据,来动态地更新页面。不过值得注意的是,该页面将不再也永远不会被重新加载。

一旦应用程序被启动,客户端(而不是服务器)就会通过处理,免费源码下载将数据转换为HTML。基本上,大多数现代单页应用框架都拥有一个,能够在浏览器中运行的模板引擎,从而生成HTML。

通过与传统的Web应用程序相比较,你不难发现:在传统应用程序中,在每次应用程序调用服务器时,服务器都需要渲染整个HTML页面。相应地,客户端会接收到被渲染的页面,并触发整个页面的刷新。因此在这种情况下,浏览器扮演的就是客户端的角色。

为了更加直观地说明两种方法的不同之处,我们为您准备了如下的对比图:

SPA有何优势?

显而易见,由于我们不可能总是通过网络,为与用户的每次交互发送各种HTML页面,因此单页应用能够节省大量的时间和带宽。在传统方法中,每次我们向服务器发出请求时,香港云服务器既需要用到各种打开与关闭标签,又需要加载大量重复的HTML代码,而且HTML本身的代码量并不小。因此,如果我们遵循SPA方法,则会大幅提到应用程序的响应能力。 由于SPA方法不再需要用标签去猜测数据,因此这又在一定程度上加快了数据的刷新,并减少了带宽的消耗,同时能够给用户也带来更好的体验。而这对于移动设备、或是在较慢的互联网连接场景中,恰恰是非常有用的。 虽然那些单页Web应用持否定态度的开发人员会争辩说:JavaScript包的大小有可能会因此变得臃肿。但是客观而言,如今大多数优秀的SPA框架都提供了很好的代码分割方法。因此,我们可以通过检查捆绑包的大小,只在适用的情况下再进行按需加载。 另一个关于SPA整体架构但不太明显的好处是:使用JSON发送应用数据的方式,会在HTML的视图层和应用程序层之间创建一种分离。这便使得表示层与应用层相分离,以方便不同的开发人员去独立地开发每一个层面。因此,您可以在不修改应用程序逻辑的情况下,去替换某些HTML标记。当然,客户端和服务器也是完全相互独立的。 同时,还有一个可能被忽略的优势是:单页应用程序在生产环境中的部署特性。由于SPA非常易于被部署,那么我们在生产环境中构建SPA时,会很容易地最终得到一个HTML文件、一个CSS包和一个JavaScript包。因此,任何静态内容服务器都可以被用来存放这些文件。此类服务器包括:Nginx、Amazon S3 Bucket、Apache和Firebase。

SPA是否有缺点?

凡事都有利有弊。对单页Web应用程序来说,其***缺点在于:它们无法被Google等搜索引擎正确地编入索引。由于除了其最初的index.html文件之外,其他都没有HTML标签,因此对于各类搜索引擎的爬取工具来说,它们无法执行并生成HTML的JavaScript,也就完全无法索引到任何相关内容。

不过可喜的是,在Google官方的公告中(请参见:https://webmasters.googleblog.com/2015/10/deprecating-our-ajax-crawling-scheme.html),他们的搜索引擎如今已经能够爬取AJAX的各种调用了。

虽然业界还有一些针对SPA的使用偏好和复杂性之类的批评。但是在我看来,这些观点只是见仁见智罢了。

总而言之,我们需要认真地考虑自己的项目用例与场景,才能判断出哪一种方法最适合自身的应用开发需求。

原文标题:How Single Page Web Applications Actually Work,作者:Saurabh Dashora

【译稿,合作站点转载请注明原文译者和出处为.com】

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 重装电脑脚本错误的解决方法(快速修复电脑重装脚本错误的技巧)

    重装电脑脚本错误的解决方法(快速修复电脑重装脚本错误的技巧)

    2025-11-03 23:18

  • Ubuntu 14.10已于前段时间发布。想知道如何从 Ubuntu 14.04 升级到 Ubuntu 14.10 么?别担心,这很容易做到。事实上,只要网络连接速度好,升级只是点击几下鼠标的事情而已。你需要从 Ubuntu 14.04 切换到 Ubuntu 14.10 么  在你升级到Ubuntu 14.10之前,请确定你真的想为升级 14.10 而抛弃 Ubuntu 14.04。一个很重要的原因是你不能从Ubuntu 14.10 回归到14.04。 你需要完全重新安装。Ubuntu 14.04是长期支持(LTS)版本。这意味着有更多的稳定性和更长的支持周期。假如升级到14.10,你将被迫在9个月后从Ubuntu 14.10 升级到15.04,而14.04将会持续3年以上。此外,目前Ubuntu 14.10没有很多的新功能使吸引用户切换到14.10。当然了,你肯定会得到最前沿的操作系统。所以,在这之前是否升级到Ubuntu 14.10是你自己的决定。从Ubuntu 14.04 升级到 Ubuntu 14.10 要从Ubuntu 14.04 升级到 Ubuntu 14.10,遵循下面的步骤:步骤 1: 打开 软件和更新.进入更新选项卡。这里要确保Ubuntu有新版本时通知我 设置成对于任何新版本。默认Ubuntu只会在另一个LTS发布时通知你。你必须要把它改成在任何中间版本都升级。步骤 2: 现在运行 软件升级。升级完成后,它应该会提示一个可用的新版本。点击升级,接着按照提示的步骤来。我希望该文教程可以帮助你从 Ubuntu 14.04 升级到 Ubuntu 14.10。虽然本教程是为Ubuntu写的,但是你可以用同样的步骤升级到 Xubuntu 14.10、Kubuntu 14.10 或者Lubuntu。敬请期待下一篇Ubuntu 14.10相关文章。谢谢阅读,希望能帮到大家,请继续关注脚本之家,我们会努力分享更多优秀的文章。

    Ubuntu 14.10已于前段时间发布。想知道如何从 Ubuntu 14.04 升级到 Ubuntu 14.10 么?别担心,这很容易做到。事实上,只要网络连接速度好,升级只是点击几下鼠标的事情而已。你需要从 Ubuntu 14.04 切换到 Ubuntu 14.10 么 在你升级到Ubuntu 14.10之前,请确定你真的想为升级 14.10 而抛弃 Ubuntu 14.04。一个很重要的原因是你不能从Ubuntu 14.10 回归到14.04。 你需要完全重新安装。Ubuntu 14.04是长期支持(LTS)版本。这意味着有更多的稳定性和更长的支持周期。假如升级到14.10,你将被迫在9个月后从Ubuntu 14.10 升级到15.04,而14.04将会持续3年以上。此外,目前Ubuntu 14.10没有很多的新功能使吸引用户切换到14.10。当然了,你肯定会得到最前沿的操作系统。所以,在这之前是否升级到Ubuntu 14.10是你自己的决定。从Ubuntu 14.04 升级到 Ubuntu 14.10 要从Ubuntu 14.04 升级到 Ubuntu 14.10,遵循下面的步骤:步骤 1: 打开 软件和更新.进入更新选项卡。这里要确保Ubuntu有新版本时通知我 设置成对于任何新版本。默认Ubuntu只会在另一个LTS发布时通知你。你必须要把它改成在任何中间版本都升级。步骤 2: 现在运行 软件升级。升级完成后,它应该会提示一个可用的新版本。点击升级,接着按照提示的步骤来。我希望该文教程可以帮助你从 Ubuntu 14.04 升级到 Ubuntu 14.10。虽然本教程是为Ubuntu写的,但是你可以用同样的步骤升级到 Xubuntu 14.10、Kubuntu 14.10 或者Lubuntu。敬请期待下一篇Ubuntu 14.10相关文章。谢谢阅读,希望能帮到大家,请继续关注脚本之家,我们会努力分享更多优秀的文章。

    2025-11-03 23:13

  • 足浴电脑收银买单教程(轻松掌握足浴行业的高效收银技巧)

    足浴电脑收银买单教程(轻松掌握足浴行业的高效收银技巧)

    2025-11-03 23:04

  • 《丧尸围城电脑双人联机教程》(玩转丧尸围城双人合作模式,与好友一起对抗丧尸大军!)

    《丧尸围城电脑双人联机教程》(玩转丧尸围城双人合作模式,与好友一起对抗丧尸大军!)

    2025-11-03 22:30

网友点评
精彩导读
LVM是Logical Volume Manager(逻辑卷管理器)的简写,又译为逻辑卷宗管理器、逻辑扇区管理器、逻辑磁盘管理器。是Linux核心所提供的逻辑卷管理(Logical Volume Management)功能。它在硬盘的硬盘分区之上,又创建了一个逻辑层以方便系统管理硬盘分区系统。最早由IBM开发,在AIX系统上实现,OS/2操作系统与HP-UX也支持这个功能;在1998年,Heinz Mauelshagen根据HP-UX上的逻辑卷管理器,写作出第一个Linux版本的逻辑卷管理器;并将其发布到Linux社区中,它允许用户在Linux系统上用简单的命令行管理一个完整的逻辑卷管理环境。LVM的优点:它是建立在物理存储设备之上的一个抽象层,允许用户生成逻辑存储卷,与直接使用物理存储在管理上相比,提供了更好灵活性;LVM将存储虚拟化,使用逻辑卷,用户不会受限于物理磁盘的大小;另外,与硬件相关的存储设置被器隐藏,用户可以不用停止应用或卸载文件系统来调整卷大小或数据迁移,可以减少操作成本。LVM与直接使用物理存储相比,有以下优点:1、  灵活的容量当使用逻辑卷时,文件系统可以扩展到多个磁盘上,你可以聚合多个磁盘或磁盘分区成单一的逻辑卷.2、  可伸缩的存储池;你可以使用简单的命令来扩大或缩小逻辑卷大小,不用重新格式化或分区磁盘设备.3、  在线的数据再分配你可以在线移动数据,数据可以在磁盘在线的情况下重新分配.比如,你可以在线更换可热插拔的磁盘.4、  方便的设备命名;逻辑卷可以按你觉得方便的方式来起任何名称.5、  磁盘条块化你可以生成一个逻辑盘,它的数据可以被条块化存储在2个或更多的磁盘上.这样可以明显提升数据吞吐量.6、  镜像卷逻辑卷提供方便的方法来镜像你的数据.7、  卷快照使用逻辑卷,你可以获得设备快照用来一致性备份或者测试数据更新效果而不影响真实数据.2.版本:LVM1 最初的LVM与1998年发布,只在Linux内核2.4版本上可用,它提供最基本的逻辑卷管理。LVM2 LVM-1的更新版本,在Linux内核2.6中才可用,它在标准的LVM-1功能外还提供了额外的功能。查看版本:复制代码代码如下:复制代码代码如下:复制代码代码如下:逻辑卷的创建,就是将多块硬盘创建物理卷,而将这些物理卷以逻辑的形式总成一个容器,然后从这个容器里面创建大小不同的分区文件,而这个容器就是所谓的卷组(VG),而从这个容器里创建大小不同的分区文件,这个分区文件就叫做逻辑卷。LVM实现逻辑卷镜像2、将sdb、sdc、sdd、sde 创建物理卷,将sdb、sdc、sdd 添加卷组到vmTest复制代码代码如下:复制代码代码如下:复制代码代码如下:复制代码代码如下:复制代码代码如下:复制代码代码如下:复制代码代码如下:复制代码代码如下:复制代码代码如下:复制代码代码如下:复制代码代码如下:复制代码代码如下:                        复制代码代码如下:复制代码代码如下:复制代码代码如下:复制代码代码如下:复制代码代码如下:复制代码代码如下:复制代码代码如下:复制代码代码如下:复制代码代码如下:复制代码代码如下:复制代码代码如下:复制代码代码如下:复制代码代码如下:复制代码代码如下:[root@node4 lvmTest]#[root@node4 lvmTest]# lvdisplay   --- Logical volume --- LV Path                /dev/vgTest/lvTest LV Name                lvTest VG Name                vgTest LV UUID                a8kDmI-R3ls-SfKJ-qx3d-1Tbb-wPAd-TJcQfn LV Write Access        read/write LV Creation host, time node4.lansgg.com, 2015-09-10 20:50:41 +0800 LV Status              available # open                1 LV Size                1.00 GiB Current LE            256 Mirrored volumes      2 Segments              1 Allocation            inherit Read ahead sectors    auto - currently set to    256 Block device          253:5

LVM是Logical Volume Manager(逻辑卷管理器)的简写,又译为逻辑卷宗管理器、逻辑扇区管理器、逻辑磁盘管理器。是Linux核心所提供的逻辑卷管理(Logical Volume Management)功能。它在硬盘的硬盘分区之上,又创建了一个逻辑层以方便系统管理硬盘分区系统。最早由IBM开发,在AIX系统上实现,OS/2操作系统与HP-UX也支持这个功能;在1998年,Heinz Mauelshagen根据HP-UX上的逻辑卷管理器,写作出第一个Linux版本的逻辑卷管理器;并将其发布到Linux社区中,它允许用户在Linux系统上用简单的命令行管理一个完整的逻辑卷管理环境。LVM的优点:它是建立在物理存储设备之上的一个抽象层,允许用户生成逻辑存储卷,与直接使用物理存储在管理上相比,提供了更好灵活性;LVM将存储虚拟化,使用逻辑卷,用户不会受限于物理磁盘的大小;另外,与硬件相关的存储设置被器隐藏,用户可以不用停止应用或卸载文件系统来调整卷大小或数据迁移,可以减少操作成本。LVM与直接使用物理存储相比,有以下优点:1、  灵活的容量当使用逻辑卷时,文件系统可以扩展到多个磁盘上,你可以聚合多个磁盘或磁盘分区成单一的逻辑卷.2、  可伸缩的存储池;你可以使用简单的命令来扩大或缩小逻辑卷大小,不用重新格式化或分区磁盘设备.3、  在线的数据再分配你可以在线移动数据,数据可以在磁盘在线的情况下重新分配.比如,你可以在线更换可热插拔的磁盘.4、  方便的设备命名;逻辑卷可以按你觉得方便的方式来起任何名称.5、  磁盘条块化你可以生成一个逻辑盘,它的数据可以被条块化存储在2个或更多的磁盘上.这样可以明显提升数据吞吐量.6、  镜像卷逻辑卷提供方便的方法来镜像你的数据.7、  卷快照使用逻辑卷,你可以获得设备快照用来一致性备份或者测试数据更新效果而不影响真实数据.2.版本:LVM1 最初的LVM与1998年发布,只在Linux内核2.4版本上可用,它提供最基本的逻辑卷管理。LVM2 LVM-1的更新版本,在Linux内核2.6中才可用,它在标准的LVM-1功能外还提供了额外的功能。查看版本:复制代码代码如下:复制代码代码如下:复制代码代码如下:逻辑卷的创建,就是将多块硬盘创建物理卷,而将这些物理卷以逻辑的形式总成一个容器,然后从这个容器里面创建大小不同的分区文件,而这个容器就是所谓的卷组(VG),而从这个容器里创建大小不同的分区文件,这个分区文件就叫做逻辑卷。LVM实现逻辑卷镜像2、将sdb、sdc、sdd、sde 创建物理卷,将sdb、sdc、sdd 添加卷组到vmTest复制代码代码如下:复制代码代码如下:复制代码代码如下:复制代码代码如下:复制代码代码如下:复制代码代码如下:复制代码代码如下:复制代码代码如下:复制代码代码如下:复制代码代码如下:复制代码代码如下:复制代码代码如下: 复制代码代码如下:复制代码代码如下:复制代码代码如下:复制代码代码如下:复制代码代码如下:复制代码代码如下:复制代码代码如下:复制代码代码如下:复制代码代码如下:复制代码代码如下:复制代码代码如下:复制代码代码如下:复制代码代码如下:复制代码代码如下:[root@node4 lvmTest]#[root@node4 lvmTest]# lvdisplay --- Logical volume --- LV Path                /dev/vgTest/lvTest LV Name                lvTest VG Name                vgTest LV UUID                a8kDmI-R3ls-SfKJ-qx3d-1Tbb-wPAd-TJcQfn LV Write Access        read/write LV Creation host, time node4.lansgg.com, 2015-09-10 20:50:41 +0800 LV Status              available # open                1 LV Size                1.00 GiB Current LE            256 Mirrored volumes      2 Segments              1 Allocation            inherit Read ahead sectors    auto - currently set to    256 Block device          253:5

热门资讯