浅谈单页应用和多页应用——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. ...
随机推荐
- Palindrome [Manecher]
Palindrome Time Limit: 15000MS Memory Limit: 65536K Total Submissions: 12214 Accepted: 4583 Descript ...
- ubuntu安装GraphicsMagick
一. sudo apt-get install graphicsmagick 二. http://www.cnblogs.com/cocowool/archive/2010/08/16/1800954 ...
- 《vue.js实战》练习---标签页组件
html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- js删除一个父元素下面的所有子元素
比如<div id="ok"><button tpye='button'>111111</button><p>22222</p ...
- 【Foreign】阅读 [线段树][DP]
阅读 Time Limit: 10 Sec Memory Limit: 256 MB Description Input Output Sample Input 0 10 4 10 2 3 10 8 ...
- hdu3294 manacher算法
这道题哇 其实是裸的manacher 无论怎么变 是回文的就是回文 所以 特殊处理一下输出就好了 不过最后的左右端点l,r.l=(p-p[pos]+2)/2-1,r=(p+p[pos]-2)/2-1; ...
- python脚本运行的几种方式
1.脚本式编程 将如下代码拷贝至 hello.py文件中: print ("Hello, Python!"); 通过以下命令执行该脚本: $ python ./hello.py h ...
- Ubuntu破解开机密码
使用Ubuntu和使用windows系列产品一样,会忘记开机密码.难道我们在忘记开机密码的时候就必须重装系统吗?当然不是了!既然在windows下面我们可以破解开机密码,那么在Ubuntu里面一样可行 ...
- UVA 10668 Expanding Rods
Problem A: Expanding Rods When a thin rod of length L is heated n degrees, it expands to a new lengt ...
- Codeforces 106 DIV2 ACD
B表示完全看不懂..就不弄了.. E字符串先不管了.到时候系统学下字符串再处理 A #include <map> #include <set> #include <lis ...