如何将 GoogleChromeLabs input-first-delay polyfill 添加到 React 应用程序

Question

我一定遗漏了一些简单的东西，但似乎无法让 polyfill 用于测量我的 firebase 项目的第一个输入延迟。

我已经按照此处的建议包含了缩小文件，然后在我的 HTML 的正文中，我也按照建议运行了代码。

所以它看起来像：

<head>
  <title>My website</title>

  <!--first-input-delay-->
  !function(n,e){var t,o,i,c=[],f={passive:!0,capture:!0},r=new Date,a="pointerup",u="pointercancel";function p(n,c){t||(t=c,o=n,i=new Date,w(e),s())}function s(){o>=0&&o<i-r&&(c.forEach(function(n){n(o,t)}),c=[])}function l(t){if(t.cancelable){var o=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,o){function i(){p(t,o),r()}function c(){r()}function r(){e(a,i,f),e(u,c,f)}n(a,i,f),n(u,c,f)}(o,t):p(o,t)}}function w(n){["click","mousedown","keydown","touchstart","pointerdown"].forEach(function(e){n(e,l,f)})}w(n),self.perfMetrics=self.perfMetrics||{},self.perfMetrics.onFirstInputDelay=function(n){c.push(n),s()}}(addEventListener,removeEventListener);
</head>

<body>

  <!-- my react app -->
  <div id="root"></div>

  <script>
    perfMetrics.onFirstInputDelay((delay, evt) => {
        console.log("First Input Delay", delay)
        console.log("Event details", evt)
      })
  </script>

</body>

当我包含控制台日志时，脚本按预期运行，控制台记录数据，但它从未将其发送到 firebase。 如果我取出控制台日志（ perfMetrics.onFirstInputDelay() ），脚本将失败并显示TypeError: n is not a function 。

我应该如何将它添加到我的应用程序中？ 我应该以某种方式将跟踪发送到 Firebase 吗？ 我目前使用性能跟踪，但不确定如何发送此特定事件，因为它没有开始和停止时间。

解决方案类似于以下内容吗？

const performance = firebase.performance()
performance.trace(onFirstInputDelay)

Answer 1

所以我做了一些愚蠢的事情。 我只需要包含 polyfill 并让 Firebase SDK 处理 onFirstInputDelay 事件。

所以只要有这个就行了。

<head>
  <title>My website</title>

  <!--first-input-delay-->
  !function(n,e){var t,o,i,c=[],f={passive:!0,capture:!0},r=new Date,a="pointerup",u="pointercancel";function p(n,c){t||(t=c,o=n,i=new Date,w(e),s())}function s(){o>=0&&o<i-r&&(c.forEach(function(n){n(o,t)}),c=[])}function l(t){if(t.cancelable){var o=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,o){function i(){p(t,o),r()}function c(){r()}function r(){e(a,i,f),e(u,c,f)}n(a,i,f),n(u,c,f)}(o,t):p(o,t)}}function w(n){["click","mousedown","keydown","touchstart","pointerdown"].forEach(function(e){n(e,l,f)})}w(n),self.perfMetrics=self.perfMetrics||{},self.perfMetrics.onFirstInputDelay=function(n){c.push(n),s()}}(addEventListener,removeEventListener);
</head>

<body>
  <!-- my react app -->
  <div id="root"></div>
</body>

如何将 GoogleChromeLabs input-first-delay polyfill 添加到 React 应用程序

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-05-07 17:28:28

如何将 GoogleChromeLabs input-first-delay polyfill 添加到 React 应用程序

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-05-07 17:28:28

解决方案1
0 已采纳 2020-05-07 17:28:28