Electron：[违规]“点击”处理程序耗时 574 毫秒

Question

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

[Violation] 'click' handler took 574ms

此外，在此错误之后，webview 和访客页面（通过ipcRenderer.sendToHost）之间的所有 IPC 调用都被阻止，即未到达 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

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

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