单页面应用

摘自 前端农民工的博客 让我们先来看几个网站： coding teambition cloud9 注意这几个网站的相同点，那就是在浏览器中，做了原先“应当”在客户端做的事情。它们的界面切换非常流畅，响应很迅速，跟传统的网页明显不一样，它们是什么呢？这就是单页Web应用。 所谓单页应用，指的是在一个页面上集成多种功能，甚至整个系统就只有一个页面，所有的业务功能都是它的子模块，通过特定的方式挂接到主界面上。它是AJAX技术的进一步升华，把AJAX的无刷新机制发挥到极致，因此能造就与桌面程序媲美的流畅用户体验。 其实单页应用我们并不陌生，很多人写过ExtJS的项目，用它实现的系统，很天然的就已经是单页的了，也有人用jQuery或者其他框架实现过类似的东西。用各种JS框架，甚至不用框架，都是可以实现单页应用的，它只是一种理念。有些框架适用于开发这种系统，如果使用它们，可以得到很多便利。 开发框架 ExtJS可以称为第一代单页应用框架的典型，它封装了各种UI组件，用户主要使用JavaScript来完成整个前端部分，甚至包括布局。随着功能逐渐增加，ExtJS的体积也逐渐增大，即使用于内部系统的开发，有时候也显得笨重了，更不用说开发以上这类运行在互联网上的系统。 jQuery由于偏重DOM操作，它的插件体系又比较松散，所以比ExtJS这个体系更适合开发在公网运行的单页系统

文章摘自：https://github.com/xufei/blog/issues/5#issuecomment-136962500 单页应用：优点和缺点 http://stackoverflow.com/questions/21862054/single-page-application-advantages-and-disadvantages 单页应用是什么？ 让我们先来看几个网站： coding teambition cloud9 注意这几个网站的相同点，那就是在浏览器中，做了原先“应当”在客户端做的事情。它们的界面切换非常流畅，响应很迅速，跟传统的网页明显不一样，它们是什么呢？这就是单页Web应用。 所谓单页应用，指的是在一个页面上集成多种功能，甚至整个系统就只有一个页面，所有的业务功能都是它的子模块，通过特定的方式挂接到主界面上。它是AJAX技术的进一步升华，把AJAX的无刷新机制发挥到极致，因此能造就与桌面程序媲美的流畅用户体验。 其实单页应用我们并不陌生，很多人写过ExtJS的项目，用它实现的系统，很天然的就已经是单页的了，也有人用jQuery或者其他框架实现过类似的东西。用各种JS框架，甚至不用框架，都是可以实现单页应用的，它只是一种理念。有些框架适用于开发这种系统，如果使用它们，可以得到很多便利。 开发框架 ExtJS可以称为第一代单页应用框架的典型

让我们先来看几个站点： coding（ https://coding.net/ ） teambition（ https://www.teambition.com/ ） cloud9（ https://c9.io/ ） 注意这几个站点的相同点。那就是在浏览器中，做了原先“应当”在client做的事情。 它们的界面切换非常流畅，响应非常迅速，跟传统的网页明显不一样，它们是什么呢？这就是单页Web应用。 所谓单页应用。指的是在一个页面上集成多种功能。甚至整个系统就仅仅有一个页面，全部的业务功能都是它的子模块，通过特定的方式挂接到主界面上。 它是AJAX技术的进一步升华。把AJAX的无刷新机制发挥到极致，因此能造就与桌面程序媲美的流畅用户体验。 事实上单页应用我们并不陌生，非常多人写过ExtJS的项目。用它实现的系统。非常天然的就已经是单页的了。也有人用jQuery或者其它框架实现过相似的东西。 用各种JS框架。甚至不用框架。都是能够实现单页应用的。它仅仅是一种理念。有些框架适用于开发这种系统。假设使用它们，能够得到非常多便利。 开发框架 ExtJS能够称为第一代单页应用框架的典型，它封装了各种UI组件。用户主要使用JavaScript来完毕整个前端部分，甚至包含布局。 随着功能逐渐添加，ExtJS的体积也逐渐增大。即使用于内部系统的开发。有时候也显得笨重了

