🌵多页面应用 VS 单页面应用

1,040 阅读2分钟

「本文已参与好文召集令活动,点击查看:后端、大前端双赛道投稿,2万元奖池等你挑战!

单页面应用这个概念,是随着AngularJS、React、Vue 等这些框架的出现而出现的。在多页面应用中,你每次跳转,服务器都会返回一个HTML文件,而单页面应用不会,每次点击跳转链接,单页面应用使用了页面的局部刷新的能力。

一、多页面应用

多页面跳转刷新所有资源,每个公共资源(js、css等)需选择性重新加载。

应用场景

常用于 app 或 客户端等

优缺点

优点:首屏时间快,SEO效果好。
缺点:页面切换慢。

二、单页面应用

只有一张Web页面的应用,是一种从Web服务器加载的富客户端,单页面跳转仅刷新局部资源 ,公共资源(js、css等)仅需加载一次。页面渲染是通过JS动态渲染来实现的。

应用场景

常用于PC端官网、购物等网站

优缺点

优点:页面切换快
。 缺点:首屏时间稍慢,SEO差。

在Vue中提供了一些其它的技术,比如服务器端渲染的技术,通过这些技术可以完美解决掉单页面应用中的问题。因此对前端来说,单页面应用是一个非常完美的页面开发解决方案。

三、对比

单页面应用和多页面应用的其他区别可参考以下表格:

单页面应用多页面应用
组成一个外壳页面和多个页面片段组成多个完整页面构成
资源共用(css,js)共用,只需在外壳部分加载不共用,每个页面都需要加载
刷新方式页面局部刷新或更改整页刷新
url 模式a.com/#/pageone a.com/#/pagetwoa.com/pageone.html a.com/pagetwo.html
用户体验页面片段间的切换快,用户体验良好页面切换加载缓慢,流畅度不够,用户体验比较差
页面跳转动画容易实现无法实现
数据传递容易依赖 url 传参、或者 cookie 、localStorage 等
搜索引擎优化(SEO)需要单独方案、实现较为困难、不利于 SEO 检索 可利用服务器端渲染(SSR)优化实现方法简易

最后

本文介绍了单页面应用与多页面应用以及它们的区别~
如果这篇文章对你有帮助的话,麻烦点赞收藏哟~
GitHub 博客地址: github.com/skyblue309
笔者还有其他专栏,欢迎阅读~
Vue从放弃到入门
玩转CSS之美
深入浅出JavaScript

后期更文计划

  • 异步进阶及event loop的那些事儿~
  • Grid布局原理及实战
  • vw和vh布局或许会成为新趋势?