单页面应用(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）的更多相关文章

  1. 不使用Ajax，如何实现表单提交不刷新页面

    不使用Ajax,如何实现表单提交不刷新页面? 目前,我想到的是使用<iframe>,如果有其他的方式,后续再补. 举个栗子: 在表单上传文件的时候必须设置enctype="mul ...

  2. Vue-cli创建项目从单页面到多页面

    vue-cli创建项目从单页面到多页面 对于某些项目来说,单页面不能很好的满足需求,所以需要将vue-cli创建的单页面项目改为多页面项目. 需要修改以下几个文件: 1.下载依赖glob $npm i ...

  3. Vue-cli创建项目从单页面到多页面2-history模式

    之前讲过怎样将vue-cli创建的项目改造成多页面(vue-cli创建项目从单页面到多页面),今天说一下怎样在多页面的前提下使用history模式. 如何使用history模式 因为vue默认的has ...

  4. localStorage单页面及不同页面监听变动

    分析 H5本地存储有两个API,一个是Web Storage,还有一个是Web SQL.不管是哪一个,都是基于JavaScript语言来使用,而Web Storage提供了两种存储类型 API:  s ...

  5. Vue-cli创建项目从单页面到多页面4 - 本地开发服务器设置代理

    前后端分离开发时,有时候会遇到跨域的情况:只在开发的时候存在跨域,项目上线后,由于配置的域名相同,跨域就会不存在. 这个时候,有两种方案可以比较快的解决: 1.利用h5的特性,使用cors,在ngni ...

  6. Vue-cli创建项目从单页面到多页面3-关于将打包后的项目文件不放在根目录下

    关于将打包后的项目文件不放在根目录下 有时候,我们总是需要这样的设置:希望将打包后的文件放在a.b.com/somepath/这样一个路径下. 然而在vue-cli创建的项目中,默认的打包路径中的静态 ...

  7. 使用Java+NetBeans设计web服务和页面，用Tomcat部署网页

    一 安装NetBeans(自动安装jdk) 二 创建服务器 三 发布服务 一 安装NetBeans(自动安装jdk) 进入oracle的下载界面: http://www.oracle.com/tech ...

  8. SharePoint 2013 入门教程之创建页面布局及页面

    在SharePoint的使用过程中,页面布局和页面时很重要的两个概念,主要用于数据个性化展示,下面,我们简单介绍一下SharePoint的页面布局和页面的个性化. 一. SharePoint页面模型概 ...

  9. MVC 从后台页面 取前台页面传递过来的值的几种取法

      MVC 从后台页面 取前台页面传递过来的值的几种取法   <1>前台页面 Index视图 注意:用户名表单的name值为txtName 密码表单的name值为txtPassword & ...

  10. WinPhone学习笔记（一）——页面导航与页面相关

    最近学一下Windows Phone(接下来简称“WinPhone”)的开发,在很久很久前稍探究一下WinPhone中对一些传感器的开发,那么现在就从头来学学WinPhone的开发.先从WinPhon ...

随机推荐

  1. linux下java调用C

    linux下java调用C 分类: linux2012-05-22 09:12 1529人阅读 评论(0) 收藏 举报 javalinuxmakefilegccclasscommand 下面是在ubu ...

  2. centos7 部署vue项目（前后端分离、nginx）

    一.环境准备 1.centos7系统 2.mysql数据库 3.在centos7虚拟机上安装好nginx 二.部署内容准备 1.后端war包 或者可执行jar 因为我这里是spring boot项目. ...

  3. LabVIEW的优点

    知道Labview的英文全称是什么吗?Labview的创始公司的名字是什么吗?哈哈,其实这就是NI(National Instruments)美国国家仪器公司创造Labview的初衷:代替传统测量仪器 ...

  4. JS代码，从一个数组中得到连号的数并显示

    JavaScript code function m() { var k = [1, 2, 7, 8, 9, 11, 22, 35, 36]; ) return; ; ; ; ; i < k.l ...

  5. Anaconda 安装、TensorFlow 安装、pytorch 安装

    问题 1 假设已经安装完Anaconda Navigator,按照 网址:https://www.zhihu.com/question/55577586 的教程操作,设置镜像源地址,安装. 问题 2: ...

  6. 3dmax2017卸载/安装失败/如何彻底卸载清除干净3dmax2017注册表和文件的方法

    3dmax2017提示安装未完成,某些产品无法安装该怎样解决呢?一些朋友在win7或者win10系统下安装3dmax2017失败提示3dmax2017安装未完成,某些产品无法安装,也有时候想重新安装3 ...

  7. python3下scrapy爬虫(第七卷:编辑器内执行scrapy）

    之前我们都是在终端切入到scrapy的路境内执行爬虫的,你要多敲多少行的字节,所以这次我们谈谈如何在编辑器里执行,这个你可以用在爬虫中,当你使用PYTHONWEB开发时尽量不要在编辑器内启动端口服务那 ...

  8. Python-SSH批量登陆并执行命令

    Python-SSH批量登陆并执行命令 #!/usr/bin/env python #-*- coding:utf-8 -*- import paramiko from time import cti ...

  9. Activiti 5.16 用户手册

    http://www.mossle.com/docs/activiti/index.html#bpmnNoneStartEvent   Activiti 5.16 用户手册

  10. 4.2英寸的iPhone SE2就要来了！但你还会买单吗？

    SE2就要来了!但你还会买单吗?" title="4.2英寸的iPhone SE2就要来了!但你还会买单吗?"> 与其他手机厂商不同,苹果在手机市场的产品策略很&q ...