单页应用和多页应用

单页应用

浏览器请求服务端，服务端返回固定静态资源+基础的 HTML 内容+前端路由库。

由于是前端进行渲染，因此在一般情况下，服务端返回的 HTML 内容基本上<body>为空。前端在页面进行加载的时候，需要继续向服务端发起 Ajax 请求，获取页面渲染需要的数据。

服务端根据请求内容，给前端返回相应的数据。

前端拿到数据后，根据当前的 URL 信息来生成相应的内容，进行页面的二次渲染，此时页面才最终加载完成。

客户端发起请求，服务端把页面（响应的是字符串）HTML返回给客户端，客户端从上到下依次解析，如果在解析的过程中（对数据进行计算和拼接），发现ajax请求，再次像服务器发送新的请求，客户端拿到ajax 响应结果，模板引擎渲染

• 最少两次请求

优点：

• 页面之间切换快；减少了服务器压力；
• 用户体验好，当内容改变的时候不需要整体加载，只是部分加载
• 减轻服务端压力，服务端不需要处理页面模板的逻辑与拼接

缺点：

• 不利于 SEO 搜索引擎优。
  • 不利于 SEO，由于是采用前端渲染的方式，搜索引擎不会去解析 Js
• 首次加载速度慢，SPA单页应用通常首次加载页面时就会将相应的 HTML、JavaScript、CSS文件全部加载，通常可以通过采取缓存措施以及懒加载即按需加载组件的方式来优化
• 单页应用则需要自行进行计算和组装，中间过程很可能还涉及数据的二次请求，因此会比多页应用慢

多页应用

• 多页应用会导致页面整体刷新加载，需要重新加载资源，而单页应用是部分刷新

首屏时间

• 多页应用首屏时间快
• 单页应用首屏慢，首屏时需要请求一次html，同时还要发送一次js请求 【单页应用则需要自行进行计算和组装HTML，中间过程很可能还涉及数据的二次请求】，两次请求回来了，首屏才会展示出来
  • 请求html => 解析html => 请求css和js => 渲染 => 解析和执行js => 请求数据 => 渲染 => 下载图片 => 渲染 => 页面显示可交互

渲染方式

• 多页应用是由服务端进行 HTML 模板拼接的，各个页面间没有直接关系；
• 单页应用便是将页面内容的控制权交给前端来处理，由前端进行渲染