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

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

多页面

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

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

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

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

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

单页面

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

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

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

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

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

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

  • vue中还有服务器端渲染的解决方案,完美解决上述问题。
上一篇:从腾讯QQ升级游戏之“快速加入游戏”功能的实现缺陷看C/S之间如何正确分配相关协作


下一篇:【笔记】科普createDocumentFragment() 创建文档碎片节点