Flutter Hot reload在浏览器端未自动刷新需窗口获焦才生效如何解决

该问题由Chromium内核（Chrome/Edge均基于该内核）的后台资源节流机制导致：当浏览器窗口处于失焦、最小化或被其他窗口完全遮挡状态时，内核会主动暂停/延迟处理页面的定时器、WebSocket推送消息。热重载依赖开发服务端与页面之间的WebSocket通信推送变更通知，失焦状态下通知会被暂存，直到窗口重新被激活（鼠标移入即触发窗口激活状态变更）才会处理，因此出现需要移动鼠标才触发更新的情况。

• 调整Chromium内核的节流配置
  打开浏览器地址栏输入chrome://flags访问实验配置页，分别搜索以下两项配置，将值从Default修改为Disabled后重启浏览器即可：
  • Throttle Javascript timers in background（禁用后台JavaScript定时器节流）
  • Calculate window occlusion on Windows（Windows系统专属，禁用窗口遮挡状态检测）
• 修改开发服务端的热重载检测策略
  如果是Flutter Web项目，在Android Studio的运行配置中添加启动参数--web-poll-interval=500，开启短间隔轮询检测代码变更，绕开WebSocket的节流限制；如果是基于Node.js DevServer的Web项目（如Compose Multiplatform Web、React Native Web等），在DevServer配置中添加如下配置项启用轮询：

  watchOptions: {
    poll: 300,
    aggregateTimeout: 0
  }
  

• 关闭系统后台资源限制（Windows系统专属）
  打开Windows系统设置→系统→多任务处理，关闭最小化窗口时减少资源使用开关；如果是Win11系统可额外进入开发者选项，开启禁用后台应用资源限制的调试选项。
• 调试时调整窗口布局
  开发时将浏览器窗口与Android Studio窗口左右并排摆放，保证浏览器窗口始终处于未完全遮挡的激活状态，不会触发后台节流机制，热重载即可实时触发。

注意：调试完成后建议将浏览器flags改回默认值，避免浏览器长期运行功耗升高。

内容的提问来源于stack exchange，提问作者Dmitry Z