浅谈单页应用和多页应用——Vue.js向
浅谈单页应用和多页应用——Vue.js向
多页面
多页面应用:每次页面跳转,后台都会返回一个新的HTML文档,就是多页面应用。
在以往传统开发的应用(网站)大多都是多页面应用,路由由后端来写。
页面跳转=》返回HTML,优点:首屏时间快,SEO效果好,缺点是页面切换慢。
- 首屏时间快?访问页面,服务器只需要返回一个HTML文件,这个过程就经历了一个HTTP请求,请求响应回来,页面就能被展示出来。
- SEO(搜索引擎排名)效果好?搜索引擎能识别HTML的内容,根据内容进行排名。
- 页面切换慢:每一次切换页面都需要发起一个HTTP请求,假设网络较慢就会出现卡顿情况。
单页面
单页应用:用vue写的项目是单页应用,刷新页面会请求一个HTML文件,切换页面的时候,并不会发起新的请求一个HTML文件,只是页面内容发生了变化
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向的更多相关文章
- android开发之路06(浅谈单例设计模式)
设计模式之单例模式: 一.单例模式实现特点:①单例类在整个应用程序中只能有一个实例(通过私有无参构造器实现):②单例类必须自己创建这个实例并且可供其他对象访问(通过静态公开的访问权限修饰的getIns ...
- 浅谈前端三大框架Angular、react、vue
每个框架都不可避免会有自己的一些特点,从而会对使用者有一定的要求,这些要求就是主张,主张有强有弱,它的强势程度会影响在业务开发中的使用方式. 一.Angular,它两个版本都是强主张的,如果你用它,必 ...
- Vue.js:表单
ylbtech-Vue.js:表单 1.返回顶部 1. Vue.js 表单 这节我们为大家介绍 Vue.js 表单上的应用. 你可以用 v-model 指令在表单控件元素上创建双向数据绑定. v-mo ...
- 浅谈WPF页间导航
浅谈WPF页间导航 使用导航的目的是从一个页面进入到另一个页面.无论是预先决定的线性顺序(向导)还是基于层次的用户驱动程序(大部分网站的形式),或者动态生成的路径,主要有3种方法实现:调用Naviga ...
- 【Linux】浅谈段页式内存管理
让我们来回顾一下历史,在早期的计算机中,程序是直接运行在物理内存上的.换句话说,就是程序在运行的过程中访问的都是物理地址.如果这个系统只运行一个程序,那么只要这个程序所需的内存不要超过该机器的物理内存 ...
- 浅谈HTML5单页面架构(一)——requirejs + angular + angular-route
心血来潮,打算结合实际开发的经验,浅谈一下HTML5单页面App或网页的架构. 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又要数单页面架构体验 ...
- 浅谈HTML5单页面架构(二)——backbone + requirejs + zepto + underscore
本文转载自:http://www.cnblogs.com/kenkofox/p/4648472.html 上一篇<浅谈HTML5单页面架构(一)--requirejs + angular + a ...
- JSP将表单提交并在本页中显示
代码如下: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8& ...
- 【ASP.NET MVC系列】浅谈表单和HTML辅助方法
[01]浅谈Google Chrome浏览器(理论篇) [02]浅谈Google Chrome浏览器(操作篇)(上) [03]浅谈Google Chrome浏览器(操作篇)(下) [04]浅谈ASP. ...
随机推荐
- [洛谷P1251]餐巾计划问题
题目大意:一个餐厅N天,每天需要$r_i$块餐巾.每块餐巾需要p元,每天用过的餐巾变脏,不能直接用.现在有快洗店和慢洗店,快洗店洗餐巾需要m天,每块花费f元:慢洗店洗餐巾需要n天,每块餐巾s元(m & ...
- 皮肤包项目的 Gradle 脚本演化
我在做的一个项目需要有换肤功能,换肤的方案是采用第三方库 ThemeSkinning 的实现(在其基础上修复若干 bug).皮肤的制作是把相关的资源放在一个 app module 中打包成 apk,当 ...
- BZOJ 1101 [POI2007]Zap | 第一道莫比乌斯反(繁)演(衍)
题目: http://www.lydsy.com/JudgeOnline/problem.php?id=1101 题解: http://www.cnblogs.com/mrha/p/8203612.h ...
- VB托盘图标不响应WM_MOUSEMOVE的原因及解决方法
文章参考地址:http://blog.csdn.net/txh0001/article/details/38265895:http://bbs.csdn.net/topics/330106030 网上 ...
- BZOJ1798 维护序列seq
1798: [Ahoi2009]Seq 维护序列seq Time Limit: 30 Sec Memory Limit: 64 MBSubmit: 8058 Solved: 2964[Submit ...
- HDU2544最短路---(Dijkstra)
Time Limit: 5000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submission( ...
- java基础学习(一)hashcode
hashcode的作用 hashCode()方法是从Object类继承过来的,Object类中的hashCode()方法返回的是对象在内存中地址转换成的int值,如果对象没有重写hashCode()方 ...
- 【uva11855-求长度为1到n的相同子串出现的次数】sam
题意:求长度为1到n的相同子串出现的次数,输到小于2为止. 题解: 用sam做. 建机,算right集合,然后用r[i]更新长度为step[i]的子串出现次数,然后ans[i]=maxx(ans[i] ...
- 【BZOJ】5028: 小Z的加油店
[算法]数学+线段树/树状数组 [题解] 首先三个操作可以理解为更相减损术或者辗转相除法(待证明),所以就是求区间gcd. 这题的问题在线段树维护gcd只能支持修改成一个数,不支持加一个数. 套路:g ...
- 【洛谷 P1445】 [Violet]樱花(唯一分解定理)
做了题还是忍不住要写一发题解,感觉楼下的不易懂啊. 本题解使用latex纯手写精心打造. 题意:求\(\frac{1}{x}+\frac{1}{y}=\frac{1}{n!}\)的正整数解总数. 首先 ...