有人私信问我为什么我的博客视频加载速度很快，这是因为前几天我在翻译Sora的技术报告 http://t.cn/A6Yi0X13 的时候，发现一个网页得有 100 多个视频，打开网页就很卡，因为 video 标签没有lazy load功能。要么preload设置为none，默认不下载视频，但是就什么也不显示了，看不出来啥视频。如果preload设置为auto，那么就意味着加载网页的时候，会去请求所有网页中的视频，这会导致网页很卡顿，并且很费流量。

我的博客是基于 http://t.cn/A6lQsJWg 搭建的，博客内容支持Markdown和HTML还有React，所以我做了一点优化，默认设置所有视频的preload为none，然后增加了网页可见区域的检测，如果当前可见区域有视频，就将相应的视频的preload属性设置为auto，这样就只会加载可见区域内的视频，其他视频只有滚动到相应位置的时候才开始加载，网页不会卡顿，加载速度也会更快更省流量。

代码见截图，前端同学应该不陌生。