详解单页面开发原理

参考网址
https://www.cnblogs.com/belongs-to-qinghua/p/11151054.html
http://www.zhiliaotang.net/jishujiaoliu/web/965.html

单页面开发：
单页面开发常用于webapp开发和后台管理系统等
单页面应用原理：

我们通常所说的单页面应用程序通常是通过前端框架vue, react, angular进行开发，单页面程序将所有的活动局限于一个web页面中，仅在该web页面初始化时加载相应html,js和css,一旦页面加载完成，spa不会因为用户的操作而进行页面的重新加载或跳转，而是利用js动态的变换html的内容，从而实现ui与用户的交互，由于避免了页面的重新加载，spa可以提供较为流畅的用户体验

简单理解就是：
第一次进入页面时会请求一个html文件，刷新点击一下会切换到其他组件，此时路径也会相应的改变，但是并没有新的html文件的请求，原理是：
js会感知到url的变化，通过这一点，可以用js动态的将当前的页面内容清除掉，然后将下一个页面的内容挂载到当前页面上，就是所谓的路由，通过路由判断页面应该显示的组件，这种过程就是单页面应用，每次跳转不请求html文件，而是通过路由跳转来渲染组件

优点：

• 页面切换快，良好的交互体检，因为每次切换页面时，不需要重新加载整个页面，不需要做html文件的请求，这样就节约了很多http发送时延，获取数据也是通过ajax异步获取，没有页面之间的切换，就不会出现白屏现象，也不会出现假死并有闪烁现象，页面显示流畅
• 良好的前后端分离模式，后端不再负责模版渲染，输出页面工作，即同一套后端程序代码，不用修改就可以用于web界面，手机，平板等多种客户端
• 减轻服务器压力，单页面相对服务器压力小，服务器只用于输出数据就可以，不用管展示逻辑和页面合成。吞吐能力会高好几倍

缺点

• 首屏加载慢
  • 如果不对路由进行处理，在加载首页的时候，就会将所有组件全部加载，并向服务器请求数据，这就会拖慢加载速度
  • 通过查看network，发现整个网站加载时长长达十几秒，加载时间最长的就是js,css,图片

解决方案：

• vue-router懒加载

  • vue懒加载就是按需加载，只有当路由被访问时才会加载对应的组件，而不是在加载首页的时候就加载，项目越大，对首屏的速度提升就越明显
    

• CDN加速
  - 在做项目时，我们会用到很多库，采用cdn加载可以加快加载速度

• 服务器渲染， 服务器渲染还能对seo优化起到作用，有理由搜索引擎抓取更多游泳信息，如果页面纯前端渲染，搜索引擎抓取到的就只是空页面

不利于seo
seo本质就是一个服务器向另一个服务器发请求，解析请求内容，但是搜索引擎是不会去执行请求到的js的，也就是说搜索引擎的基础爬虫的原理就是抓取url，然后获取html源代码并解析，如果一个单页应用，html在服务器还没有渲染部分数据，在浏览器才渲染出数据，即搜索引擎请求的html是模型页面而不是最终数据的渲染页面，这样就很不利于内容被搜素引擎搜索到
seo效果差，因为搜索引擎只认识html的内容，不认识js的内容，而单页面应用的内容都是考js渲染生成出来的，搜索引擎不识别这部分内容，所以就不会给一个好排名，导致单页面应用做出来的网页在百度和谷歌上的排名差

解决方法：

• 服务端渲染， 服务器合成完整的html问价再输出到浏览器
• 页面预渲染
• 路由采用h5的 historty模式

不适合开发大型项目
大型项目可能会涉及大量的dom操作，复杂的动画效果，也就不适合vue,react框架开发