说说你对SPA（单页⾯）的理解？
⾯试官：你对SPA单页⾯的理解，它的优缺点分别是什
么？如何实现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等传递
页⾯切换速度快，⽤户体验良好切换加载资源，速度慢，⽤户体验差
维护成本相对容易相对复杂
单页应⽤优缺点
优点：
具有桌⾯应⽤的即时性、⽹站的可移植性和可访问性
⽤户体验好、快，内容的改变不需要重新加载整个页⾯
良好的前后端分离，分⼯更明确
缺点：
不利于搜索引擎的抓取
react router的优点⾸次渲染速度相对较慢
三、实现⼀个SPA
原理
1. 监听地址栏中hash 变化驱动界⾯变化
2. ⽤pushsate 记录浏览器的历史，驱动界⾯发送变化
实现
hash 模式核⼼通过监听url 中的hash 来进⾏路由跳转
history 模式
history 模式核⼼借⽤ HTML5 history api ，api 提供了丰富的 router 相关属性先了解⼀个⼏个相关的api history.pushState 浏览器历史纪录添加记录
history.popState 当 history 发⽣变化时触发
// 定义 Router
class Router {
constructor () { this .= {}; // 存放路由path 及callback this .= '';
// 监听路由change 调⽤相对应的路由回调 .addEventListener ('load', this ., false ); .addEventListener ('hashchange', this ., false ); } route (,){ this .[] =;
} push () { this .[] && this .[]()
}
} // 使⽤ router
.= new Router ();
.route ('/',()=>.log ('page1')) .route ('/page2',()=>.log ('page2')) .push ('/') // page1 .push ('/page2') // page2 // 定义 Router
class Router {
constructor () { this .= {};
this .listerPopState ()
} init () { .replaceState ({:}, null ,); this .[] && this .[](); } route (,){ this .[] =; } push () { .pushState ({:}, null ,);
this .[] && this .[](); 1234567891011121314151617
1819202122232425
1234567891011121314151617
四、题外话：如何给SPA 做SEO 下⾯给出基于Vue 的SPA 如何实现SEO 的三种⽅式
1. SSR 服务端渲染
将组件或页⾯通过服务器⽣成html ，再返回给浏览器，如nuxt.js
2. 静态化
⽬前主流的静态化主要有两种：（1）⼀种是通过程序将动态页⾯抓取并保存为静态页⾯，这样的页⾯的实际存在于服务器的硬盘中（2）另外⼀种是通过WEB 服务器的 URL Rewrite 的⽅式，它的原理是通过web 服务器内部模块按⼀定规则将外部的URL 请求转化为内部的⽂件地址，⼀句话来说就是把外部请求的静态地址转化为实际的动态页⾯地址，⽽静态页⾯实际是不存在的。这两种⽅法都达到了实现URL 静态化的效果
3. 使⽤Phantomjs 针对爬⾍处理原理是通过Nginx 配置，判断访问来源是否为爬⾍，如果是则搜索引擎的爬⾍请求会转发到⼀个node server ，再通过PhantomJS 来解析完整的HTML ，返回给爬⾍。下⾯是⼤致流程图
⾯试官：你对SPA 单页⾯的理解，它的优缺点分别是什么？如何实现SPA 应⽤呢
⼀、什么是SPA
SPA （single-page application ），翻译过来就是单页应⽤SPA 是⼀种⽹络应⽤程序或⽹站的模型，它通过动态重写当前页⾯来与⽤户交互，这种⽅法避免了页⾯之间切换打断⽤户体验在单页应⽤中，所有必要的代码（HTML 、JavaScript 和CSS ）都通过单个页⾯的加载⽽检索，或者根据需要（通常是为响应⽤户操作）动态装载适当的资源并添加到页⾯页⾯在任何时间点都不会重新加载，也不会将控制转移到其他页⾯举个例⼦来讲就是⼀个杯⼦，早上装的⽜奶，中午装的是开⽔，晚上装的是茶，我们发现，变的始终是杯⼦⾥的内容，⽽杯⼦始终是那个杯⼦结构如下图
我们熟知的JS 框架如react ,vue ,angular ,ember 都属于SPA
⼆、SPA 和MPA 的区别
上⾯⼤家已经对单页⾯有所了解了，下⾯来讲讲多页应⽤MPA （MultiPage-page application ），翻译过来就是多页应⽤在MPA 中，每个页 } listerPopState () { .addEventListener ('popstate' ,=> { const =.&&..; this .[] && this .[]() }) } } // 使⽤ Router .= new Router (); .route ('/',()=>.log ('page1')) .route ('/page2',()=>.log ('page2')) // 跳转 .push ('/page2') // page2 181920212223242526272829303132333435
⾯都是⼀个主页⾯，都是独⽴的当我们在访问另⼀个页⾯的时候，都需要重新加载html 、css 、js ⽂件，公共⽂件则根据需求按需加载如下图
单页应⽤与多页应⽤的区别
单页⾯应⽤（SPA ）多页⾯应⽤（MPA ）组成
⼀个主页⾯和多个页⾯⽚段多个主页⾯刷新⽅式
局部刷新整页刷新url 模式
哈希模式历史模式SEO 搜索引擎优化
难实现，可使⽤SSR ⽅式改善容易实现数据传递
容易通过url 、cookie 、localStorage 等传递页⾯切换
速度快，⽤户体验良好切换加载资源，速度慢，⽤户体验差维护成本相对容易相对复杂
单页应⽤优缺点优点：具有桌⾯应⽤的即时性、⽹站的可移植性和可访问性⽤户体验好、快，内容的改变不需要重新加载整个页⾯
良好的前后端分离，分⼯更明确缺点：不利于搜索引擎的抓取⾸次渲染速度相对较慢
三、实现⼀个SPA
原理
1. 监听地址栏中hash 变化驱动界⾯变化
2. ⽤pushsate 记录浏览器的历史，驱动界⾯发送变化
实现
hash 模式核⼼通过监听url 中的hash 来进⾏路由跳转
// 定义 Router
class Router {
constructor () { this .= {}; // 存放路由path 及callback
this .= '';
/
/ 监听路由change 调⽤相对应的路由回调
.addEventListener ('load', this ., false ); .addEventListener ('hashchange', this ., false ); } route (,){ this .[] =; 123456789101112
history 模式
history 模式核⼼借⽤ HTML5 history api ，api 提供了丰富的 router 相关属性先了解⼀个⼏个相关的api history.pushState 浏览器历史纪录添加记录
四、题外话：如何给SPA 做SEO
下⾯给出基于Vue 的SPA 如何实现SEO 的三种⽅式
1. SSR 服务端渲染
将组件或页⾯通过服务器⽣成html ，再返回给浏览器，如nuxt.js
2. 静态化
⽬前主流的静态化主要有两种：（1）⼀种是通过程序将动态页⾯抓取并保存为静态页⾯，这样的页⾯的实际存在于服务器的硬盘中（2）另 }
push () {
this .[] && this .[]() }
} // 使⽤ router
.= new Router (); .route ('/',()=>.log ('page1')) .route ('/page2',()=>.log ('page2')) .push ('/') // page1 .push ('/page2') // page2 // 定义 Router
class Router {
constructor () { this .= {};
this .listerPopState ()
} init () { .replaceState ({:}, null ,); this .[] && this .[](); } route (,){ this .[] =;
} push () { .pushState ({:}, null ,);
this .[] && this .[]();
}
listerPopState () { .addEventListener ('popstate' ,=> { const =.&&..;
this .[] && this .[]()
}) } } // 使⽤ Router
.= new Router (); .route ('/',()=>.log ('page1')) .route ('/page2',()=>.log ('page2'))
// 跳转 .push ('/page2') // page2
1314151617181920212223242526
12345678910111213141516171819202122232425262728
29303132
3334
发表评论