实时检测本地访问谷歌油管延迟的网页小工具，实时显示平均延迟，最大延迟，最小延时，适用于看自己线路的真实延迟，适配移动端

本人最近线路经常有波动经常要检测本地到墙外网站的延迟，原本方法就是ping 自己小鸡的ip，小鸡ip是能通的，但有时候访问谷歌无法访问，经常断线1分钟又好了，本人也是小白，搭建了中转机最近用nodepass单端转发，可能是新项目有点bug吧就老出问题，于是就诞生了本项目，全程自然语言跟AI沟通，都是AI帮我写的代码 OK以下是项目介绍（项目介绍也是AI写的哈哈）：
开源地址：https://github.com/xx2468171796/networkping

使用方法

1下载我的html文件浏览器打开即可

2访问https://yc.alonelife.top/ 这个网址可能后面会不见哈哈因为我可能会换域名到时候会在这里更新的

2025-8-6 2.0更新分组显示，更新批量导入导出功能，更新excel模板导入功能 分组显示功能

Github有原版1.0的可以自己用旧的版本，旧版本会简单一点，我反正觉得2.0可能功能花哨了一点但是 就这样吧，有总比没有好 哈哈

🌐 实时网页连通性 & 延迟监测工具

一个专业的实时网络连通性和延迟监测工具，支持多目标监测、数据可视化和报告导出

📋 项目简介

这是一个基于Web的实时网页连通性和延迟监测工具，专门用于监测各种网站的访问延迟和连通性状态。工具采用纯前端技术实现，无需后端服务器，保护用户隐私的同时提供专业的网络监测功能。

✨ 主要功能特性

🔍 实时监测

• 多目标同时监测：内置Google、YouTube、Instagram、Twitter/X、百度、腾讯视频等主流网站
• 自定义监测目标：支持添加任意网址进行个性化监测
• 实时状态显示：直观的在线/离线状态指示，支持动态状态灯效果
• 灵活刷新间隔：支持1秒、5秒、10秒、30秒等多种刷新频率

📊 数据统计与分析

• 延迟统计：
  • 最小延迟：监测期间的最快响应时间
  • 最大延迟：监测期间的最慢响应时间
  • 平均延迟：所有成功请求的平均响应时间
• 连接统计：
  • 总检测次数：发起的总请求数量
  • 成功次数：成功响应的请求数量
  • 成功率：成功请求占总请求的百分比
• 在线/离线统计：
  • 在线时长：累计在线时间统计
  • 离线次数：网络中断次数记录
  • 离线时长：详细的离线时间统计
  • 离线详情：具体的离线事件记录

📈 数据可视化

• 实时折线图：基于Chart.js的专业延迟趋势图表
• 多色彩显示：每个监测目标使用独特颜色进行区分
• 时间轴支持：支持30秒到24小时的历史数据查看
• 响应式图表：自适应不同屏幕尺寸的图表显示

🛠️ 实用工具功能

• PNG报告导出：一键生成包含图表和统计数据的专业报告
• 数据管理：支持清除历史数据，重新开始监测
• 目标管理：灵活的监测目标启用/禁用控制
• 通知系统：实时状态变化通知提醒

🔬 技术原理

延迟测试方法

• HTTP请求测量：使用JavaScript Fetch API发送HTTP请求
• 完整网络时间：包含DNS解析、TCP连接、HTTP协议处理等完整访问时间
• 真实用户体验：相比传统ping测试，更贴近实际网页访问延迟
• 精确时间计算：使用performance.now()进行高精度时间测量

技术架构

前端技术栈：
├── HTML5 + CSS3
├── JavaScript (ES6+)
├── Tailwind CSS (样式框架)
├── Chart.js (图表库)
└── 响应式设计

数据处理

• 客户端处理：所有数据在浏览器本地处理，保护用户隐私
• 实时计算：动态计算统计数据，无需服务器支持
• 内存优化：智能的历史数据管理，避免内存溢出

🎯 适用场景

🚀 快速开始

基础使用

1. 打开工具：在浏览器中打开index.html文件
2. 选择目标：勾选要监测的网站目标
3. 设置参数：调整刷新间隔和时间范围
4. 开始监测：工具自动开始实时监测
5. 查看数据：观察实时状态表格和趋势图表

高级功能

• 添加自定义网址：点击"➕ 自定义网址"按钮
• 导出报告：点击"📊 导出PNG"生成监测报告
• 数据管理：使用"🗑️ 清除数据"重置历史记录

📱 界面展示

主要界面组件

• 控制面板：刷新间隔、时间范围、功能按钮
• 目标选择器：可视化的监测目标管理
• 状态表格：详细的实时监测数据展示
• 统计面板：全面的历史数据统计分析
• 趋势图表：专业的延迟变化可视化
• 原理说明：工具工作原理的详细解释

响应式设计

• 桌面端：完整功能展示，最佳用户体验
• 平板端：优化的布局适配，保持功能完整性
• 手机端：精简界面设计，核心功能可用

🔧 自定义配置

监测目标配置

// 内置监测目标示例
{
    name: "Google",
    testUrls: [
        "https://clients3.google.com/generate_204",
        "https://www.google.com/favicon.ico"
    ],
    color: "rgb(59, 130, 246)",
    enabled: true
}

自定义网址添加

• 网站名称：为监测目标设置易识别的名称
• 测试网址：输入要监测的完整URL地址
• 图表颜色：选择在图表中显示的专属颜色
• URL验证：自动验证网址格式的正确性

💡 项目特色

🔒 隐私保护

• 本地处理：所有数据在浏览器本地处理
• 无服务器依赖：不需要后端服务器支持
• 数据不上传：监测数据不会发送到任何服务器

🎨 用户体验

• 零配置使用：打开即用，无需复杂设置
• 直观界面：现代化的UI设计，操作简单明了
• 实时反馈：即时的状态变化和数据更新

🔧 技术优势

• 高性能：优化的算法，流畅的用户体验
• 兼容性：支持现代浏览器，跨平台使用
• 可扩展：模块化设计，易于功能扩展

📊 数据说明

延迟数据

• 测试方法：HTTP请求响应时间测量
• 数据精度：毫秒级精确测量
• 异常处理：自动过滤异常数据，确保统计准确性

统计算法

• 平均值计算：基于所有成功请求的算术平均
• 在线率计算：在线时间占总监测时间的百分比
• 离线统计：基于连续失败状态的时间累计

🛠️ 技术实现

核心功能模块

项目结构：
├── 延迟测试引擎
├── 数据统计模块  
├── 图表渲染系统
├── 状态管理器
├── UI交互控制
└── 数据导出功能

关键技术点

• 异步请求处理：Promise-based的并发请求管理
• 实时数据更新：高效的DOM更新机制
• 内存管理：智能的历史数据清理策略
• 错误处理：完善的异常捕获和恢复机制

📞 联系与支持

交流群组

如有问题或建议，欢迎加入我们的电报群：

反馈渠道

• 功能建议：欢迎提出新功能需求
• 问题报告：遇到bug请及时反馈
• 使用交流：分享使用经验和技巧

📄 许可证

本项目采用开源许可证，欢迎自由使用、修改和分发。

🎉 致谢

感谢所有使用和支持这个项目的朋友们！你们的反馈和建议是项目持续改进的动力。

项目标签：网络监测 延迟测试 实时监控 数据可视化 开源工具
技术栈：HTML5 JavaScript Chart.js Tailwind CSS 响应式设计

项目截图：