Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
429 views
in Technique[技术] by (71.8m points)

javascript - 违规长时间运行的JavaScript任务需要xx ms(Violation Long running JavaScript task took xx ms)

Recently, I got this kind of warning, and this is my first time getting it:

(最近,我收到了这样的警告,这是我第一次得到它:)

 [Violation] Long running JavaScript task took 234ms [Violation] Forced reflow while executing JavaScript took 45ms 

I'm working on a group project and I have no idea where this is coming from.

(我正在开展一个小组项目,我不知道这是从哪里来的。)

This never happened before.

(这从未发生过。)

Suddenly, it appeared when someone else got involved in the project.

(突然间,当其他人参与该项目时,它就出现了。)

How do I find what file/function causes this warning?

(如何找到导致此警告的文件/功能?)

I've been looking for the answer, but mostly about the solution on how to solve it.

(我一直在寻找答案,但主要是关于如何解决它的解决方案。)

I can't solve it if I can't even find the source of the problem.

(如果我找不到问题的根源,我无法解决。)

In this case, the warning appears only on Chrome.

(在这种情况下,警告仅出现在Chrome上。)

I tried to use Edge, but I didn't get any similar warnings, and I haven't tested it on Firefox yet.

(我试图使用Edge,但我没有得到任何类似的警告,我还没有在Firefox上测试它。)

I even get the error from jquery.min.js :

(我甚至从jquery.min.js得到错误:)

 [Violation] Handler took 231ms of runtime (50ms allowed) jquery.min.js:2 
  ask by procatmer translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Update : Chrome 58+ hid these and other debug messages by default.

(更新 :Chrome 58+默认隐藏了这些和其他调试消息。)

To display them click the arrow next to 'Info' and select 'Verbose'.

(要显示它们,请单击“信息”旁边的箭头,然后选择“详细”。)

Chrome 57 turned on 'hide violations' by default.

(Chrome 57默认启用了“隐藏违规”功能。)

To turn them back on you need to enable filters and uncheck the 'hide violations' box.

(要重新打开它们,您需要启用过滤器并取消选中“隐藏违规”框。)

suddenly it appears when someone else involved in the project

(当其他人参与该项目时突然出现)

I think it's more likely you updated to Chrome 56. This warning is a wonderful new feature, in my opinion, please only turn it off if you're desperate and your assessor will take marks away from you.

(我认为你更有可能更新到Chrome 56.这个警告是一个很棒的新功能,在我看来,如果你绝望而且你的评估员会从你那里拿走分数,请关闭它。)

The underlying problems are there in the other browsers but the browsers just aren't telling you there's a problem.

(其他浏览器存在潜在问题,但浏览器并没有告诉您存在问题。)

The Chromium ticket is here but there isn't really any interesting discussion on it.

(Chromium门票在这里,但没有任何有趣的讨论。)

These messages are warnings instead of errors because it's not really going to cause major problems.

(这些消息是警告而不是错误,因为它不会真正导致重大问题。)

It may cause frames to get dropped or otherwise cause a less smooth experience.

(它可能会导致帧丢失或导致不太顺畅的体验。)

They're worth investigating and fixing to improve the quality of your application however.

(然而,它们值得调查和修复以提高应用程序的质量。)

The way to do this is by paying attention to what circumstances the messages appear, and doing performance testing to narrow down where the issue is occurring.

(这样做的方法是关注消息出现的情况,并进行性能测试以缩小问题发生的位置。)

The simplest way to start performance testing is to insert some code like this:

(开始性能测试的最简单方法是插入一些代码,如下所示:)

function someMethodIThinkMightBeSlow() {
    const startTime = performance.now();

    // Do the normal stuff for this function

    const duration = performance.now() - startTime;
    console.log(`someMethodIThinkMightBeSlow took ${duration}ms`);
}

If you want to get more advanced, you could also use Chrome's profiler , or make use of a benchmarking library like this one .

(如果您想获得更高级的功能,您还可以使用Chrome的分析器 ,或者使用像这样的基准测试库。)

Once you've found some code that's taking a long time (50ms is Chrome's threshold), you have a couple of options:

(一旦你发现一些需要很长时间的代码(50毫秒是Chrome的门槛),你有几个选择:)

  1. Cut out some/all of that task that may be unnecessary

    (删除可能不必要的部分/全部任务)

  2. Figure out how to do the same task faster

    (弄清楚如何更快地完成相同的任务)

  3. Divide the code into multiple asynchronous steps

    (将代码分成多个异步步骤)

(1) and (2) may be difficult or impossible, but it's sometimes really easy and should be your first attempts.

((1)和(2)可能很难或不可能,但它有时很容易,应该是你的第一次尝试。)

If needed, it should always be possible to do (3).

(如果需要,应始终可以做(3)。)

To do this you will use something like:

(为此,您将使用以下内容:)

setTimeout(functionToRunVerySoonButNotNow);

or

(要么)

// This one is not available natively in IE, but there are polyfills available.
Promise.resolve().then(functionToRunVerySoonButNotNow);

You can read more about the asynchronous nature of JavaScript here .

(您可以在此处阅读有关JavaScript的异步特性的更多信息。)


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...