做了什么
- 用 jessibuca 在浏览器里直接播放专网摄像头的视频流，绕开浏览器对私有协议的限制
- ECharts 驾驶舱配合 dataZoom 分段加载，数据量大时不再一次性渲染全部点位
- 用骨架屏承接首屏加载，避免白屏和布局跳动
背景
监管类平台的典型形态：一屏驾驶舱汇总关键指标，旁边挂实时视频监控画面。数据量和视频路数都不小，直接堆上去首屏会很难看。
做了什么
专网视频接入
摄像头的视频流走的是专网和私有协议，浏览器的原生 <video> 播不了。用 jessibuca 这个基于 WebAssembly 的播放器在浏览器里解码播放，前端侧不用装插件。部署上配合 Nginx 做转发和跨域处理。
这块的坑主要在兼容性和稳定性：不同厂商的设备推流格式有差异，播放器实例没及时销毁还会漏内存，切页频繁时尤其明显。
驾驶舱的渲染性能
驾驶舱上的图表数据点很多，一次性全渲染会明显卡顿。用 ECharts 的 dataZoom 做分段加载 —— 只渲染当前可视区间内的数据，拖动时再按需取。大屏上同时挂多个图表时，这个优化是必须的。
骨架屏
首屏数据来自多个接口，加载期间用骨架屏占位，而不是白屏或者 loading 转圈。骨架屏的形状和真实内容对齐，数据回来时不会出现布局跳动。
想法
监管类项目的性能问题往往不在前端代码本身，而在数据边界没划清 —— 后端一次返回几万条，前端再怎么优化也是徒劳。比较有效的做法是前后端一起定分页和聚合的口径，把压力前移。