面试官:说说你对SPA(单页应用)的理解?
一、什么是SPA
SPA(single-page application),翻译过来就是单页应用
SPA
是一种网络应用程序或网站的模型,它通过动态重写当前页面来与用户交互,这种方法避免了页面之间切换打断用户体验
在单页应用中,所有必要的代码(HTML
、JavaScript
和CSS
)都通过单个页面的加载而检索,或者根据需要(通常是为响应用户操作)动态装载适当的资源并添加到页面
页面在任何时间点都不会重新加载,也不会将控制转移到其他页面
举个例子来讲就是一个杯子,早上装的牛奶,中午装的是开水,晚上装的是茶,我们发现,变的始终是杯子里的内容,而杯子始终是那个杯子
结构如下图
我们熟知的JS框架如react
,vue
,angular
,ember
都属于SPA
二、SPA和MPA的区别
上面大家已经对单页面有所了解了,下面来讲讲多页应用
MPA(MultiPage-page application),翻译过来就是多页应用
在MPA
中,每个页面都是一个主页面,都是独立的
当我们在访问另一个页面的时候,都需要重新加载html
、css
、js
文件,公共文件则根据需求按需加载
如下图
单页应用与多页应用的区别
单页面应用(SPA) | 多页面应用(MPA) | |
---|---|---|
组成 | 一个主页面和多个页面片段 | 多个主页面 |
刷新方式 | 局部刷新 | 整页刷新 |
url模式 | 哈希模式 | 历史模式 |
SEO搜索引擎优化 | 难实现,可使用SSR方式改善 | 容易实现 |
数据传递 | 容易 | 通过url、cookie、localStorage等传递 |
页面切换 | 速度快,用户体验良好 | 切换加载资源,速度慢,用户体验差 |
维护成本 | 相对容易 | 相对复杂 |
单页应用优缺点
优点:
具有桌面应用的即时性、网站的可移植性和可访问性
用户体验好、快,内容的改变不需要重新加载整个页面
良好的前后端分离,分工更明确
缺点:
不利于搜索引擎的抓取
首次渲染速度相对较慢
三、实现一个SPA
原理
监听地址栏中
hash
变化驱动界面变化用
pushsate
记录浏览器的历史,驱动界面发送变化
实现
hash
模式
核心通过监听url
中的hash
来进行路由跳转
// 定义 Router
class Router {constructor () {this.routes = {}; // 存放路由path及callbackthis.currentUrl = '';// 监听路由change调用相对应的路由回调window.addEventListener('load', this.refresh, false);window.addEventListener('hashchange', this.refresh, false);}route(path, callback){this.routes[path] = callback;}push(path) {this.routes[path] && this.routes[path]()}
}// 使用 router
window.miniRouter = new Router();
miniRouter.route('/', () => console.log('page1'))
miniRouter.route('/page2', () => console.log('page2'))miniRouter.push('/') // page1
miniRouter.push('/page2') // page2
history模式
history
模式核心借用 HTML5 history api
,api
提供了丰富的 router
相关属性
先了解一个几个相关的api
history.pushState
浏览器历史纪录添加记录history.replaceState
修改浏览器历史纪录中当前纪录history.popState
当history
发生变化时触发
// 定义 Router
class Router {constructor () {this.routes = {};this.listerPopState()}init(path) {history.replaceState({path: path}, null, path);this.routes[path] && this.routes[path]();}route(path, callback){this.routes[path] = callback;}push(path) {history.pushState({path: path}, null, path);this.routes[path] && this.routes[path]();}listerPopState () {window.addEventListener('popstate' , e => {const path = e.state && e.state.path;this.routers[path] && this.routers[path]()})}
}// 使用 Routerwindow.miniRouter = new Router();
miniRouter.route('/', ()=> console.log('page1'))
miniRouter.route('/page2', ()=> console.log('page2'))// 跳转
miniRouter.push('/page2') // page2
四、题外话:如何给SPA做SEO
下面给出基于Vue
的SPA
如何实现SEO
的三种方式
SSR服务端渲染
将组件或页面通过服务器生成html,再返回给浏览器,如nuxt.js
静态化
目前主流的静态化主要有两种:
(1)一种是通过程序将动态页面抓取并保存为静态页面,这样的页面的实际存在于服务器的硬盘中
(2)另外一种是通过WEB服务器的 URL Rewrite
的方式,它的原理是通过web服务器内部模块按一定规则将外部的URL请求转化为内部的文件地址,一句话来说就是把外部请求的静态地址转化为实际的动态页面地址,而静态页面实际是不存在的。这两种方法都达到了实现URL静态化的效果
使用
Phantomjs
针对爬虫处理
原理是通过Nginx
配置,判断访问来源是否为爬虫,如果是则搜索引擎的爬虫请求会转发到一个node server
,再通过PhantomJS
来解析完整的HTML
,返回给爬虫。
下面是大致流程图
参考文献
https://segmentfault.com/a/1190000019623624
https://juejin.cn/post/6844903512107663368
https://www.cnblogs.com/constantince/p/5586851.html
面试官:说说你对SPA(单页应用)的理解?相关推荐
- SPA单页应用的优缺点
SPA单页应用的优缺点 Single Page Web Application是一种特殊的Web应用,其所有的活动局限于一个Web页面中,仅在该Web页面初始化时加载相应的HTML.JavaScrip ...
- java 单页面spa_Javascript 与 SPA单页Web富应用
书单推荐 # <单页Web应用:JavaScript从前端到后端>http://download.csdn.net/detail/epubitbook/8720475 # <MVC的 ...
- 面试官给我挖坑:单台服务器并发TCP连接数到底可以有多少 ?
点击上方"朱小厮的博客",选择"设为星标" 后台回复"k8s"领取阿里云<深入浅出k8s.pdf> 欢迎跳转到本文的原文链接:h ...
- SPA 单页Web应用
定义 单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用.它将所有的活动局限于一个Web页面中,仅在该Web页面初始化时加载相应的HTM ...
- spa:单页web应用(介绍,实现思路及技术点,路由,router-link相关属性)
SPA是什么 单页Web应用(single page application,SPA),就是只有一个Web页面的应用, 是加载单个HTML页面,并在用户与应用程序交互时动态更新该页面的Web应用程序 ...
- EASY spa单页面版文档
1.1.导入项目 下载项目后进行解压 使用IDEA.WebStorm.HBuilder等前端开发工具打开 打开index.html点击右上角浏览器图标运行: 注意: 必须以http://的形式访问,而 ...
- 自适应单页官网源码 自适应单页官网源码
自适应单页官网源码 点我下载
- 面试官:谈谈你对深拷贝和浅拷贝的理解
在面试的时候,如果面试官问对你说:请谈谈你对深拷贝和浅拷贝的理解,你会怎么回答这个问题呢?可能有很多小伙伴都不太理解深拷贝和浅拷贝的含义和区别,那么今天就和各位小伙伴分享一下我对二者的理解
- 面试官提问:说说你对消息队列的理解
每天早上七点三十,准时推送干货 关于消息队列,断断续续的看了很多资料,一直想抽个时间把这些知识整理记录下来,但是没腾出时间来写,正好所在的项目在实际业务中使用到了消息队列,索性就将这方面的知识整理一下 ...
- 面试官:谈谈你对IOC和AOP的理解及AOP四种实现方式
目录 一.IOC与AOP介绍 二.实现AOP的四种方式 方式1:基于经典代理来实现 方式2:使用Spring AOP的API接口 方式3:自定义类来实现AOP 方式4:基于注解实现 一.IOC与AOP ...
最新文章
- Yahoo中国变脸?
- MySQL:Can't connect to mysql server 10038
- HttpClient 详解一《C#高级编程(第9版)》
- 查询高考成绩2021一分一段表,一分一段表查询2021 如何查询一分一段表
- 9206 课堂笔记 综合演练 添加数据与非空验证
- java 类型通配符_java中泛型之类型通配符(?)
- Linux内创建新用户,linux下手工创建新用户
- apereo cas mysql_史上最详细的 Apereo CAS 5.3开发教程:二、Apereo CAS 5.3 Server环境搭建,登录名,密码从数据库中获取...
- GPRS网络继电器SAC07GSA评估套件使用心得
- 矩阵理论(一)基本概念的个人理解
- Bailian2967 特殊日历计算【日期计算】
- 什么是存储过程?用什么调用
- 一文教会你使用R语言和基本统计分析
- 5G网元结构和协议栈
- 【3】少儿Python编程学习_从哪开始学习
- python爬取58同城租房信息,用selenium爬取58同城租房信息(万级数据)
- iMindMap邀您一起“约惠”开学季
- 计算机组装前需要的准备工作,手把手教你攒电脑:组装电脑全过程
- 旧款华为笔记本解锁智慧语音教程
- 开发想顺利,流程得明确!
热门文章
- 关于IDM的使用相关教程
- win10锁定计算机命令,win10怎么锁定磁盘 锁住win10计算机磁盘的操作步骤
- vba excel 画折线图
- python使用matplotlib可视化线图(line plot)、使用semilogy函数将Y轴数据处理为对数坐标(logarithmic scale in Matplotlib)
- c语言编程阿拉伯数字转中文,阿拉伯数字到中文大写数字的转换
- ppt大小如何压缩,ppt压缩方法
- 学生个人网页模板 学生个人网页设计作品 简单个人主页成品 个人网页制作 HTML学生个人网站作业设计
- 北京邮电大学计算机考研信息汇总
- mysql可以用表情符号_让MySQL支持emoji表情符号存储
- 新媒体文章标题怎么写?