OmniGet 下载速度图一次看懂DownloadSpeedGraph 前端实现完整指南【免费下载链接】omnigetDownload Udemy and Hotmart courses, YouTube videos, music and books — 1,800 sites, no terminal. Free open-source desktop app for Windows, macOS and Linux, with a built-in course player, PDF/EPUB reader and music library. Powered by yt-dlp. Your files stay on your computer.项目地址: https://gitcode.com/GitHub_Trending/om/omnigetOmniGet 是一款免费开源的跨平台下载器基于 yt-dlp 引擎无需终端即可从 1,800 网站下载课程、视频和音乐。它的下载页面里有一个小巧的速度图DownloadSpeedGraph能实时画出下载速度的起伏曲线配合下载统计让你直观掌握网络表现。本文用通俗语言拆解它的前端实现原理新手也能轻松看懂。 速度图与下载统计在哪里出现在 OmniGet 的下载页面src/routes/downloads/page.svelte中每个正在下载的任务行里速度数字旁边都会跟着一条迷你曲线图5.2 MB/s · ETA 03:12 ~~只要速度大于 0页面就会渲染这个组件见 downloads/page.svelte{#if item.speed 0} DownloadSpeedGraph points{getSpeedHistory(item.id)} / {/if}课程下载、通用下载、P2P 分发seeding三种状态都会展示同一组件downloads/page.svelte。而累计的下载统计总次数 总字节数则显示在首页——已完成 N 个下载共 X GB那一行page.svelte。 数据从哪来速度点是怎么记录的速度图不是凭空画出来的它依赖一份速度历史。每次下载进度上报时前端都会记录一个速度点SpeedPoint结构非常简单只有两个字段download-store.svelte.tsexport type SpeedPoint { t: number; bps: number }; // 时间戳 比特率记录规则很克制每个任务独立一份历史存在内存Map里speedHistory互不干扰最多只保留60 个点SPEED_HISTORY_MAX 60超出自动丢弃最旧的防止内存膨胀只有任务处于downloading或seeding状态时才记录download-store.svelte.ts任务完成、出错或被删除时历史会被立即清空不残留脏数据。 绘制五步曲DownloadSpeedGraph 内部原理组件本体在 DownloadSpeedGraph.svelte核心逻辑可以拆成五步1. 截取最近 60 秒的窗口组件默认windowMs 60_000一分钟先过滤出落在最近一分钟内、且以最后一点为基准的所有速度点DownloadSpeedGraph.svelte。2. EMA 指数平滑抹掉毛刺原始网速会频繁跳变直接画会像心电图。于是用一个滑动系数α 0.35做指数移动平均EMA新值占 35%历史均值占 65%DownloadSpeedGraph.svelte。曲线立刻变得顺滑同时又保留了真实波动。3. 坐标映射百分比坐标系整个 SVG 采用viewBox0 0 100 100的百分比坐标系映射公式很直观X 轴(t - startT) / windowMs × 100—— 时间占比Y 轴100 - bps / maxBps × 100—— 速度占比SVG 的 Y 向下所以要减。其中纵轴上限maxBps取窗口内最大速度的115%再向上取整给峰值留白避免曲线顶到边DownloadSpeedGraph.svelte。4. 生成 SVG 路径折线 渐变面积用M/L命令把点连成折线dLine再首尾闭合补到基线形成封闭的dArea面积路径DownloadSpeedGraph.svelte。面积填充一段从 32% 不透明到 0% 的垂直线性渐变营造出速度能量柱的视觉效果。vector-effectnon-scaling-stroke保证线条在任意尺寸下都保持 1px 清晰。5. 末端当前速度圆点与空闲判断曲线末端有一个小圆点标记当前速度当最新速度低于 1 KB/s 时圆点会变为琥珀色提示下载已空闲DownloadSpeedGraph.svelte。鼠标悬停还能看到Now / Peak提示兼顾了视觉与可访问性图上标注aria-hidden。 下载统计轻量持久化的累计账本除实时速度外OmniGet 还维护一份累计下载统计完成次数 总字节数。实现非常轻——只用浏览器localStorage一个键omniget_download_statsdownload-stats.svelte.ts每次下载完成事件到达时调用recordDownloadComplete(bytes)累加并立即落盘download-stats.svelte.ts触发点位于下载监听器中下载完成分支携带真实文件大小download-listener.ts重启应用后通过load()恢复首页随即显示共 N 个下载 · X GBpage.svelte数字通过formatStatsLine走 i18n 翻译多语言界面文案自然融入download-stats.svelte.ts。✅ 小结三个值得借鉴的设计点设计点做法好处有界内存速度历史最多 60 点用完即清长时间下载也不占内存EMA 平滑α0.35 指数移动平均曲线顺滑但不失真零依赖 SVG纯路径 渐变无图表库体积极小16:9 布局中不占地方整套机制只用了几百行 Svelte 代码就完成了实时速度曲线 累计统计两大功能是学习前端性能可视化实现的一个很好的小样本。相关源码都放在 src/components/download/ 与 src/lib/stores/ 目录下欢迎对照阅读。【免费下载链接】omnigetDownload Udemy and Hotmart courses, YouTube videos, music and books — 1,800 sites, no terminal. Free open-source desktop app for Windows, macOS and Linux, with a built-in course player, PDF/EPUB reader and music library. Powered by yt-dlp. Your files stay on your computer.项目地址: https://gitcode.com/GitHub_Trending/om/omniget创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 OmniGet 下载速度图一次看懂：DownloadSpeedGraph 前端实现完整指南
OmniGet 下载速度图一次看懂DownloadSpeedGraph 前端实现完整指南【免费下载链接】omnigetDownload Udemy and Hotmart courses, YouTube videos, music and books — 1,800 sites, no terminal. Free open-source desktop app for Windows, macOS and Linux, with a built-in course player, PDF/EPUB reader and music library. Powered by yt-dlp. Your files stay on your computer.项目地址: https://gitcode.com/GitHub_Trending/om/omnigetOmniGet 是一款免费开源的跨平台下载器基于 yt-dlp 引擎无需终端即可从 1,800 网站下载课程、视频和音乐。它的下载页面里有一个小巧的速度图DownloadSpeedGraph能实时画出下载速度的起伏曲线配合下载统计让你直观掌握网络表现。本文用通俗语言拆解它的前端实现原理新手也能轻松看懂。 速度图与下载统计在哪里出现在 OmniGet 的下载页面src/routes/downloads/page.svelte中每个正在下载的任务行里速度数字旁边都会跟着一条迷你曲线图5.2 MB/s · ETA 03:12 ~~只要速度大于 0页面就会渲染这个组件见 downloads/page.svelte{#if item.speed 0} DownloadSpeedGraph points{getSpeedHistory(item.id)} / {/if}课程下载、通用下载、P2P 分发seeding三种状态都会展示同一组件downloads/page.svelte。而累计的下载统计总次数 总字节数则显示在首页——已完成 N 个下载共 X GB那一行page.svelte。 数据从哪来速度点是怎么记录的速度图不是凭空画出来的它依赖一份速度历史。每次下载进度上报时前端都会记录一个速度点SpeedPoint结构非常简单只有两个字段download-store.svelte.tsexport type SpeedPoint { t: number; bps: number }; // 时间戳 比特率记录规则很克制每个任务独立一份历史存在内存Map里speedHistory互不干扰最多只保留60 个点SPEED_HISTORY_MAX 60超出自动丢弃最旧的防止内存膨胀只有任务处于downloading或seeding状态时才记录download-store.svelte.ts任务完成、出错或被删除时历史会被立即清空不残留脏数据。 绘制五步曲DownloadSpeedGraph 内部原理组件本体在 DownloadSpeedGraph.svelte核心逻辑可以拆成五步1. 截取最近 60 秒的窗口组件默认windowMs 60_000一分钟先过滤出落在最近一分钟内、且以最后一点为基准的所有速度点DownloadSpeedGraph.svelte。2. EMA 指数平滑抹掉毛刺原始网速会频繁跳变直接画会像心电图。于是用一个滑动系数α 0.35做指数移动平均EMA新值占 35%历史均值占 65%DownloadSpeedGraph.svelte。曲线立刻变得顺滑同时又保留了真实波动。3. 坐标映射百分比坐标系整个 SVG 采用viewBox0 0 100 100的百分比坐标系映射公式很直观X 轴(t - startT) / windowMs × 100—— 时间占比Y 轴100 - bps / maxBps × 100—— 速度占比SVG 的 Y 向下所以要减。其中纵轴上限maxBps取窗口内最大速度的115%再向上取整给峰值留白避免曲线顶到边DownloadSpeedGraph.svelte。4. 生成 SVG 路径折线 渐变面积用M/L命令把点连成折线dLine再首尾闭合补到基线形成封闭的dArea面积路径DownloadSpeedGraph.svelte。面积填充一段从 32% 不透明到 0% 的垂直线性渐变营造出速度能量柱的视觉效果。vector-effectnon-scaling-stroke保证线条在任意尺寸下都保持 1px 清晰。5. 末端当前速度圆点与空闲判断曲线末端有一个小圆点标记当前速度当最新速度低于 1 KB/s 时圆点会变为琥珀色提示下载已空闲DownloadSpeedGraph.svelte。鼠标悬停还能看到Now / Peak提示兼顾了视觉与可访问性图上标注aria-hidden。 下载统计轻量持久化的累计账本除实时速度外OmniGet 还维护一份累计下载统计完成次数 总字节数。实现非常轻——只用浏览器localStorage一个键omniget_download_statsdownload-stats.svelte.ts每次下载完成事件到达时调用recordDownloadComplete(bytes)累加并立即落盘download-stats.svelte.ts触发点位于下载监听器中下载完成分支携带真实文件大小download-listener.ts重启应用后通过load()恢复首页随即显示共 N 个下载 · X GBpage.svelte数字通过formatStatsLine走 i18n 翻译多语言界面文案自然融入download-stats.svelte.ts。✅ 小结三个值得借鉴的设计点设计点做法好处有界内存速度历史最多 60 点用完即清长时间下载也不占内存EMA 平滑α0.35 指数移动平均曲线顺滑但不失真零依赖 SVG纯路径 渐变无图表库体积极小16:9 布局中不占地方整套机制只用了几百行 Svelte 代码就完成了实时速度曲线 累计统计两大功能是学习前端性能可视化实现的一个很好的小样本。相关源码都放在 src/components/download/ 与 src/lib/stores/ 目录下欢迎对照阅读。【免费下载链接】omnigetDownload Udemy and Hotmart courses, YouTube videos, music and books — 1,800 sites, no terminal. Free open-source desktop app for Windows, macOS and Linux, with a built-in course player, PDF/EPUB reader and music library. Powered by yt-dlp. Your files stay on your computer.项目地址: https://gitcode.com/GitHub_Trending/om/omniget创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考