违反“requestIdleCallbackHandler”花了 ms

Posted 2023-02-22

【中文标题】违反“requestIdleCallbackHandler”花了 ms

【英文标题】：Violation 'requestIdleCallbackHandler ' took ms

【发布时间】：2017-07-06 02:53:56

【问题描述】：

我正在编写一个使用create-react-app 和redux、react-redux 和react-router 生成的应用程序。每当我像这样点击Link 时：

import React from 'react'
import  Link  from 'react-router'
import ThingCard from '../../components/ThingCard'


const ThingsList = (things) => 
    return (
        <ul>
            things.map(thing => 
                <Link to="/things/"+thing.id key=thing.id><ThingCard thing=thing/></Link>
            )
        </ul>
    )


export default ThingsList

我在控制台中看到以下警告。我不知道它们来自哪里或它们的意思。谷歌搜索没有产生任何有用的结果。可以安全地忽略这些警告吗？如果不能，我如何才能找到更多关于它们的信息？我相信这个问题会阻止父页面呈现它的子页面。

我已禁用所有网络请求。

编辑：此错误仅显示在 Chrome Canary 中，而不显示在 Google Chrome 中。但是，谷歌浏览器没有正确渲染孩子（可能是由于这个问题）

【问题讨论】：

我现在也在 Chrome 稳定版中看到了这一点。大约在 2017 年 1 月用 CRA 制作的 React 应用程序并被弹出。所以不要跟踪 CRA 已经变成了什么。我看到它使用的唯一地方是依赖项node_modules/coniuse-db/data.json,features-json/requestidlecallback.json,data-1.0.json,data-2.0.json。

【参考方案1】：

可以放心地忽略它。这里是good explanation 你为什么会看到这个。 您在这里看到 requestIdleCallback 的原因很可能是因为您使用的是 React 16+，它具有全新的架构 Fiber You can read more about it

TL;DR;它只是通知您您/他们的某些代码花费了超过 16 毫秒的时间，因此您可能并不总是得到 60fp。