Question

当我打开我在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中测试了该应用，并没有遇到任何问题

只有在开发人员工具处于打开状态时刷新应用程序时才会出现此问题。

Answer 1

尝试禁用源地图。源映射仅在开发人员工具打开时加载。

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

您可以尝试使用不同的source map types来查明问题的确切原因。

在刷新应用程序（打开dev工具）后，Chrome会在30秒内无响应

1 个答案: