DDR爱好者之家

vue 单页应用和多页应用的优劣
站长资源 2024/11/23 佚名
65 1538
DDR爱好者之家 Design By 杰米

多页应用

每一次页面跳转的时候，后台服务器都会给返回一个新的html文档，这种类型的网站也就是多页网站，也叫做多页应用。

vue 单页应用和多页应用的优劣

为什么多页应用的首屏时间快？

首屏时间叫做页面首个屏幕的内容展现的时间，当我们访问页面的时候，服务器返回一个html，页面就会展示出来，这个过程只经历了一个HTTP请求，所以页面展示的速度非常快。

为什么搜索引擎优化效果好（SEO）？

搜索引擎在做网页排名的时候，要根据网页内容才能给网页权重，来进行网页的排名。搜索引擎是可以识别html内容的，而我们每个页面所有的内容都放在Html中，所以这种多页应用，seo排名效果好。

但是它也有缺点，就是切换慢

因为每次跳转都需要发出一个http请求，如果网络比较慢，在页面之间来回跳转时，就会发现明显的卡顿。

单页应用

第一次进入页面的时候会请求一个html文件，刷新清除一下。切换到其他组件，此时路径也相应变化，但是并没有新的html文件请求，页面内容也变化了。
原理是：JS会感知到url的变化，通过这一点，可以用js动态的将当前页面的内容清除掉，然后将下一个页面的内容挂载到当前页面上，这个时候的路由不是后端来做了，而是前端来做，判断页面到底是显示哪个组件，清除不需要的，显示需要的组件。这种过程就是单页应用，每次跳转的时候不需要再请求html文件了。

vue 单页应用和多页应用的优劣

为什么页面切换快？

页面每次切换跳转时，并不需要做html文件的请求，这样就节约了很多http发送时延，我们在切换页面的时候速度很快。

缺点：首屏时间慢，SEO差

单页应用的首屏时间慢，首屏时需要请求一次html，同时还要发送一次js请求，两次请求回来了，首屏才会展示出来。相对于多页应用，首屏时间慢。
SEO效果差，因为搜索引擎只认识html里的内容，不认识js的内容，而单页应用的内容都是靠js渲染生成出来的，搜索引擎不识别这部分内容，也就不会给一个好的排名，会导致单页应用做出来的网页在百度和谷歌上的排名差。

有这些缺点，为什么还要使用Vue呢？

Vue还提供了一些其它的技术来解决这些缺点，比如说服务器端渲染技术(我是SSR)，通过这些技术可以完美解决这些缺点，解决完这些问题，实际上单页面应用对于前端来说是非常完美的页面开发解决方案。

新的更新

最近在改造公司的项目，公司的项目是单页应用，可能会改成多页应用，所以对这块又重新看了一下。在网上看到一个表格觉得总结的很到位，贴过来。我是表格出处

mm 多页应用模式MPA 单页应用模式SPA 应用构成 由多个完整页面构成 一个外壳页面和多个页面片段构成 跳转方式 页面之间的跳转是从一个页面跳转到另一个页面 页面片段之间的跳转是把一个页面片段删除或隐藏，加载另一个页面片段并显示出来。这是片段之间的模拟跳转，并没有开壳页面 跳转后公共资源是否重新加载 是 否 URL模式

http://xxx/page1.html 

http://xxx/page1.html

http://xxx/shell.html#page1 

http://xxx/shell.html#page2

用户体验 页面间切换加载慢，不流畅，用户体验差，特别是在移动设备上 页面片段间的切换快，用户体验好，包括在移动设备上 能否实现转场动画 无法实现 容易实现（手机app动效） 页面间传递数据 依赖URL、cookie或者localstorage，实现麻烦 因为在一个页面内，页面间传递数据很容易实现 搜索引擎优化（SEO） 可以直接做 需要单独方案做，有点麻烦 特别适用的范围 需要对搜索引擎友好的网站 对体验要求高的应用，特别是移动应用 搜索引擎优化（SEO） 可以直接做 需要单独方案做，有点麻烦 开发难度 低一些，框架选择容易 高一些，需要专门的框架来降低这种模式的开发难度

以上就是vue 单页应用和多页应用的优劣的详细内容，更多关于vue 单页应用和多页应用的资料请关注其它相关文章！

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米