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

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

  1. android开发之路06(浅谈单例设计模式)

    设计模式之单例模式: 一.单例模式实现特点:①单例类在整个应用程序中只能有一个实例(通过私有无参构造器实现):②单例类必须自己创建这个实例并且可供其他对象访问(通过静态公开的访问权限修饰的getIns ...

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

    每个框架都不可避免会有自己的一些特点,从而会对使用者有一定的要求,这些要求就是主张,主张有强有弱,它的强势程度会影响在业务开发中的使用方式. 一.Angular,它两个版本都是强主张的,如果你用它,必 ...

  3. Vue.js:表单

    ylbtech-Vue.js:表单 1.返回顶部 1. Vue.js 表单 这节我们为大家介绍 Vue.js 表单上的应用. 你可以用 v-model 指令在表单控件元素上创建双向数据绑定. v-mo ...

  4. 浅谈WPF页间导航

    浅谈WPF页间导航 使用导航的目的是从一个页面进入到另一个页面.无论是预先决定的线性顺序(向导)还是基于层次的用户驱动程序(大部分网站的形式),或者动态生成的路径,主要有3种方法实现:调用Naviga ...

  5. 【Linux】浅谈段页式内存管理

    让我们来回顾一下历史,在早期的计算机中,程序是直接运行在物理内存上的.换句话说,就是程序在运行的过程中访问的都是物理地址.如果这个系统只运行一个程序,那么只要这个程序所需的内存不要超过该机器的物理内存 ...

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

    心血来潮,打算结合实际开发的经验,浅谈一下HTML5单页面App或网页的架构. 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又要数单页面架构体验 ...

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

    本文转载自:http://www.cnblogs.com/kenkofox/p/4648472.html 上一篇<浅谈HTML5单页面架构(一)--requirejs + angular + a ...

  8. JSP将表单提交并在本页中显示

    代码如下: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8& ...

  9. 【ASP.NET MVC系列】浅谈表单和HTML辅助方法

    [01]浅谈Google Chrome浏览器(理论篇) [02]浅谈Google Chrome浏览器(操作篇)(上) [03]浅谈Google Chrome浏览器(操作篇)(下) [04]浅谈ASP. ...

随机推荐

  1. [洛谷P1251]餐巾计划问题

    题目大意:一个餐厅N天,每天需要$r_i$块餐巾.每块餐巾需要p元,每天用过的餐巾变脏,不能直接用.现在有快洗店和慢洗店,快洗店洗餐巾需要m天,每块花费f元:慢洗店洗餐巾需要n天,每块餐巾s元(m & ...

  2. 皮肤包项目的 Gradle 脚本演化

    我在做的一个项目需要有换肤功能,换肤的方案是采用第三方库 ThemeSkinning 的实现(在其基础上修复若干 bug).皮肤的制作是把相关的资源放在一个 app module 中打包成 apk,当 ...

  3. BZOJ 1101 [POI2007]Zap | 第一道莫比乌斯反(繁)演(衍)

    题目: http://www.lydsy.com/JudgeOnline/problem.php?id=1101 题解: http://www.cnblogs.com/mrha/p/8203612.h ...

  4. VB托盘图标不响应WM_MOUSEMOVE的原因及解决方法

    文章参考地址:http://blog.csdn.net/txh0001/article/details/38265895:http://bbs.csdn.net/topics/330106030 网上 ...

  5. BZOJ1798 维护序列seq

    1798: [Ahoi2009]Seq 维护序列seq Time Limit: 30 Sec  Memory Limit: 64 MBSubmit: 8058  Solved: 2964[Submit ...

  6. HDU2544最短路---(Dijkstra)

    Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submission( ...

  7. java基础学习(一)hashcode

    hashcode的作用 hashCode()方法是从Object类继承过来的,Object类中的hashCode()方法返回的是对象在内存中地址转换成的int值,如果对象没有重写hashCode()方 ...

  8. 【uva11855-求长度为1到n的相同子串出现的次数】sam

    题意:求长度为1到n的相同子串出现的次数,输到小于2为止. 题解: 用sam做. 建机,算right集合,然后用r[i]更新长度为step[i]的子串出现次数,然后ans[i]=maxx(ans[i] ...

  9. 【BZOJ】5028: 小Z的加油店

    [算法]数学+线段树/树状数组 [题解] 首先三个操作可以理解为更相减损术或者辗转相除法(待证明),所以就是求区间gcd. 这题的问题在线段树维护gcd只能支持修改成一个数,不支持加一个数. 套路:g ...

  10. 【洛谷 P1445】 [Violet]樱花(唯一分解定理)

    做了题还是忍不住要写一发题解,感觉楼下的不易懂啊. 本题解使用latex纯手写精心打造. 题意:求\(\frac{1}{x}+\frac{1}{y}=\frac{1}{n!}\)的正整数解总数. 首先 ...