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

多页面网站的定义:

每一次页面跳转的时候,后台服务器都会返回一个新的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中提供其他的技术,服务端渲染的技术,通过他们可以完美的解决单页面中的问题,然后杜宇前端是一个完美的开发方案

猜你喜欢

转载自blog.csdn.net/tangxiujiang/article/details/88896298