一、开发框架 　　ExtJS可以称为第一代单页应用框架的典型，它封装了各种UI组件，用户主要使用JavaScript来完成整个前端部分，甚至包括布局。随着功能逐渐增加，ExtJS的体积也逐渐增大，即使用于内部系统的开发，有时候也显得笨重了，更不用说开发以上这类运行在互联网上的系统。 　　jQuery由于偏重DOM操作，它的插件体系又比较松散，所以比ExtJS这个体系更适合开发在公网运行的单页系统，整个解决方案会相对比较轻量、灵活。 　　但由于jQuery主要面向上层操作，它对代码的组织是缺乏约束的。如何在代码急剧膨胀的情况下控制每个模块的内聚性，并且适当在模块之间产生数据传递与共享，就成为了一种有挑战的事情。 　　为了解决单页应用规模增大时候的代码逻辑问题，出现了不少MV*框架，他们的基本思路都是在JS层创建模块分层和通信机制。有的是MVC，有的是MVP，有的是MVVM，而且，它们几乎都在这些模式上产生了变异，以适应前端开发的特点。 　　这类框架包括Backbone，Knockout，AngularJS，Avalon等。 二、 组件化 　　这些在前端做分层的框架推动了代码的组件化，所谓组件化，在传统的Web产品中，更多的指UI组件，但其实组件是一个广泛概念，传统Web产品中UI组件占比高的原因是它的厚度不足，随着客户端代码比例的增加，相当一部分的业务逻辑也前端化

多页应用模式(MPA) 　　页面A：http://xxx/pageA.html 　　页面B：http://xxx/pageB.html 　　页面A 跳转到页面B 整页刷新 　　 单页面应用模式（SPA） 　　页面page:http://xxx/page.html,页面内局部#page1与#page2之间跳转局部刷新 　　 多页应用与单页应用的对比 多页应用MPA 单页应用SPA 应用组成 由多个完整页面构成 一个外壳页面和多个页面片段构成 跳转方式 从一个页面到另外一个页面跳转 页面片段之间的跳转是把一个页面片段元素删除或者隐藏，加载另一个页面片段并且显示出来。这是片段之间的模拟跳转，并没有离开本身的外壳页面 刷新方式 整页刷新 页面片段局部刷新 跳转后公共资源是否重新加载 是 否 url模式 http://xxx/pageA.html http://xxx/pageB.html http://xxx/page.html#page1 http://xxx/page.html#page2 用户体验 页面间切换加载慢，移动端，用户体验差 页面片段间切换快，移动端，用户体验想对可以 能否实现转场动画 无法实现 容易实现 页面间传递数据 依赖url / cookie / localStorage； 麻烦 同一个外壳页面内，简单 搜索引擎优化SEO 可以直接做 需要借助一些框架等，麻烦

浅谈单页应用和多页应用——Vue.js向 多页面 多页面应用：每次页面跳转，后台都会返回一个新的HTML文档，就是多页面应用。 在以往传统开发的应用（网站）大多都是多页面应用，路由由后端来写。 页面跳转=》返回HTML，优点：首屏时间快，SEO效果好，缺点是页面切换慢。 首屏时间快？访问页面，服务器只需要返回一个HTML文件，这个过程就经历了一个HTTP请求，请求响应回来，页面就能被展示出来。 SEO（搜索引擎排名）效果好？搜索引擎能识别HTML的内容，根据内容进行排名。 页面切换慢：每一次切换页面都需要发起一个HTTP请求，假设网络较慢就会出现卡顿情况。 单页面 单页应用：用vue写的项目是单页应用，刷新页面会请求一个HTML文件，切换页面的时候，并不会发起新的请求一个HTML文件，只是页面内容发生了变化 vue.js原理：JS感知URL变化，当URL发生变化后，使用JS动态把当前的页面内容清除掉，再把下一个页面的内容挂载到页面上。此时的路由就不是后端来做了，而是前端来做，判断页面到底显示哪一个组件，再把以前的组件清除掉使用新的组件。就不会每一次跳转都请求HTML文件。 页面跳转 =》 JS渲染，优点页面切换快，缺点首屏时间稍慢，SEO差 首屏时间慢？请求HTML还有JS的请求。（在此我想问：HTML里面不也有JS请求嘛？这一点是在看知乎上某个大神说的，没明白

（盗图镇楼） 多页应用 每一次页面跳转的时候，后台服务器都会返回一个新的html文档，这种类型的网站就是多页网站，也叫多页应用。{页面跳转——>返回html} 优点是：首屏时间快，seo效果好；缺点是：页面切换慢； 为什么多页应用的首屏时间快？ 首屏时间叫做页面首个屏幕的内容展现时间，当我们访问页面的时候，服务器返回一个html，页面就会展示出来，这个过程只经历了一个http的请求，所以页面的展示速度非常的快。 为什么搜素引擎的优化效果好（seo）? 搜索引擎在做网页排名的时候，要根据网页的内容才给网页的权重，根据权重的大小来进行网页的排名。搜索引擎可以识别html的内容，而我们每个页面的内容都放在html中，所以多页的应用，seo的排名效果好。 多页应用没有缺点吗？ 有！多页应用的每次跳转都需要发出一个html请求，如果网络比较慢，在页面之间来回的切换时，就会发生明显的卡顿。就是切换慢。 单页面应用 第一次进入页面的时候会请求一个html文件，刷新点击一下会切换到其他组件，此时路径也相应的变化，但是并没有新的html文件的请求，页面内容发生变化。原理是： 　　　　js会感知到url的变化，通过这一点，可以用js动态的将当前的页面内容清除掉，然后将下一个页面的内容挂载到当前的页面上。这个时候路由不是后端来做了，而是前端来做，判断页面到底是显示那个组件，清楚不需要的，显示需要的组件

