getFID.ts 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. /*
  2. * Copyright 2020 Google LLC
  3. *
  4. * Licensed under the Apache License, Version 2.0 (the "License");
  5. * you may not use this file except in compliance with the License.
  6. * You may obtain a copy of the License at
  7. *
  8. * https://www.apache.org/licenses/LICENSE-2.0
  9. *
  10. * Unless required by applicable law or agreed to in writing, software
  11. * distributed under the License is distributed on an "AS IS" BASIS,
  12. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13. * See the License for the specific language governing permissions and
  14. * limitations under the License.
  15. */
  16. import {bindReporter} from './lib/bindReporter.js';
  17. import {finalMetrics} from './lib/finalMetrics.js';
  18. import {getFirstHidden} from './lib/getFirstHidden.js';
  19. import {initMetric} from './lib/initMetric.js';
  20. import {observe, PerformanceEntryHandler} from './lib/observe.js';
  21. import {onBFCacheRestore} from './lib/onBFCacheRestore.js';
  22. import {onHidden} from './lib/onHidden.js';
  23. import {firstInputPolyfill, resetFirstInputPolyfill} from './lib/polyfills/firstInputPolyfill.js';
  24. import {FirstInputPolyfillCallback, PerformanceEventTiming, ReportHandler} from './types.js';
  25. export const getFID = (onReport: ReportHandler, reportAllChanges?: boolean) => {
  26. const firstHidden = getFirstHidden();
  27. let metric = initMetric('FID');
  28. let report: ReturnType<typeof bindReporter>;
  29. const entryHandler = (entry: PerformanceEventTiming) => {
  30. // Only report if the page wasn't hidden prior to the first input.
  31. if (entry.startTime < firstHidden.timeStamp) {
  32. metric.value = entry.processingStart - entry.startTime;
  33. metric.entries.push(entry);
  34. finalMetrics.add(metric);
  35. report();
  36. }
  37. };
  38. const po = observe('first-input', entryHandler as PerformanceEntryHandler);
  39. report = bindReporter(onReport, metric, reportAllChanges);
  40. if (po) {
  41. onHidden(() => {
  42. po.takeRecords().map(entryHandler as PerformanceEntryHandler);
  43. po.disconnect();
  44. }, true);
  45. }
  46. if (self.__WEB_VITALS_POLYFILL__) {
  47. // Prefer the native implementation if available,
  48. if (!po) {
  49. window.webVitals.firstInputPolyfill(entryHandler as FirstInputPolyfillCallback)
  50. }
  51. onBFCacheRestore(() => {
  52. metric = initMetric('FID');
  53. report = bindReporter(onReport, metric, reportAllChanges);
  54. window.webVitals.resetFirstInputPolyfill();
  55. window.webVitals.firstInputPolyfill(entryHandler as FirstInputPolyfillCallback);
  56. });
  57. } else {
  58. // Only monitor bfcache restores if the browser supports FID natively.
  59. if (po) {
  60. onBFCacheRestore(() => {
  61. metric = initMetric('FID');
  62. report = bindReporter(onReport, metric, reportAllChanges);
  63. resetFirstInputPolyfill();
  64. firstInputPolyfill(entryHandler as FirstInputPolyfillCallback);
  65. });
  66. }
  67. }
  68. };