多页面应用(MPA)和单页面应用(SPA)

2018-10-29 小若 杂七杂八


什么是SPA(单页面应用)?别想多了,不是做按摩洗浴的那个SPA。。。


单页WEB应用(single page web application,SPA),就是只有一张Web页面的应用。单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序浏览器一开始会加载必需的HTML、CSS和JavaScript,所有的操作都在这张页面上完成,都由JavaScript来控制。因此,对单页应用来说模块化的开发和设计显得相当重要。

                                                                                                                                                                                    摘自百度百科

通俗一点说就是指只有一个主页面的应用,浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候,还是会分开写(页面片段),然后在交互的时候由路由程序动态载入,单页面的页面跳转,仅刷新局部资源。


SAP的特点:

传输数据少

单页站点的重点是局部刷新,因此每次更新,传输的数据少,减少后端压力,甚至对于完全前后端分离的SPA应用,只需要传输少量json数据即可。这一点在移动端显得尤为重要,许多应用前端代码并不会频繁更新,完全可以由前端直接缓存起来,每次使用只需与后端交互少量数据。

服务可不中断

一些特殊网站,如音乐播放、IM聊天等,不希望因为页面全部重载造成服务中断。单页应用因为局部刷新,可以将这些服务放置在刷新范围之外,持续提供服务

首次加载数据大耗时长

        特别是纯前后端分离的SPA,结合一些javascript,编译出来js相当的大,即便以内网的网速首次打开也需要3秒左右。为每个模块单独编译js是种办法,但实际操作会可能发现,随着项目越做越大,拆分成独立模块编译的成本会越来越大,最终不得不委曲求全整站使用一个js,除非从一开始就有良好的规范限制。

极差的SEO(搜索引擎优化)

        众所周知,通过请求url即可获取到大量页面正文文本的页面是对搜索引擎最为友好的,虽然现在的爬虫已经具备解析运行页面js脚本索引动态内容的能力,但是每个网站千奇百怪,爬虫需要考虑触发什么事件、按什么顺序触发才能获取更多内容,索引动态内容的难度要远远大于索引静态内容。而目前主流的单页应用,几乎都是以前端js模板引擎来渲染html页面数据,直接通过url获取到的内容极少,这对搜索引擎非常不友好。SEO最差的单页应用可能仅仅只有首页能够被搜索引擎收录。这成了制约单页应用发展的一大障碍,即便现在又方案可以提高收录,但效果还是不好。

什么是MPA(多页面应用)?

MPA (Multi-page Application) 多页面应用指的就是最传统的 HTML 网页设计,早期的网站都是这样的设计,所之称为「网页设计」。使用 MPA 在使用者浏览 Web 时会依据点击需求切换页面,浏览器会不停的重载页面 (Reload)。如果使用这样的设计在 Web App 中,使用者体验比较差,整体流畅度扣分。但进入门槛低,简单套个 jQuery Mobile 就可以完成。


一张图看懂他们之间的区别:

~O1L81R673E0}VELU0X78PT.png


标签: SPA 单页面应用

发表评论:

Powered by emlog 备案号:豫ICP备18002778号