Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug] Chrome 产生 Warning #350

Open
Ronbb opened this issue Feb 9, 2025 · 5 comments
Open

[Bug] Chrome 产生 Warning #350

Ronbb opened this issue Feb 9, 2025 · 5 comments

Comments

@Ronbb
Copy link

Ronbb commented Feb 9, 2025

Chrome: 133
Windows: 11

复现地址:https://www.leaferjs.com/playground/#official%2Fplugin%2Feditor%2Ffull.ts

Interaction.ts:77 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
__listenEvents @ Interaction.ts:77
Pl @ Interaction.ts:80
Xl @ Interaction.ts:18
interaction @ index.ts:17
init @ Leafer.ts:131
init @ App.ts:29
vh @ Leafer.ts:91
t.App @ App.ts:25
(匿名) @ VM117990:3
(匿名) @ VM117990:17
N @ hoisted.Bmbm0lqN.js:1210
(匿名) @ hoisted.Bmbm0lqN.js:1215
Interaction.ts:77 [Violation] Added non-passive event listener to a scroll-blocking 'wheel' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
__listenEvents @ Interaction.ts:77
Pl @ Interaction.ts:80
Xl @ Interaction.ts:18
interaction @ index.ts:17
init @ Leafer.ts:131
init @ App.ts:29
vh @ Leafer.ts:91
t.App @ App.ts:25
(匿名) @ VM117990:3
(匿名) @ VM117990:17
N @ hoisted.Bmbm0lqN.js:1210
(匿名) @ hoisted.Bmbm0lqN.js:1215
Interaction.ts:77 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
__listenEvents @ Interaction.ts:77
Pl @ Interaction.ts:80
Xl @ Interaction.ts:18
interaction @ index.ts:17
init @ Leafer.ts:131
init @ App.ts:29
vh @ Leafer.ts:91
t.App @ App.ts:25
(匿名) @ VM118282:4
(匿名) @ VM118282:12
N @ hoisted.Bmbm0lqN.js:1210
(匿名) @ hoisted.Bmbm0lqN.js:1215
Interaction.ts:77 [Violation] Added non-passive event listener to a scroll-blocking 'wheel' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
@leaferjs
Copy link
Owner

leaferjs commented Feb 9, 2025

感谢反馈,一打开就会触发?我这边貌似没看见报这个错,是否有其他复现操作步骤?

@Ronbb
Copy link
Author

Ronbb commented Feb 9, 2025

@leaferjs

Microsoft Edge
版本 133.0.3065.51 (正式版本) (64 位)

Chrome 已是最新版本
版本 133.0.6943.60(正式版本) (64 位)

直接打开就有,我在这两个版本上都复现了。并且确保关闭了所有插件。但是,我在调试模式的Chrome和匿名模式的Chrome上没有浮现复现。

@Ronbb
Copy link
Author

Ronbb commented Feb 9, 2025

@leaferjs 补充,控制台日志等级需要选择 Verbose / 详细

@leaferjs
Copy link
Owner

收到,我晚点测试一下windows 电脑

@Ronbb
Copy link
Author

Ronbb commented Feb 11, 2025

@leaferjs 我根据 warning 中提示的网站 https://www.chromestatus.com/feature/5745543795965952 以及提供的 Demo https://rbyers.github.io/scroll-latency.html 测试了一下,在打开 DevTools 的情况下刷新页面,出现了相似的错误。其中提及的 Chrome 版本是 51。

目的是注册监听器的时候增加选项以提升性能:

element.addEventListener('touchstart', function(e) {
  // ...
}, { passive: true });

Playground:

Image

Demo:

Image

产生日志的代码在浏览器内核里:

// third_party\blink\renderer\core\dom\events\event_target.cc

void EventTarget::SetDefaultAddEventListenerOptions(
    const AtomicString& event_type,
    EventListener* event_listener,
    AddEventListenerOptionsResolved* options) {
  options->SetPassiveSpecified(options->hasPassive());

  if (!IsScrollBlockingEvent(event_type)) {
    if (!options->hasPassive())
      options->setPassive(false);
    return;
  }

  LocalDOMWindow* executing_window = ExecutingWindow();
  if (executing_window) {
    if (options->hasPassive()) {
      UseCounter::Count(executing_window->document(),
                        options->passive()
                            ? WebFeature::kAddEventListenerPassiveTrue
                            : WebFeature::kAddEventListenerPassiveFalse);
    }
  }

  if (IsTouchScrollBlockingEvent(event_type)) {
    if (!options->hasPassive() && IsTopLevelNode()) {
      options->setPassive(true);
      options->SetPassiveForcedForDocumentTarget(true);
      return;
    }
  }

  if (IsWheelScrollBlockingEvent(event_type) && IsTopLevelNode()) {
    if (options->hasPassive()) {
      if (executing_window) {
        UseCounter::Count(
            executing_window->document(),
            options->passive()
                ? WebFeature::kAddDocumentLevelPassiveTrueWheelEventListener
                : WebFeature::kAddDocumentLevelPassiveFalseWheelEventListener);
      }
    } else {  // !options->hasPassive()
      if (executing_window) {
        UseCounter::Count(
            executing_window->document(),
            WebFeature::kAddDocumentLevelPassiveDefaultWheelEventListener);
      }
      options->setPassive(true);
      options->SetPassiveForcedForDocumentTarget(true);
      return;
    }
  }

  if (!options->hasPassive())
    options->setPassive(false);

  if (!options->passive() && !options->PassiveSpecified()) {
    String message_text = String::Format(
        "Added non-passive event listener to a scroll-blocking '%s' event. "
        "Consider marking event handler as 'passive' to make the page more "
        "responsive. See "
        "https://www.chromestatus.com/feature/5745543795965952",
        event_type.GetString().Utf8().c_str());

    PerformanceMonitor::ReportGenericViolation(
        GetExecutionContext(), PerformanceMonitor::kDiscouragedAPIUse,
        message_text, base::TimeDelta(), nullptr);
  }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants