浅谈单页应用和多页应用——Vue.js向

Posted 2021-02-12 练习

浅谈单页应用和多页应用——Vue.js向

多页面

1. 多页面应用：每次页面跳转，后台都会返回一个新的HTML文档，就是多页面应用。

2. 在以往传统开发的应用（网站）大多都是多页面应用，路由由后端来写。

页面跳转=》返回html，优点：首屏时间快，SEO效果好，缺点是页面切换慢。

• 首屏时间快？访问页面，服务器只需要返回一个HTML文件，这个过程就经历了一个HTTP请求，请求响应回来，页面就能被展示出来。
• SEO（搜索引擎排名）效果好？搜索引擎能识别HTML的内容，根据内容进行排名。
• 页面切换慢：每一次切换页面都需要发起一个HTTP请求，假设网络较慢就会出现卡顿情况。

单页面

1. 单页应用：用vue写的项目是单页应用，刷新页面会请求一个HTML文件，切换页面的时候，并不会发起新的请求一个HTML文件，只是页面内容发生了变化

2. vue.js原理：JS感知URL变化，当URL发生变化后，使用JS动态把当前的页面内容清除掉，再把下一个页面的内容挂载到页面上。此时的路由就不是后端来做了，而是前端来做，判断页面到底显示哪一个组件，再把以前的组件清除掉使用新的组件。就不会每一次跳转都请求HTML文件。

页面跳转 =》 JS渲染，优点页面切换快，缺点首屏时间稍慢，SEO差

• 首屏时间慢？请求HTML还有JS的请求。（在此我想问：HTML里面不也有JS请求嘛？这一点是在看知乎上某个大神说的，没明白，但我觉得HTML里的JS大多是操作DOM的，因此跟HTML文件可以理解成一个请求。而vue.js则是负责整个应用的逻辑的，所以又得另算一个逻辑请求时延。）
• 页面切换快？页面跳转不需要去做HTML文件的请求，节约HTTP请求发送的时延。
• SEO差？搜索引擎只认识HTML内容不认识JS内容。单页应用的渲染都是靠javascript渲染出来的。搜索引擎不好识别排名。

有上面这么多的问题，为什么当下的前端开发中还要使用VUE开发单页应用？

• vue中还有服务器端渲染的解决方案，完美解决上述问题。