一、多页应用 1. 每一次页面跳转的时候，后台服务器都会给返回一个新的html文档，这种类型的网站也就是多页网站，也叫做多页应用 2.优点：首屏时间快，SEO效果好 缺点：页面切换慢（ 因为每次跳转都需要发出一个http请求，如果网络比较慢，在页面之间来回跳转时，就会发现明显的卡顿。） 3. 为什么多页应用的首屏时间快？ 首屏时间叫做页面首个屏幕的内容展现的时间，当我们访问页面的时候，服务器返回一个html，页面就会展示出来，这个过程只经历了一个HTTP请求，所以页面展示的速度非常快。 4. 为什么搜索引擎优化效果好（SEO）？ 搜索引擎在做网页排名的时候，要根据网页内容才能给网页权重，来进行网页的排名。搜索引擎是可以识别html内容的，而我们每个页面所有的内容都放在Html中，所以这种多页应用，seo排名效果好 二、 单页应用 1. 第一次进入页面的时候会请求一个html文件，刷新清除一下。切换到其他组件，此时路径也相应变化，但是并没有新的html文件请求，页面内容也变化了。 2.原理是：JS会感知到url的变化，通过这一点，可以用js动态的将当前页面的内容清除掉，然后将下一个页面的内容挂载到当前页面上，这个时候的路由不是后端来做了，而是前端来做，判断页面到底是显示哪个组件，清除不需要的，显示需要的组件。这种过程就是单页应用，每次跳转的时候不需要再请求html文件了。 3.优点

多页面应用 一个项目是由多个完整的html页面组成， 每一次页面跳转的时候，后台服务器都会给返回一个新的HTML文档，页面跳转所有的资源都要重新加载，页面之间的切换会出现卡顿空白的问题，不容易实现切换动画等。这种类型的网站也就是多页网站，也叫做多页应用。 为什么多页应用的首屏时间快？ 首屏时间叫做页面首个屏幕的内容展现的时间，当我们访问页面的时候，服务器返回一个html，页面就会展示出来，这个过程只经历了一个HTTP请求，所以页面展示的速度非常快。 为什么搜索引擎优化效果好（SEO）？ 搜索引擎在做网页排名的时候，要根据网页内容才能给网页权重，来进行网页的排名。搜索引擎是可以识别html内容的，而我们每个页面所有的内容都放在 Html 中，所以这种多页应用，seo排名效果好。 但是它也有缺点，就是切换慢 因为每次跳转都需要发出一个http请求，如果网络比较慢，在页面之间来回跳转时，就会发现明显的卡顿。 单页面应用 一个项目中只有一个完整的html页面，其他的都是部分的html片段组成。页面跳转只是局部刷新，不会重新加载全部资源。片段之间的切换快，比较容易实现转场动画。 第一次进入页面的时候会请求一个HTML文件，刷新清除一下。切换到其他组件，此时路径也相应变化，但是并没有新的HTML文件请求，页面内容也变化了。 原理是：JS会感知到url的变化，通过这一点

名词介绍： 　　单页面应用（SinglePage Web Application，SPA） 　　多页面应用（MultiPage Application，MPA） 对比分析：　　 组成 一个外壳页面和多个页面片段组成 多个完整页面构成 资源共用(css,js) 共用，只需在外壳部分加载 不共用，每个页面都需要加载 刷新方式 页面局部刷新或更改 整页刷新 url 模式 a.com/#/pageone a.com/#/pagetwo a.com/pageone.html a.com/pagetwo.html 用户体验 页面片段间的切换快，用户体验良好 页面切换加载缓慢，流畅度不够，用户体验比较差 转场动画 容易实现 无法实现 数据传递 容易 依赖 url传参、或者cookie 、localStorage等 搜索引擎优化(SEO) 需要单独方案、实现较为困难、不利于SEO检索 可利用服务器端渲染(SSR)优化 实现方法简易 试用范围 高要求的体验度、追求界面流畅的应用 适用于追求高度支持搜索引擎的应用 开发成本 较高，常需借助专业的框架 较低 ，但页面重复代码多 维护成本 相对容易 相对复杂 来源： https://www.cnblogs.com/zhouqiaoyun/p/9198502.html