多页面应用

每一次页面跳转,后端都会返回一个新的HTML文件,

优点:首屏时间快(只经历了一个HTTP请求),SEO效果好

缺点:页面切换慢

单页面应用

进行页面之间跳转时,并不去加载HTML文件,而是通过JS动态地把当前的内容删除掉,再去把新的页面结构上的DOM元素渲染出来。当页面做跳转时,不需要做HTML文件的请求,节约了HTTP请求发送的时延,使页面切换时间非常快,

优点:页面切换快,

缺点:首屏时间稍慢(需要去请求一次HTML,一次JS的请求),SEO差(搜索引擎识别HTML,不识别JS)(通过服务器端渲染可以解决这些问题)

多页面应用 VS 单页面应用的更多相关文章

  1. Nginx配置Web项目(多页面应用,单页面应用)

    目前前端项目 可分两种: 多页面应用,单页面应用. 单页面应用 入口是一个html文件,页面路由由js控制,动态往html页面插入DOM. 多页面应用 是由多个html文件组成,浏览器访问的是对应服务 ...

  2. AngularJS中的route可以控制页面元素的改变,使多页面变成一个单页面。。。

    SPA(Single Page Application)指的是通单一页面展示所有功能,通过Ajax动态获取数据然后进行实时渲染,结合CSS3动画模仿原生App交互,然后再进行打包(使用工具把Web应用 ...

  3. angular.js开发 将多页面开发成单页面

    用angulara.js做单页面开发时,由于不能跨页面取数据,又需要传参,可以采用:$scope.step=0/1来解决这个问题,设置初始值为想要的页面即可.

  4. Layui-admin-iframe通过页面链接直接在iframe内打开一个新的页面,实现单页面的效果

    前言: 使用Layui-admin做后台管理框架有很长的一段时间了,但是一直没有对框架内iframe菜单栏切换跳转做深入的了解.今天有一个这样的需求就是通过获取超链接中传递过来的跳转地址和对应的tab ...

  5. 基于 vue2 + vuex 构建一个具有 45 个页面的大型单页面应用

    源码地址: https://github.com/bailicangdu/vue2-elm 技术栈 vue2 + vuex + vue-router + webpack + ES6/7 + fetch ...

  6. 前端单页面富应用(SPA)的实现

    一. 什么是单页面富应用? 单页面应用:Single Page Application 概念:Web应用即使不刷新也在不同的页面间切换,解决浏览器前进.后退等机制被破坏等问题.并且页面访问会被浏览器保 ...

  7. H5单页面手势滑屏切换原理

    H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 1.实现原理 ...

  8. 快速构建H5单页面切换骨架

    在Web App和Hybrid App横行的时代,为了拥有更好的用户体验,单页面应用顺势而生,单页面应用简称`SPA`,即Single Page Application,就是只有一个HTML页面的应用 ...

  9. webpack+react+antd 单页面应用实例

    React框架已经火了好长一段时间了,再不学就out了! 对React还没有了解的同学可以看看我之前的一篇文章,可以快速简单的认识一下React.React入门最好的实例-TodoList 自己从开始 ...

随机推荐

  1. 1~n中1的和

    题目:给定一个十进制的正整数,写下从1开始,到N的所有整数,然后数一下其中出现“1”的个数: 要求:写一个函数f(n),返回1到n之间出现“1“的个数, 思路: 1.先判断这个数共多少位,假设为n位: ...

  2. 我的JAVA运算符理解

    基本概念 原码,反码,补码 只需要记住这几句就够了  1.二进制的最高位是符号位:0表示正数,1表示负数 2.正数的原码,反码,补码都一样 3.负数的反码=它的原码符号位不变,其他位取反 4.负数的补 ...

  3. 第一个spring冲刺

    第一天商量讨论出我们选择的题目为四则运算,虽然在上一个学期已经做过了,但是还有完善的地方,希望能够做出创新,另外下面的燃尽图是我们预测的3个阶段的进度,按情况不同可能实际的情况也不同,但是我们会尽量跟 ...

  4. C#简单窗体应用程序(一)

    使用C#创建控制台应用程序的基本步骤: (1)创建项目: (2)用户界面设计: (3)属性设置: (4)编写程序代码: (5)保存.调试.运行: 例题:创建一个Windows窗体应用程序,在窗体中添加 ...

  5. 51单片机数组的定义方法(code与data的作用)

    转自:http://blog.sina.com.cn/s/blog_94994f7b01010s1h.html 数组前不加“code”或“data”,则默认将数组存放在程序存储器中:code 指定数据 ...

  6. AG-Admin微服务框架入门

    AG-Admin微服务框架入门  @qq群:一群: 837736451  二群 169824183 一 概要介绍 AG-Admin后台地址:https://gitee.com/minull/ace-s ...

  7. JS计算两个日期之间的天数,时间差计算

    1.日期之间的天数计算 //计算天数差的函数,通用 function DateDiff(sDate1, sDate2) { //sDate1和sDate2是2017-9-25格式 var aDate, ...

  8. java 调用 oracle的function 和 procedure

    1.调用函数 CallableStatement cs=con.prepareCall("{?=call get_pname(?,?,?)}"); 第一个?表示返回的值,后面的?可 ...

  9. PHP ini_set

    PHP ini_set用来设置php.ini的值,在函数执行的时候生效,对于虚拟空间来说,很方便,下面为大家介绍下此方法的使用   PHP ini_set用来设置php.ini的值,在函数执行的时候生 ...

  10. Find non-overlap jobs with max cost

    Given a set of n jobs with [start time, end time, cost] find a subset so that no 2 jobs overlap and ...