Electron :[违规] 'click' 处理程序耗时 574 毫秒

Question

我正在构建一个 SPA，在 Chrome 浏览器中一切正常。我尝试在 Electron 中运行相同的代码，但出现以下错误(单击按钮时):

[Violation] 'click' handler took 574ms

此外，在此错误之后，webview 和访客页面之间的所有 IPC 调用(通过 ipcRenderer.sendToHost)都被阻止，即没有到达 webview。

谷歌搜索告诉我阻塞 UI 的限制是 50 毫秒。有什么办法可以提高这个限制吗？

编辑:这是处理点击的代码。这是一个只有一个标签的标签栏。代码是reactjs。

import { Link } from 'react-router';
import { Tab as MUITab } from 'material-ui/Tabs';

class TabBar extends Component {
  render() {
    const view = {
      to: '/accounts',
      id: 'accounts',
      icon: 'home',
      label: 'ACCOUNTS'
    };

    return (
      <Link to={ view.to }> // <--- <a> tag in DOM, receives the click
        <Tab view={ view } />
      </Link>
    );
}

class Tab extends Component {
  static propTypes = {
    view: PropTypes.object.isRequired
  };

  render () {
    const { view } = this.props;

    return (
      <MUITab
        icon={ view.icon }
        label={
          this.renderLabel(view.id)
        }
      />
    );
  }

  renderLabel (id, bubble) {
    return (
      <div className={ styles.label }>
        <FormattedMessage
          id={ `settings.views.${id}.label` }
        />
        { bubble }
      </div>
    );
  }
}

Answer 1

Googling a bit taught me that the limit for blocking UI is 50ms. Is there a way I can increase this limit?

可能不是您想要的答案，但我宁愿建议重构代码而不是阻塞。 50 毫秒对用户来说是明显的时间，如果您的代码平均阻塞 500 毫秒，它会给用户带来明显的 UI 滞后。 Electron 的 IPC 具有异步机制 - 尽量避免同步，而是使用异步机制来使 UI 非阻塞。