被诅咒的流式 HTML 艺术 – rinici.de

主要观点:

  • 讨论流式 HTML,不是指增量请求 HTML 来填充页面,而是像 WebSocket 或 SSE 那样流式传输实际的 HTML 响应,无需 JavaScript。
  • 介绍了用多种 Web 框架实现流式 HTML 的方法,如 Node 中的res.write()、Sinatra 中的stream、Actix 中的HttpResponse::streaming()等,以 Express 为例进行了展示。
  • 通过一个简单的网页实现实时聊天功能,无需 JavaScript,利用EventEmitter发送和接收消息,通过重定向自动聚焦文本框,还提到了避免 XSS 的问题。
  • 指出代码存在页面加载不完成的问题,目前尚未找到解决方法,提出用loading="lazy"但未生效,目前的解决方案是用一小段 JavaScript trick 让浏览器加载页面。

关键信息:

  • 各种框架实现流式 HTML 的方法。
  • 实现实时聊天功能的网页代码结构。
  • 页面加载不完成的问题及临时解决方案。

重要细节:

  • 在 Node 中用res.write(),Sinatra 中用stream,Actix 中用HttpResponse::streaming()等。
  • 网页中通过多个 iframe 实现聊天框和历史记录的显示与交互。
  • EventEmitter发送消息,app.post接收消息并重定向。
  • 提到 eBay 也在探索类似技术。
  • 临时解决方案中的 JavaScript 代码chat.src = "";setTimeout(() => chat.src = "/chat/history", 300)
阅读 16
0 条评论