2018-03-27

单页应用

单页应用（英语：single-page application，缩写SPA）是一种网络应用程序或网站的模型，它通过动态重写当前页面来与用户交互，而非传统的从服务器重新加载整个新页面。这种方法避免了页面之间切换打断用户体验，使应用程序更像一个桌面应用程序。在单页应用中，所有必要的代码（HTML、JavaScript和CSS）都通过单个页面的加载而检索，或者根据需要（通常是为响应用户操作）动态装载适当的资源并添加到页面。尽管可以用位置散列或HTML5历史API来提供应用程序中单独逻辑页面的感知和导航能力，但页面在过程中的任何时间点都不会重新加载，也不会将控制转移到其他页面。[2]与单页应用的交互通常涉及到与网页服务器后端的动态通信。
– wikipedia

就是基于ajax技术交互的动态页面呗。

诸如AngularJS、Ember.js、Meteor.js、ExtJS和React等面向网页浏览器的JavaScript框架采纳了单页应用（SPA）原则。

这句话怎么理解？这些框架是为了单页应用设计的？为什么这么说？

汇总

参考自掘金 https://juejin.im/post/5a0ea4ec6fb9a0450407725c

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

疑问

为什么SPA不利于SEO？
单页页面，数据在前端渲染。爬虫一般只抓取静态页面，不会调用js来动态生成新页面。

为什么SPA要首次加载大量资源？
前端渲染，肯定前端需要很多js。SPA一定要前端渲染吗，后端可以渲染好html部分元素返回前台吧？

SPA首次加载大量的静态资源，是前端渲染任务重造成的？

加载顺序

首屏渲染速度除了受js文件大小的影响，还有HTML的解析时机。为了提早加载完document，最好将没有用到的其他文件的下载往后推或者异步下载（不要让他阻塞document的加载）。这里给这些js文件添加了 defer属性。