单页应用简单介绍

172 阅读3分钟
  1. 什么是单页应用
  2. 单页应用的优缺点
  3. 如何解决缺点
  4. 单页应用的代表框架
  5. 单页应用和多页应用的区别
  6. vue 可以多页应用开发吗

单页应用:

定义: signal-page-application 简称SPA

它是一种网站应用的模型,它可以动态重写当前的页面来与用户交互,而不需要重新加载整个页面

多页应用:就是指一个应用中有多个页面,页面跳转时是整页刷新

优点:

1. 用户操作体验好:

用户不用刷新页面,整个交互过程都是通过Ajax来操作。
没有页面之间的切换,就不会出现“白屏现象”,也不会出现假死并有“闪烁”现象
单页应用的流畅性让 Web 应用更像桌面端或 Native 应用了。

2. 前后端分离开发:

相对于传统的 Web 应用,单页应用做到了前后端分离。
后端只负责处理数据提供接口,页面逻辑和页面渲染都交给了前端。

3. 对于服务端来说:

服务器压力相对较小,吞吐量提高,一套代码可以跨平台使用

缺点:

1.SEO(Search Engine Optimization)搜索引擎优化 不友好:

它是一种利用搜索引擎的搜索规则来提高网站在搜索引擎排名的方法。目前各家搜索引擎对JS支持不好,而单页应用的内容都是靠js 渲染出来的。 所以使用单页面应用将大大减少搜索引擎对网站的收录。在百度或者谷歌这样的搜索引擎中,排名比较差

seo 本质是一个服务器向另一个服务器发起请求,解析请求内容。但一般来说搜索引擎是不会去执行请求到的js的。也就是说,搜索引擎的基础爬虫的原理就是抓取url,然后获取html源代码并解析。 如果一个单页应用,html在服务器端还没有渲染部分数据数据,在浏览器才渲染出数据,即搜索引擎请求到的html是模型页面而不是最终数据的渲染页面。 这样就很不利于内容被搜索引擎搜索到

2. 导航不可用:需要自行实现前进后退

例如无法记切换前滚动条位置:解决方案

3. 首屏加载慢:

因为单页引用(比如vue)在工程化开发的时候依赖于 webpack 。

而webpack是将所有的资源(js 和css打包成一个文件)整合到一块后形成一个html文件 一堆 js文件,在加载页面显示的时候加载打包文件。

如果打包文件较大或者网速慢则用户体验不好。

代表框架:

前端发展到现在,单页应用的使用已经很广泛。

目前时兴的 React、Vue、Angular 等前端框架均采用了 SPA 原则。

单页应用意味着前端掌握了主动权,也让前端代码更复杂和庞大,模块化、组件化以及架构设计都变得越来越重要。

单页应用和多页应用的区别:

vue通过配置webpack可以实现多页应用

待补充:具体暂不介绍

面试题:

  1. 什么是单页应用,介绍一下优缺点
  2. 怎么解决spa首屏加载慢的问题
  3. 怎么在vue切换的时候记住滚动条位置
  4. 怎么解决SEO不友好的问题