单页面和多页面的网页差别比较(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 ...
随机推荐
- GSON转换成Long型变为科学计数法及时间格式转换异常的解决方案
直接上工具类了,简单实用 public class GsonUtils { private static Gson gson = null; static { if (gson == null) { ...
- curl查看请求你响应时间
[root@localhost ~]# curl -o /dev/null -s -w time_namelookup:%{time_namelookup}"\n"time_con ...
- DjangoBlog部署教程
本篇文章将会手把手教你如何部署DjangoBlog项目,首先介绍下我这里的基本环境,请大家仔细阅读此部分,下面的教程都会使用这些约定来介绍: 系统是ubuntu 18.04 LTS 假设你的域名是ww ...
- python学习笔记(24)-类与对象
#类与对象 #python类的语法 关键字 class #class 类名 类名的规范是:数字字母下划线组成,不能以数字开头 首字母大写 驼峰命名 #类属性 放在类里面的变量值 #类方法 放在类里面的 ...
- hibernate的乐观锁和悲观锁+事务
hibernate实现数据库操作的乐观锁和悲观锁参看:https://blog.csdn.net/chang_ge/article/details/79695813https://www.cnblog ...
- Python爬虫之爬取站内所有图片
title date tags layut Python爬虫之爬取站内所有图片 2018-10-07 Python post 目标是 http://www.5442.com/meinv/ 如需在非li ...
- js正则表达式常用的大部分函数
1.)String方法a.)String.search()参数:可以是正则表达式也可以是普通的字符串.返回值:如果找到匹配则返回首字符的索引位置,找不到则返回-1var s = "Hello ...
- ROS中的日志(log)消息
学会使用日志(log)系统,做ROS大型项目的主治医生 通过显示进程的运行状态是好的习惯,但需要确定这样做不会影响到软件的运行效率和输出的清晰度.ROS 日志 (log) 系统的功能就是让进程生成一些 ...
- HTML语言 网页制作-----标签、表格、表单、框架
一:序 Html静态网页,内容(hyper text markup language,超文本标记语言) Css 网页美化 Javascript 脚本语言 二:html的介绍 <!DOCTYPE ...
- UFT场景恢复
场景恢复: 在脚本运行中可能会出现一些非预期事件.错误.程序崩溃等情况,阻止脚本继续执行下去,在此情况下脚本可能暂停执行, 直到某些界面被操作之后才会继续执行下去,为了处理这一类事件因此存在场景恢复. ...