Skip to content

Web开发架构演变

🕒 发布时间: 🕒 阅读时间: 0 分钟✍︎ 文章字数: 0

前端技术经历了从基础的HTML、CSS和JavaScript到现代前端框架的演变,Web开发架构也在不断进化。本文将探讨多页面应用(MPA)、单页面应用(SPA)和逐步增强的单页面应用(PESPA)这三种架构的特点和差异。

MPA (Multi-Page Apps) 多页面应用程序

在Web开发的早期,内容的切换主要通过跳转不同的HTML页面实现,这种被视为“传统”的开发架构依赖服务器生成和刷新页面。MPA的优点在于其返回的内容直接呈现在HTML中,对搜索引擎优化(SEO)友好,并且由于内容由服务器直接传回,首屏渲染速度较快。然而,MPA的缺点在于其过度依赖服务器生成页面,且每次导航到新页面时,浏览器都必须从头开始加载内容,这可能会影响用户体验。

SPA (Single Page Apps) 单页应用

随着AngularJS和Ember等框架的出现,SPA在2010年代初开始流行。随着功能强大设备的普及,我们能够将过去在服务器上运行的大部分逻辑转移到客户端。当页面需要不同的内容时,客户端会通过JavaScript API更新主体内容,这样可以提供流畅的导航,避免不必要的页面刷新,从而提供更好的用户体验。然而,SPA也有其缺点,由于内容通过JavaScript刷新,搜索引擎爬虫可能无法爬取到关键内容,对SEO不友好。此外,由于SPA通常一次性加载大量JavaScript,首屏渲染速度可能较慢,页面优化也可能成为问题。

PESPA (Progressively Enhanced Single Page Apps) 渐进式增强的单页应用程序

PESPA是一种新的前端架构,它试图结合MPA和SPA的优点。PESPA的初始HTML和数据都是从服务器获取的,但它会对这些内容进行处理,将不需要交互的页面部分先传递给前端,将需要交互的部分“冻结”,在需要时再加载。当用户进行路由切换时,PESPA会通过JavaScript更改页面内容,而不会重新加载新的页面。这种方式可以提高首屏渲染速度,优化导航体验,同时对SEO也更友好。

可能会有疑问,这样的架构还算SPA吗?通过服务端渲染,并且构建出来的产物是多个HTML,这不是MPA吗?实际上,从用户体验的角度看,这与SPA提供的体验是一致的,用户在网站上浏览并进行路由切换,并不会引起浏览器对整个页面进行加载。在技术上,PESPA是SPA(通过JavaScript修改页面内容)和MPA(服务端处理数据和生成HTML)的技术相结合。

参考资源

本文参考以下两篇文章,也是因为看了这两篇文章才写的这篇blog,基本就是下面两篇blog的总结,有兴趣的朋友可以看一下,讲的挺好的。

Last updated: