多页面应用

每一次页面跳转,后端都会返回一个新的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. ACM Shenyang Onsite 2016 题目

    A. Thickest Burger 1000ms 262144K   ACM ICPC is launching a thick burger. The thickness (or the heig ...

  2. 结对作业-四则运算GUI

    目录: 一.项目地址二.PSP三.接口设计四.计算模块接口的设计与实现过程五.计算模块接口部分的性能改进六.计算模块部分单元测试展示七.计算模块部分异常处理说明八.界面模块的详细设计过程九.界面模块与 ...

  3. Week 2

    第1章:概论1.原文“这些软件企业的商业模式有些事合情合理也合法:有些看似合情合理,但不怎么合法:有些做法不合 理,但是还没有出台相关的法律.在相关法律完善之前,软件行业还有一个行规,即应该有职业道德 ...

  4. week4b:个人博客作业

    下面是week4做程序的过程. 1.在做之前先做客户需求,要求使用的使用mul图. 自己第一次听到这个名字,网上查UML为, http://www.cnblogs.com/wangkangluo1/a ...

  5. Hive与Hbase的区别

    1. 两者分别是什么?     Apache Hive是一个构建在Hadoop基础设施之上的数据仓库.通过Hive可以使用HQL语言查询存放在HDFS上的数据.HQL是一种类SQL语言,这种语言最终被 ...

  6. bootstrap使用总结

    bootstrap是一个webcss框架,集合了html/css/jquery为一家,创建响应式的页面.所谓的响应式就是适配不同的上网设备. 使用bootstrap的步骤: 1.下载bootstrap ...

  7. 累计进度条 PSP 饼图

    累计进度条   PSP   饼图 每周例行报告 本周PSP 类别 任务 开始时间 结束时间 被打断时间 总计工作时间 2016年9月24日 读书 构建之法-6.7章 19:00 20:00 2 58m ...

  8. koa中接收前台传递的各种数据类型的方式

    标签(空格分隔): koa 数据类型接收 主要介绍三种会用到的中间件,其实都是自己在开发的过程中踩过的坑 首先介绍koa-body [详情介绍 https://github.com/dlau/koa- ...

  9. Task的运行原理和工作窃取

    在net4.0以前,当调用ThreadPool.QueueUserWorkItem方法往线程池中插入作业时,会把作业内容(其实就是一个委托)放到线程池中的一个全局队列中,然后线程池中的线程按照先进先出 ...

  10. DB2 数据库常用操作【持续更新】

    好久没写博客了. 上次还是两个月前. 1. 连接数据库 db2 connect to dbName user userName using password 2. 查看表结构 db2 "de ...