单页应用与多页应用的区别

àì夳堔傛蜴生んèń 2022-02-26 10:52 293阅读 0赞

**多页面网站的定义：**

每一次页面跳转的时候，后台服务器都会返回一个新的html文件，这种类型的网站就称为多页面网站（多页面应用）

**优点**：**首屏时间快**\---整个页面展现出来所需要的时间      **SEO效果好**

**首屏时间快的原因**：当访问一个页面的时候，服务器返回一个html，然后这个html展现出来，这个过程只经历一个http请求的过程，所以页面展现快，请求回来了，页面就展现出来了

**SEO效果好的原因**：搜索引擎在做网页排名的时候需要知道网页内容，根据网页内容，才能给一个权重，搜索引擎可以识别html中的内容，而每一个页面的内容放在html文件中，所以SEO效果好

缺点：页面切换慢

**原因**：每次页面跳转的时候，都需要发一个http请求，假设网络比较慢的时候，在页面来回切换的时候，会比较耗时，页面会有明显的卡顿现象

**单页应用-----使用vue搭建的项目是单页面应用**

第一次进入页面的时候，会请求一个文件，当点击页面中的一个链接，进入下一个页面的时候，并不会请求到一个html文件，在回到首页的时候，也不会请求一个HTML文件，那他是如何做到不请求HTML，而页面也会跟着改变的呢？

**原理**：js会感知到url的变换，通过js感知到url变化之后，可以用js动态的把当前的内容清除掉，再把下一个页面的内容挂在到当前页面。这个路由不是后端来做，而是由前端来做，判断页面到底显示的是哪一个，

**优点**：页面切换快

当使用单页面应用跳转的时候，页面实际上每次跳转，并不去加载一个html文件，而是通过js动态的把当前页面的内容删除掉，再去把新的页面的DOM结构渲染出来。这样做的好处，当页面切换的时候，不需要做HTML文件的请求，节约很多HTTP其你去发送的时延，也就是页面切换的时候非常的快

**缺点**：首屏时间稍慢，SEO差

首屏时间稍慢的原因：单页面应用首屏展现出来，需要请求一次html，同时需要发一个js请求，两个请求都回来了，首屏才会展现出来

SEO差的原因：SEO引擎认识HTML中的内容，不认识js中的内容，而单页面中的内容都是靠js渲染生成的，所以搜索引擎不识别这块 的内容，就不会给网页一个好的排名，这样导致在百度扥搜索结果中的排名比较差

**单页面应用存在上面的缺点，vue为什么还使用单页应用呢？**

vue中提供其他的技术，服务端渲染的技术，通过他们可以完美的解决单页面中的问题，然后杜宇前端是一个完美的开发方案

发表评论取消回复

表情：

评论列表（有 0 条评论，293人围观）

还没有评论，来说两句吧...

相关阅读

相关如何构建单页应用程序

单页应用程序可将所有网站内容放在一页内。它们提供了顺畅的用户体验并减少了加载时间。但是它们是如何发展的呢？什么是单页应用示例？答案在本文中 ![watermark_type_

矫情吗；*/ 2023年10月05日 09:26/ 0 赞/ 57 阅读

相关单页应用架构

概述 [单页应用程序 (SPA][_SPA] ) 是创建非常有吸引力和独特的用户体验的绝佳方式。Gmail、Google Maps、Airbnb、Netflix、Pint

本是古典何须时尚/ 2023年10月01日 18:30/ 0 赞/ 49 阅读

相关单页应用 vs 多页应用

web项目可分为单页应用和多页应用。单页应用，就是只有一个页面，其他内容，估计就是动态加载，用从加载其他页面片段 + 请求后台这种方式来完成。这么一说，我之前做的，其实都

墨蓝/ 2023年02月23日 08:41/ 0 赞/ 35 阅读

相关 Vue_单页应用VS多页应用

当一个文件以.vue 结尾，它就被称为单文件组件一.多页面应用 ![这里写图片描述][70] 二.单页应用实现页面跳转，在以前是使用a标签链接，在Vue中，

古城微笑少年丶/ 2022年05月21日 01:08/ 0 赞/ 400 阅读

相关 web单页应用的优缺点

web单页应用是什么？ Web单页应用就是指只有一个Web页面作为入口的应用，在浏览器中运行期间不会重新加载页面。也就是说浏览器一开始会加载它必需的thml、css和Js

谁借莪１个温暖的怀抱￠/ 2022年05月18日 23:12/ 0 赞/ 253 阅读

相关基于vue单页应用的例子

> 代码地址如下： > [http://www.demodashi.com/demo/13374.html][http_www.demodashi.com_demo_133

╰+攻爆jí腚メ/ 2022年05月12日 09:58/ 0 赞/ 256 阅读

相关单页应用 - Token 验证

单页应用 - Token 验证转：[https://juejin.im/post/58da720b570c350058ecd40f][https_juejin.im_

缺乏、安全感/ 2022年03月29日 16:44/ 0 赞/ 317 阅读

相关单页应用与多页应用的区别

多页面网站的定义：每一次页面跳转的时候，后台服务器都会返回一个新的html文件，这种类型的网站就称为多页面网站（多页面应用）优点：首屏时间快\---整个页面展现出来所需

àì夳堔傛蜴生んèń/ 2022年02月26日 10:52/ 0 赞/ 294 阅读

相关单页应用和多页应用

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

快来打我*/ 2022年02月01日 11:29/ 0 赞/ 334 阅读

相关单页应用和多页应用的区别

转载自：https://www.jianshu.com/p/4c9c29967dd6 每一次页面跳转的时候，后台服务器都会给返回一个新的`html`文档，这种类型的网站也就是

痛定思痛。/ 2021年09月18日 02:50/ 0 赞/ 439 阅读