Show HN：我看到了这个令人惊叹的实验，于是做了一个简化版

原文 ↗ Hacker News 讨论 ↗

一个把多个重叠窗口拼接成单一交互画布的浏览器演示，因其对 Web API 的创造性使用而让人惊叹，同时也引发了对隐私和安全的疑问。评论者讨论了用 localStorage、BroadcastChannel 或 postMessage 代替 WebSockets 的其他实现方式，并指出游戏和艺术项目里更早就有多窗口实验。许多人对 `window.screenX/Y` 以及其他与屏幕或电池相关的属性本身就存在感到不安，认为它们在没有多少正当收益的情况下，却能助长指纹识别和点击劫持。

演示概念与行为

  • 多个浏览器窗口充当一个共享画布。
  • 每个窗口都会报告自己的大小/位置；内容会被渲染出来，使对象能够跨越重叠窗口并在其中穿插互动。
  • 一些评论者觉得这很颠覆认知或在视觉上很惊艳；也有人指出，这在概念上类似于共享坐标空间里使用多个视口的多人游戏。

实现：socket vs 浏览器 API

  • 最初的灵感使用 localStorage 事件来进行跨窗口同步。
  • 这个版本使用 WebSockets；有人认为这属于“过度设计”，也有人指出它可以让你通过网络与朋友共享。
  • 建议的替代方案：
    • BroadcastChannel，用于同源的多标签页/多窗口消息传递。
    • 当一个窗口打开另一个窗口时，使用 postMessage() / message channels。
    • Service worker，甚至 WebRTC loopback。
  • 有人指出，对于本地的单用户演示来说，socket 会带来可以避免的延迟。

卡顿、性能与浏览器行为

  • 许多人疑惑为什么交互会有延迟，因为它看起来“很简单”。
  • 提出的原因包括：
    • WebSocket 或网络延迟（尽管本地网络应该很快）。
    • 窗口位置更新不同步于 JS 线程。
    • 浏览器对后台标签页/窗口的节流。
    • 查询窗口位置本身就是浏览器里一个有延迟的特性。
    • 通用 GUI/compositor 的局限；即使在原生环境中，平滑的多窗口同步也并不简单。

安全、隐私与可疑的 Web API

  • 很多人对 window.screenX/screenY 和类似属性的存在感到不安；它们会暴露窗口位置和屏幕特征。
  • 相关担忧包括：
    • 通过屏幕尺寸/位置进行浏览器指纹识别。
    • 通过预测系统对话框会出现在哪里来实施点击劫持。
    • 认为网页不应该知道视口之外的环境。
  • 一些浏览器/操作系统设置（例如特定隐私设置或 Wayland compositor）已经把这些值限制为 0 或隐藏它们。
  • 更广泛的批评指向“功能过强”的 Web API（例如 Battery Status），以及对过去滥用和防御措施的引用（比如 Tor 对窗口大小的限制）。

应用、先例与相关演示

  • 建议用途包括：AR 风格的分层界面、绘图程序的图层管理、颜色混合图、跨多显示器的“滑动”效果、协作浏览。
  • 也有人说这里技术上并不新；多年来一直存在类似的多窗口演示和游戏（例如跨窗口的物理模拟或 Pong、Chrome 实验、较早的 ActiveX/NPAPI 实现）。
  • 多个指向先前和并行项目的链接（3D 场景、绘图工具、多窗口游戏）进一步说明，这是一种长期存在技巧的有趣、打磨良好的例子。