手机网站建设价格低,公司管理系统的设计与实现,织梦网站怎么建设,清湖网站建设一、什么是SPA SPA#xff08;single-page application#xff09;#xff0c;翻译过来就是单页应用SPA是一种网络应用程序或网站的模型#xff0c;它通过动态重写当前页面来与用户交互#xff0c;这种方法避免了页面之间切换打断用户体验在单页应用中#xff0c;所有必要… 一、什么是SPA SPAsingle-page application翻译过来就是单页应用SPA是一种网络应用程序或网站的模型它通过动态重写当前页面来与用户交互这种方法避免了页面之间切换打断用户体验在单页应用中所有必要的代码HTML、JavaScript和CSS都通过单个页面的加载而检索或者根据需要通常是为响应用户操作动态装载适当的资源并添加到页面页面在任何时间点都不会重新加载也不会将控制转移到其他页面举个例子来讲就是一个杯子早上装的牛奶中午装的是开水晚上装的是茶我们发现变的始终是杯子里的内容而杯子始终是那个杯子结构如下图 我们熟知的JS框架如react,vue,angular,ember都属于SPA 二、SPA和MPA的区别 上面大家已经对单页面有所了解了下面来讲讲多页应用MPAMultiPage-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及callback this.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 istory模式 history 模式核心借用 HTML5 history apiapi 提供了丰富的 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]() }) } } // 使用 Router window.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/1190000019623624https://juejin.cn/post/6844903512107663368https://www.cnblogs.com/constantince/p/5586851.html