开发静态网站的简单实时重新加载

主要观点:在开发网站时使用简单的客户端脚本实现自动刷新页面,不依赖特定后端,可在新机器克隆仓库并使用预安装程序运行,代码 39 行且可放入 HTML 中,简述其工作原理为通过PerformanceObserver监控加载的 URL,用HEAD请求轮询获取资源元数据,根据Last-ModifiedETag判断是否刷新页面,受livejs启发但进行了改进,计划制作更精细版本,仓库为Kalabasa/simple-live-reload
关键信息:

  • 脚本可自动刷新页面,不依赖特定后端。
  • 代码 39 行,可放入 HTML 中。
  • PerformanceObserver用于监控 URL 变化。
  • HEAD请求用于获取资源元数据。
  • 根据Last-ModifiedETag判断是否刷新。
    重要细节:
  • 可在新机器克隆仓库并使用预安装程序(文本编辑器、浏览器、Python HTTP 服务器等)运行。
  • 视频演示地址为https://leanrada.com/notes/simple-live-reload/demo.mp4
  • 阅读README可获取更多细节。
  • livejs启发,但其未更新且存在问题,计划制作更精细版本,能热重载 WebComponents 等。
阅读 54
0 条评论