用requestAnimationFrame实现全屏星空背景需每帧高效绘制数千颗星并保持60fps：一、适配设备像素比设置canvas物理尺寸；二、用数组存归一化坐标星星数据避免GC；三、每帧仅清屏、更新位置、重绘；四、加鼠标视差、分层、限数量光晕提升沉浸感。
用 requestAnimationFrame 实现全屏星空背景，核心是**每帧高效绘制数千颗动态星星，同时保持 60fps 流畅、不卡顿、不掉帧**。关键不在“画得多”，而在“画得巧”——控制数量、复用 canvas、避免重排重绘、合理更新逻辑。
一、初始化全屏 canvas 并适配设备像素比
直接铺满视口的 canvas 若忽略高清屏（如 Retina），会模糊且性能浪费。需手动设置 canvas 的 width/height 属性为物理像素尺寸，并用 CSS 缩放到视口大小：
- 获取
window.devicePixelRatio，乘以innerWidth/innerHeight得到真实绘制尺寸 - 将 canvas 的
style.width和style.height设为100vw/100vh - 设置 canvas 上下文的
fillStyle为深蓝或纯黑，作为星空底色
二、生成轻量级星星数据，避免对象频繁创建
每帧新建几百个星星对象会触发 GC，拖慢动画。推荐用数组 + 结构化数据（非 class 实例）预存星星：
- 定义一个
stars = []，每个元素是长度为 4 的数组：[x, y, size, speed] - x/y 在 0–1 范围内（归一化坐标），渲染时再乘以 canvas 宽高，方便缩放和响应式
- size 控制半径（0.2–1.5 像素），speed 控制垂直下落速度（0.1–0.8 px/frame），加点随机性提升真实感
- 初始生成 800–1500 颗（太多易掉帧；可按设备内存/性能动态调整）
三、用 requestAnimationFrame 驱动循环，精简每帧操作
动画主循环只做三件事：清空上一帧（仅清星空区域）、更新星星位置、重绘所有星星。避免任何 DOM 查询、样式计算或复杂运算：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 清屏不用
clearRect全刷（可能残留残影），改用ctx.fillStyle = '#000'; ctx.fillRect(0, 0, width, height)更快 - 更新位置时，对每个星星：y += speed；若 y > 1，则重置 y = 0，x = Math.random()（模拟新星进入）
- 绘制用
ctx.beginPath(); ctx.arc(...); ctx.fill()，禁用阴影、描边等开销大特性 - 添加轻微透明度叠加（如 fillStyle = 'rgba(255,255,255,0.8)'）可营造星光闪烁感，但 alpha 不宜过低（否则需更多帧混合）
四、增强沉浸感的小技巧（不牺牲性能）
真正“沉浸”来自细节反馈，而非堆粒子数：
-
鼠标跟随微位移：监听
mousemove，记录偏移量（限幅 ±5px），每帧星星 x/y 加上该偏移的 5%（视差效果），不重绘 canvas，只改坐标 - 分层星星：用两组星星数组，前层速度快、尺寸大；后层速度慢、尺寸小、透明度略低，制造景深
-
渐变光晕（可选）：对少数亮星（比如 top 5%），用
createRadialGradient绘制柔和光晕，但数量严格限制（≤20 颗），避免 GPU 压力突增
不复杂但容易忽略：记得在页面卸载或切换标签页时调用 cancelAnimationFrame 清理，防止后台耗电。完成后的星空背景体积小、兼容性好（IE10+）、CPU 占用低，适合首页、登录页或产品展示页作为视觉锚点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
