本文已参与掘金创作者训练营第三期「话题写作」赛道，详情查看：掘力计划｜创作者训练营第三期正在进行，「写」出个人影响力。
MPA – Multiple pages application
多页面应用程序具有更经典的架构。每个页面都会向服务器发送请求并完全更新所有数据。即使这些数据很小，也会影响速度和性能。
例如在node中，我们请求首页的话,本质就是请求一段html代码，如果想要跳转到about,则需要加载about.html.
var http = require('http');
http.createServer(function (req, res) {
if (req.url == "/") {
res.writeHead(200, { 'Content-Type': 'text/html' });
res.end(fs.readFileSync( '/index.html'));
}
if (req.url == "/about") {
res.writeHead(200, { 'Content-Type': 'text/html' });
res.end(fs.readFileSync( '/abour.html'));
}
}).listen(8080, function () {
console.log("http://localhost:8080");
});
复制代码优点：
易于进行适当的 SEO 管理。它提供了更好的机会对不同的关键字进行排名，因为应用程序可以针对每页一个关键字进行优化。
易于开发。通常，开发多页面应用程序需要较少的技术栈。
缺点：
应用程序开发需要更长的时间。在大多数情况下，需要从头开始编写后端代码。
前后端难分离。通常，它们之间的相互作用非常密切。前端和后端开发人员的工作越来越复杂。
MPA 的主要优势是良好的 SEO 优化和许多框架解决方案。
MPA 是一个紧密耦合的前端和后端单元，意味着代码并没有很好的解耦，所以无法重用重复的代码
SPA- Single Page Application
单页应用程序是在浏览器中运行的应用程序，在使用过程中不需要重新加载页面。
它们比传统的 Web 应用程序更快，因为它们在 Web 浏览器本身而不是在服务器上执行逻辑。在初始页面加载后，只有数据来回发送，而不是整个 HTML，这会降低带宽。它们独立请求标记和数据，并直接在浏览器中呈现页面。
例如在vue中。
我们会有一个index.html来作为页面加载的模板
首先是一个静态模板文件 index.html
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
/>
<head>
<title>Document</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
复制代码然后可能会在main.js中,将id=app的节点作为元素的根节点，最后所有的元素都挂在在这上面。
import Vue from 'vue'
new Vue({
el: '#app',
router,
store,
render: h => h(App),
})
复制代码同时我们会有一个APP.文件，里面会有一个 标签，显示显示所需要的页面。例如about页面，他只是把about.vue的内容加载到标签上，最后挂载到index.html文件中
<template>
<router-view />
</template>
<script>
</script>
复制代码单页面应用的路由跳转，虽然浏览器的url地址发生变化，但是其实并没有发送请求，也没有刷新整个页面，根据我们配置的路由信息，每次点击切换路由，会切换到不同的组件显示，类似于选项卡功能的实现,但是同时url地址栏会变化
优点：
速度和响应能力——单页 Web 应用程序速度快；使用它们，服务器不必在每次交互时重新加载大多数资源，例如 HTML + CSS + 脚本 – 只需要初始加载。之后只从服务器下载新数据。此外，SPA 仅重新加载特定的内容片段，因此它们的服务器负载更轻。
分离数据的能力， UI-SPA 能够区分数据和用户界面。这可以极大地帮助简化单页应用程序开发过程中的测试。同时也不会对接口产生影响。
缺点：
首屏加载慢，因为在加载首页的时候会请求所有需要的JA CSS 文件，并且加载所有的组件，可以通过network来查看加载的速度。
对于vue，我们可以使用vue-router自带的懒加载功能来加载组件。或者也可以使用nuxt来做服务端渲染。
不利于seo，spa是渲染的部分数据，其他的不会被搜索引擎抓取到。
![[桜井宁宁]COS和泉纱雾超可爱写真福利集-一一网](https://www.proyy.com/skycj/data/images/2020-12-13/4d3cf227a85d7e79f5d6b4efb6bde3e8.jpg)
![[桜井宁宁] 爆乳奶牛少女cos写真-一一网](https://www.proyy.com/skycj/data/images/2020-12-13/d40483e126fcf567894e89c65eaca655.jpg)
