别再说你会SPA开发了，这5个核心你真的搞懂了吗?
ztj100 2025-07-15 02:18 2 浏览 0 评论
前言
此spa非彼spa,不是你所熟知的spa。你所熟知的spa作者肯定是没有你熟悉的。
我们这里指的是在前端开发中的一种模型，叫作单页应用程序，顾名思义，就是整个项目只有一个页面，而页面中的内容是动态的，以组件的形式展示，靠路由来映射组件。
spa的优点
组件化开发，易于维护 由于组件是独立的，当需要修改某个特定功能时，只需专注于对应的组件，而不必担心对整个应用程序造成影响。这大大简化了调试和维护的工作量。
一旦创建了一个组件，它就可以在应用的不同部分重复使用。例如，一个导航栏组件可以在网站的每个页面中使用，只需要编写一次代码。
页面切换快，体验好 在传统的多页应用中，每次页面跳转都会触发向服务器请求新页面的HTML文档，这通常包括重新加载CSS、JavaScript等资源文件，导致较长的等待时间。而在SPA中，初始加载时就会下载大部分必要的资源，后续的页面切换仅涉及数据的获取和局部DOM更新，无需重新加载整个页面。
前后端分离，提升开发效率 在前后端分离的架构中，前端团队专注于用户界面和用户体验的设计，而后端团队则负责业务逻辑和数据处理。这种分工允许两个团队同时工作，减少了相互等待的时间，每个团队只需关注自己的部分，降低了整体项目的复杂度，有助于提高代码质量和可维护性。
减轻服务器压力，提高性能
减少服务器请求次数:
- MPA的问题：
每次用户导航到新页面（如点击链接、提交表单），浏览器会向服务器发起完整的新请求，服务器需返回包含HTML、CSS、JavaScript等资源的完整页面。若用户频繁切换页面，服务器需处理大量重复请求，导致负载升高。 - SPA的优势：
- 应用仅首次加载时请求必要资源（HTML、CSS、JS）。
- 后续交互通过客户端路由（如React Router、Vue Router）在内存中切换视图，无需向服务器请求新页面。
- 数据更新通过轻量级API调用（如RESTful API或GraphQL）完成，仅传输JSON等精简数据，而非完整页面。
- 结果：服务器仅需处理少量初始请求和API调用，显著降低负载。
利用浏览器缓存优化资源传输
- MPA的局限：
每个页面依赖独立的资源（如/page1.html、/page2.js），即使部分资源（如全局CSS）未更改，浏览器也可能因URL不同而无法复用缓存，导致重复下载。 - SPA的优化：
- 所有资源通过单一入口（如index.html）加载，浏览器可高效缓存JS、CSS等静态资源。
- 服务端渲染（SSR）或静态生成（SSG）技术还能缓存渲染后的HTML，进一步加速后续访问。
- 结果：重复访问时，浏览器直接从本地加载资源，减少服务器带宽消耗。
spa的缺点
初次加载慢（Initial Load Time）：
原因分析：
- 资源体积庞大：SPA 需在首次加载时一次性下载核心 JavaScript、CSS、第三方库等资源（如 React、Vue、Axios），即使后续页面仅需少量功能，用户仍需等待完整依赖的加载。
- 渲染阻塞：传统 SPA 采用单文件入口（如 index.js），浏览器需解析、编译、执行大量代码后才能显示首屏内容，延迟明显。
- 网络依赖性强：若用户网络环境差（如移动网络或高延迟地区），大文件下载和解析时间会被放大。
影响：
- 用户体验差：用户需长时间等待首屏渲染，可能导致流失（如电商网站跳出率升高）。
- 性能评分低：Lighthouse 等工具会因首屏加载时间过长给出低分（如 FCP、LCP 指标）。
不利于搜索引擎优化（SEO） 下面是一份使用vue开发的网页
原因分析：
- 内容动态渲染：SPA 的内容通常通过 JavaScript 在客户端渲染（CSR），搜索引擎爬虫（如 Googlebot）可能无法执行 JS，导致仅抓取到空 HTML 或初始占位符（如 div id="app"></div>）。
- 元数据缺失：动态生成的标题（<title>）、描述（<meta name="description">）、OpenGraph 标签等可能未被爬虫正确识别。
- 延迟索引：即使搜索引擎支持 JS 渲染（如 Google 的 Crawl via HTTP/2），内容仍需额外时间处理，导致 SEO 效果滞后。
影响：
- 排名下降：内容无法被有效索引，长尾关键词流量减少。
- 信任度降低：缺失元数据（如标题、描述）可能导致搜索结果中链接点击率（CTR）下降。
金牌优化师ssr
想解决这两个问题，首先就是要加载完整的html以便搜索SEO搜索引擎可以直接搜索到，第二就是就首页先进行加载，而不是等所有的组件都加载完成后才有首页，而我们的金牌优化师刚刚好能同时解决两个问题。
我们要知道在渲染浏览器页面之前，html要先将后端的的响应拿到才能开始给浏览器解析渲染，而我们的ssr是想跳过后端发送给前端响应，而是拿到前端的代码直接交给浏览器进行渲染，这样首页的内容不是js渲染的，而且不用等前端拿完所有的后端响应才开始解析然后给浏览器，而是执行到这个后端接口直接给浏览器html代码就可以渲染在页面上了
接下来我们看看后端接口怎么写，我们可以先下载node.js的一个框架
npm i express
这里我们使用字符串来当作前端给过来的代码
const express = require('express');
const app = express();
const Vue = require('vue');
const vue3Compiler = require('@vue/compiler-ssr');
const renderer = require('@vue/server-renderer')
const vueapp = {
template: `
<div>
<h1 @click='add'>Hello, SSR!</h1>
<ul>
<li v-for="item in items" :key="item">{{ item }}</li>
</ul>
</div>
`,
data() {
return {
items: ['Item 1', 'Item 2', 'Item 3']
}
},
methods: {
add() {
this.items.push(`Item ${this.items.length + 1}`);
}
}
}
// 读取vue文件，编译成js代码
vueapp.ssrRender = new Function('require', vue3Compiler.compile(vueapp.template).code)(require);
// console.log(vueapp.ssrRender());
app.get('/', async (req, res) => {
let vapp = Vue.createSSRApp(vueapp);
let html = await renderer.renderToString(vapp); // 渲染成html
const title = 'SSR Demo';
let ret = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>${title}</title>
</head>
<body>
${html}
</body>
</html>`;
res.send(ret);
})
app.listen(3000, () => {
console.log('SSR server is running on port 3000');
});流程就是:
- 1. 创建 node 服务
- 2. 读取 vue 组件
- 3. 借助 vue 自带编译器函数编译 vue 组件 得到 AST
- 4. 借助 vue 自带渲染器函数渲染 AST 得到 html
- 5. 拼接 html 模板
- 6. 发送响应
相关推荐
- Win10预览版10532已知问题汇总（微软win11正式版已知问题一览）
-
IT之家讯微软已向Insider用户推送了Win10预览版10532更新，本次更新对右键菜单、《Windows反馈》应用以及Edge浏览器进行了改进。除此之外还包含一些Bug，汇总如下，有意升级Wi...
- Gabe Aul正测试Win10 Mobile 10532，Insider用户还需等
-
IT之家讯本月中旬微软向Insider用户推送了Win10Mobile预览版10512，该版本修复了一些Bug，增强了系统稳定性，但依然存在一些问题。今天，微软Insider项目负责人GabeAu...
- 微软开始推送Win10预览版10532快速版更新
-
8月28日消息，刚才，微软推送了Win10Build10532快速版，修复了之前的Bug，并带来了三项改进。主要来说，这次的更新改进了右键菜单的UI，使其更具Modern风格（见上图）。此外，更新...
- Win10预览版10532更新内容大全（windows10更新预览版）
-
IT之家讯今天凌晨微软向Insider用户推送了Win10预览版10532快速版更新，本次更新主要带来了三处改进，汇总如下：o改进右键菜单，外观更加Modern。这是基于网友要求界面一致的反馈做出...
- 无法升级Win10预览版10532?也许Hyper-V在搞鬼
-
根据IT之家网友的反映，安装了微软虚拟机Hyper-V的Win10预览版用户无法成功升级Build10532版本，安装过程中会被要求回滚系统。很多朋友在尝试关闭虚拟机之后重启安装程序，结果仍然无法顺...
- Win10预览版10532界面兴起“酷黑”风潮
-
Win10预览版10532的界面改动还是较为明显的，主要体现在右键菜单上面。总体来看，该版本的右键菜单间距更宽，视觉上更大气，操作上更便于触控。具体来说，任务栏右键菜单的变化最为明显。除了增加选项的宽...
- Win10预览版10532上手图集（windows10预览版下载）
-
IT之家讯8月28日，微软今天推送了Win10预览版10532快速版更新，在该版本中，微软主要是加强细节上调整，并且主要是增强Edge浏览器性能等。在Windows10预览版10532中，微软改进了...
- Win10预览版10532上手视频亮点演示
-
IT之家讯8月28日消息，今天凌晨微软向WindowsInsider快速通道用户推送了Win10预览版10532。在Windows10预览版10532中，微软改进了右键菜单，外观更加现代化。另外还...
- 第二篇 前端框架Vue.js（vue前端框架技术）
-
前端三大核心是网页开发的基础，Vue则是基于它们构建的“生产力工具”。通俗理解就是HTML是化妆的工具如眉笔，CSS是化妆品如口红，JavaScript是化妆后的互动，而Vue就是化妆助手。有了化妆工...
- 基于SpringBoot + vue2实现的旅游推荐管理系统
-
项目描述...
- 基于Vue以及iView组件的后端管理UI模板——iview-admin
-
介绍iView-admin是一套后端管理界面模板，基于Vue2.0，iView（现在为ViewUI）组件是一套完整的基于Vue的高质量组件库，虽然Github上有一套非常火的基于ElementUI...
- 别再说你会SPA开发了，这5个核心你真的搞懂了吗?
-
前言此spa非彼spa,不是你所熟知的spa。你所熟知的spa作者肯定是没有你熟悉的。我们这里指的是在前端开发中的一种模型，叫作单页应用程序，顾名思义，就是整个项目只有一个页面，而页面中的内容是动态的...
- React.js Top20面试题（react.js中文官网）
-
概述作为React开发者，对框架的关键概念和原则有扎实的理解是很重要的。考虑到这一点，我整理了一份包含20个重要问题的清单，每个React开发者都应该知道，无论他们是在面试工作还是只是想提高技能。...
- 美媒:特朗普签署行政令后，FBI又发现约2400份、总计超14000页涉肯尼迪遇刺案文件
-
来源：环球时报新媒体1月23日特朗普下令公布肯尼迪遇刺案相关机密文件图源：美媒综合福克斯新闻网和Axios网站10日报道，在总统特朗普签署行政令，要求公布“肯尼迪遇刺案”相关政府机密文件之后，美国...
- 2021 年 Node.js 开发人员学习路线图
-
Node.js自发布以来，已成为业界重要破局者之一。Uber、Medium、PayPal和沃尔玛等大型企业，纷纷将技术栈转向Node.js。Node.js支持开发功能强大的应用，例如实时追踪...
欢迎 你 发表评论:
- 一周热门
- 最近发表
-
- Win10预览版10532已知问题汇总（微软win11正式版已知问题一览）
- Gabe Aul正测试Win10 Mobile 10532，Insider用户还需等
- 微软开始推送Win10预览版10532快速版更新
- Win10预览版10532更新内容大全（windows10更新预览版）
- 无法升级Win10预览版10532?也许Hyper-V在搞鬼
- Win10预览版10532界面兴起“酷黑”风潮
- Win10预览版10532上手图集（windows10预览版下载）
- Win10预览版10532上手视频亮点演示
- 第二篇 前端框架Vue.js（vue前端框架技术）
- 基于SpringBoot + vue2实现的旅游推荐管理系统
- 标签列表
-
- idea eval reset (50)
- vue dispatch (70)
- update canceled (42)
- order by asc (53)
- spring gateway (67)
- 简单代码编程 贪吃蛇 (40)
- transforms.resize (33)
- redisson trylock (35)
- 卸载node (35)
- np.reshape (33)
- torch.arange (34)
- npm 源 (35)
- vue3 deep (35)
- win10 ssh (35)
- vue foreach (34)
- idea设置编码为utf8 (35)
- vue 数组添加元素 (34)
- std find (34)
- tablefield注解用途 (35)
- python str转json (34)
- java websocket客户端 (34)
- tensor.view (34)
- java jackson (34)
- vmware17pro最新密钥 (34)
- mysql单表最大数据量 (35)