单页面和多页面的网页差别比较（SPA）
| 单页面应用(singlePAge Web Application) | 多页面应用MultiPage Applicaton,MPA) | |
| 组成 | 一个外壳页面和多个页面片段组成 | 多个完整的页面组成 |
| 资源公用(css,js) | 共用，只需在外壳部分加载 | 不共用，每个页面都需要重新加载 |
| 刷新方法 | 页面局部刷新或更改 | 整页刷新 |
| url模式 |
a.com/#/pageone a.com/pagetwo |
a.com/pageone.html a.com/pagetwo.html |
| 用户体验 | 页面片段间切换快，用户体验良好 | 页面切换加载慢，流畅度不够，用户体验差 |
| 转场动画 | 容易实现 | 无法实现 |
| 数据传递 | 容易 |
依赖uri传参，或者cookie, localStorage等 |
| 搜素引擎优化(seo) |
需要单独方案，实现比较困难，不利于seo检索，可利用 服务器端渲染(SSR)优化 |
容易实现 |
| 适用范围 | 高要求的体验度，追求姐买你流畅的应用 | 适应于追求高支持搜索引擎的应用 |
| 开发成本 | 较高，常需要借助专业的框架 | 较低，但是亚眠重复代码多 |
| 维护成本 | 相对容易 | 相对复杂 |
单页面和多页面的网页差别比较（SPA）的更多相关文章
- 不使用Ajax，如何实现表单提交不刷新页面
不使用Ajax,如何实现表单提交不刷新页面? 目前,我想到的是使用<iframe>,如果有其他的方式,后续再补. 举个栗子: 在表单上传文件的时候必须设置enctype="mul ...
- Vue-cli创建项目从单页面到多页面
vue-cli创建项目从单页面到多页面 对于某些项目来说,单页面不能很好的满足需求,所以需要将vue-cli创建的单页面项目改为多页面项目. 需要修改以下几个文件: 1.下载依赖glob $npm i ...
- Vue-cli创建项目从单页面到多页面2-history模式
之前讲过怎样将vue-cli创建的项目改造成多页面(vue-cli创建项目从单页面到多页面),今天说一下怎样在多页面的前提下使用history模式. 如何使用history模式 因为vue默认的has ...
- localStorage单页面及不同页面监听变动
分析 H5本地存储有两个API,一个是Web Storage,还有一个是Web SQL.不管是哪一个,都是基于JavaScript语言来使用,而Web Storage提供了两种存储类型 API: s ...
- Vue-cli创建项目从单页面到多页面4 - 本地开发服务器设置代理
前后端分离开发时,有时候会遇到跨域的情况:只在开发的时候存在跨域,项目上线后,由于配置的域名相同,跨域就会不存在. 这个时候,有两种方案可以比较快的解决: 1.利用h5的特性,使用cors,在ngni ...
- Vue-cli创建项目从单页面到多页面3-关于将打包后的项目文件不放在根目录下
关于将打包后的项目文件不放在根目录下 有时候,我们总是需要这样的设置:希望将打包后的文件放在a.b.com/somepath/这样一个路径下. 然而在vue-cli创建的项目中,默认的打包路径中的静态 ...
- 使用Java+NetBeans设计web服务和页面，用Tomcat部署网页
一 安装NetBeans(自动安装jdk) 二 创建服务器 三 发布服务 一 安装NetBeans(自动安装jdk) 进入oracle的下载界面: http://www.oracle.com/tech ...
- SharePoint 2013 入门教程之创建页面布局及页面
在SharePoint的使用过程中,页面布局和页面时很重要的两个概念,主要用于数据个性化展示,下面,我们简单介绍一下SharePoint的页面布局和页面的个性化. 一. SharePoint页面模型概 ...
- MVC 从后台页面 取前台页面传递过来的值的几种取法
MVC 从后台页面 取前台页面传递过来的值的几种取法 <1>前台页面 Index视图 注意:用户名表单的name值为txtName 密码表单的name值为txtPassword & ...
- WinPhone学习笔记（一）——页面导航与页面相关
最近学一下Windows Phone(接下来简称“WinPhone”)的开发,在很久很久前稍探究一下WinPhone中对一些传感器的开发,那么现在就从头来学学WinPhone的开发.先从WinPhon ...
随机推荐
- git基本操作-长期维护
############### 初识git ############## """ git初识: 1,git是什么?git是一个帮助用户版本控制的软件, 2,g ...
- Yii框架的学习指南（策码秀才篇）1-3 我是这么学习的yii framework （不间断更新中）
Ⅰ.基本概念一.入口文件入口文件内容:一般格式如下:<?php $yii=dirname(__FILE__).'/../../framework/yii.php';//Yii框架位置$confi ...
- plsql登录，tables表为空解决方案
共两种方法,第一种不行,再试下第二种: 第一种: plsql tables 表存在,但是看不到所有的表信息 将C:\Windows\Prefetch目录下,几个PLSQL DEVELOPER***** ...
- JAVA专业术语面试100问
前言:面试技巧另外开篇再说,先上面试干货吧.Redis.消息队列.SQL不要走开,关注后更精彩! 1.面向对象的特点有哪些? 抽象.继承.封装.多态. 2.接口和抽象类有什么联系和区别? 3.重载和重 ...
- javascript中的undefined 和 not defined
经研究发现,两者之间有很大的区别,不知从英语讲,这两者都有啥区别,研究结果如下 测试os:ubuntu 测试浏览器:chrome 测试案例1 console.log(a) 报错 ReferenceEr ...
- 浙江省第十六届大学生ACM程序设计竞赛部分题解
E .Sequence in the Pocket sol:将数组copy一份,然后sort一下,找寻后面最多多少个元素在原数组中保持有序,用总个数减去已经有序的就是我们需要移动的次数. 思维题 #i ...
- Java IO: 其他字符流(下)
作者: Jakob Jenkov 译者: 李璟(jlee381344197@gmail.com) 本小节会简要概括Java IO中的PushbackReader,LineNumberReader,St ...
- java中字符串相等判断
字符串的判断有2种: 1.判断地址是否相等 用:== 2.判断值是否相等 用:equals方法 Object类作为所有类的超类,而Object类的equals方法是直接比较地址的,源码如下: pu ...
- python3多线程爬虫（第一卷）
多进程虽然使用方便,可以充分利用CPU,但是由于个进程之间是并行且各自有自己的数据存储,所以很难进行数据间的通信,需要接入第三方模块,现在我依旧用糗事百科讲解下多线程的应用,举个例子之前用4个进程同时 ...
- C语言学习笔记之字符串拼接的2种方法——strcat、sprintf
本文为原创文章,转载请标明出处 1. 使用strcat进行字符串拼接 #include <stdio.h> #include <stdlib.h> #include <s ...