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

浅谈单页应用和多页应用——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中还有服务器端渲染的解决方案,完美解决上述问题。

原文地址:https://www.cnblogs.com/wljqds/p/spa.html

时间: 2024-08-01 13:26:04

浅谈单页应用和多页应用——Vue.js向的相关文章

浅谈单例的三种实现--C#

传统的double check : public sealed class Singleton { private static Singleton instance = null; private static readonly object padlock = new object(); Singleton() { } public static Singleton Instance { get { if (instance == null) { lock (padlock) { if (i

浅谈单链表与双链表的区别

昨天面试官面试的时候问了我一道关于链表的问题:情境如下 面试官:请说一下链表跟数组的区别? 我:数组静态分配内存,链表动态分配内存:数组在内存中连续,链表不连续:数组利用下标定位,时间复杂度为O(1),链表定位元素时间复杂度O(n):数组插入或删除元素的时间复杂度O(n),链表的时间复杂度O(1). 根据以上分析可得出数组和链表的优缺点如下: 数组的优点 随机访问性强(通过下标进行快速定位) 查找速度快数组的缺点 插入和删除效率低(插入和删除需要移动数据) 可能浪费内存(因为是连续的,所以每次申

浅谈单链表有头结点和无头节点

有头结点的链表统一了算法的实现,无头节点减少了节点个数,但是只有根据实际情况选用真正的有无头节点链表 待续://代码实现 待续://代码实现 待续://代码实现

浅谈前端三大框架Angular、react、vue

每个框架都不可避免会有自己的一些特点,从而会对使用者有一定的要求,这些要求就是主张,主张有强有弱,它的强势程度会影响在业务开发中的使用方式.一.Angular,它两个版本都是强主张的,如果你用它,必须接受以下东西: - 必须使用它的模块机制- 必须使用它的依赖注入- 必须使用它的特殊形式定义组件(这一点每个视图框架都有,难以避免) 所以Angular是带有比较强的排它性的,如果你的应用不是从头开始,而是要不断考虑是否跟其他东西集成,这些主张会带来一些困扰. 二.React,它也有一定程度的主张,

浅谈iOS面试所遇问题

今天面试的公司之前在百科搜索了解了一些信息,一家专业拉手媒体运营商,付费通方便了用户出行,很喜欢公司的氛围. 言归正传,面对面试官的时候还是多少会有点小紧张,有几个问题回答的也是很笼统,现在做出总结.如下: 自我面试轻轻飘过~ 这个是常识 个人信息稍作了解,常识+1 浅谈MVC框架设计模式 浅谈单例设计模式 KVC/KVO Switch开关点击出错(on状态点击依旧on状态,解决方法) cell单元格重用出现的错误(解决方法) 怎样实现代理传值 怎样实现ImageView的点击事件处理 HTTP

单页应用SEO浅谈

单页应用SEO浅谈 前言 单页应用(Single Page Application)越来越受web开发者欢迎,单页应用的体验可以模拟原生应用,一次开发,多端兼容.单页应用并不是一个全新发明的技术,而是随着互联网的发展,满足用户体验的一种综合技术. SEO 一直以来,搜索引擎优化(SEO)是开发者容易忽略的部分.SEO是针对搜索(Google.百度.雅虎搜索等)在技术细节上的优化,例如语义.搜索关键词与内容相关性.收录量.搜索排名等.SEO也是同行.市场竞争常用的的营销手段.Google.百度的搜

浅谈HTML5单页面架构(二)——backbone + requirejs + zepto + underscore

本文转载自:http://www.cnblogs.com/kenkofox/p/4648472.html 上一篇<浅谈HTML5单页面架构(一)——requirejs + angular + angular-route>探讨了angular+requirejs的一个简单架构,这一篇继续来看看backbone如何跟requirejs结合. 相同地,项目架构好与坏不是说用了多少牛逼的框架,而是怎么合理利用框架,让项目开发更流畅,代码更容易管理.那么带着这个目的,我们来继续探讨backbone. 首

浅谈HTML5单页面架构(一)——requirejs + angular + angular-route

本文转载自:http://www.cnblogs.com/kenkofox/p/4643760.html 心血来潮,打算结合实际开发的经验,浅谈一下HTML5单页面App或网页的架构. 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又要数单页面架构体验最好,更像原生app.简单来说,单页面App不需要频繁切换网页,可以局部刷新,整个加载流畅度会好很多. 废话就不多说了,直接到正题吧,浅谈一下我自己理解的几种单页面架构: 1.requirejs

AngularJS进阶(二十五)requirejs + angular + angular-route 浅谈HTML5单页面架构

requirejs + angular + angular-route 浅谈HTML5单页面架构 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又要数单页面架构体验最好,更像原生app.简单来说,单页面App不需要频繁切换网页,可以局部刷新,整个加载流畅度会好很多. 废话就不多说了,直接到正题吧,浅谈一下我自己理解的几种单页面架构: 1.requirejs+angular+angular-route(+zepto) 最后这个zepto可有可无