Chrome在刷新应用程序后30秒以上没有响应(打开了开发工具）

Chrome becomes unresponsive for 30+ seconds after refreshing app (w/ dev tools open)

本文关键字：响应 开发工具 应用程序 刷新 30秒 Chrome      更新时间：2024-06-05

当我在Chrome中打开我正在使用的应用程序大约30秒时，Chrome的所有UI元素都没有响应。开发人员工具完全冻结，刷新/返回按钮响应（悬停/活动状态），但它们不起作用。大约30秒后，我尝试的所有动作都同时发生了。

我的应用程序没有阻塞，似乎运行得很好。不过，在我运行过的其他类似应用程序中，这不是问题。

我唯一的猜测是，我的应用程序在启动时做了一些事情，导致了这种情况，所以下面是启动代码：

entry.js

import "babel-polyfill";
require("./index.html"); // Forces webpack to include our html file
window.onload = () => require("./app");

app.js

import React from "react";
import ReactDOM from "react-dom";
import Application from "components/application";
import store from "store";
import actions from "store/actions";
import storage from "storage";
require("style/normalize.scss");
require("style/base.scss");
const loadedState = storage.get("state");
if(!!loadedState) {
  store.dispatch({
    type: actions.LOAD_STATE,
    state: loadedState
  });
}
store.subscribe(() => {
  console.time("Saving");
  storage.set("state", store.getState());
  console.timeEnd("Saving");
});
ReactDOM.render(<Application/>, document.getElementById("game-container"));

编辑：

我刚刚在Firefox中测试了该应用程序，没有遇到任何问题

这个问题似乎只在开发者工具打开时刷新应用程序时才会出现。

尝试禁用源映射。只有当开发人员工具打开时才加载源映射。

我不知道他们为什么会造成这样的延迟。也许浏览器在加载和解析源映射时会冻结？如果是这样的话，他们可能有问题。

您可以尝试使用不同的源映射类型来确定问题的确切原因。

相关文章：