From 9a31008465262ac2ea7905c90fda3240be4cde04 Mon Sep 17 00:00:00 2001 From: James Gorrie Date: Mon, 4 Jul 2022 09:27:00 +0100 Subject: [PATCH 1/4] fix(tsc): add id to TopicFilterBank --- dotcom-rendering/src/web/components/TopicFilterBank.stories.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/dotcom-rendering/src/web/components/TopicFilterBank.stories.tsx b/dotcom-rendering/src/web/components/TopicFilterBank.stories.tsx index 0be39446288..ffab62d86f3 100644 --- a/dotcom-rendering/src/web/components/TopicFilterBank.stories.tsx +++ b/dotcom-rendering/src/web/components/TopicFilterBank.stories.tsx @@ -73,6 +73,7 @@ export const topicBankSelectedIsNotInTop5 = () => { return ( Date: Sat, 2 Jul 2022 18:56:13 +0100 Subject: [PATCH 2/4] refactor(perf): simplify initPerf - Removed systematic console logs - Removed dependency on getEntriesByName - Return time elapsed since time origin for start() - Add some documentation --- dotcom-rendering/src/web/browser/initPerf.ts | 49 ++++++++------------ 1 file changed, 20 insertions(+), 29 deletions(-) diff --git a/dotcom-rendering/src/web/browser/initPerf.ts b/dotcom-rendering/src/web/browser/initPerf.ts index d8a4aad8f21..c7325c1583e 100644 --- a/dotcom-rendering/src/web/browser/initPerf.ts +++ b/dotcom-rendering/src/web/browser/initPerf.ts @@ -1,42 +1,33 @@ -import { log } from '@guardian/libs'; - +const prefix = 'dotcom.performance'; + +/** + * Helper to measure the duration of any task. + * + * Values are rounded up to the nearest millisecond, + * in order to not under-report any duration. + */ export const initPerf = ( name: string, -): { start: () => void; end: () => number; clear: () => void } => { - type TimeTakenInMilliseconds = number; - +): { start: () => number; end: () => number; clear: () => void } => { const perf = window.performance; - const startKey = `${name}-start`; - const endKey = `${name}-end`; + const startKey = `${prefix}.${name}-start`; + const endKey = `${prefix}.${name}-end`; - if (!perf || !perf.getEntriesByName) { - // Return noops if window.performance or the required functions don't exist - return { - start: () => {}, - end: () => 0, - clear: () => {}, - }; + if (!('mark' in perf)) { + return { start: () => 0, end: () => 0, clear: () => {} }; } + /** @returns time elapsed since [time origin](https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp#the_time_origin) in milliseconds */ const start = () => { - perf.mark(startKey); + const { startTime } = perf.mark(startKey); + return Math.ceil(startTime); }; - const end = (): TimeTakenInMilliseconds => { + /** @returns length of task in milliseconds */ + const end = (): number => { perf.mark(endKey); - perf.measure(name, startKey, endKey); - - log('dotcom', JSON.stringify(perf.getEntriesByName(name))); - - const measureEntries = perf.getEntriesByName(name, 'measure'); - const timeTakenFloat = - (measureEntries && - measureEntries[0] && - measureEntries[0].duration) || - 0; - const timeTakenInt = Math.round(timeTakenFloat); - - return timeTakenInt; + const { duration } = perf.measure(name, startKey, endKey); + return Math.ceil(duration); }; const clear = () => { From 90bb6dce5beb8ecccc10780a2a0b921023da1c4b Mon Sep 17 00:00:00 2001 From: Max Duval Date: Sat, 2 Jul 2022 19:04:13 +0100 Subject: [PATCH 3/4] feat(perf): log islands performance info MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Hopefully gaining more insight into where improvements would be beneficial. Now logging to the console the duration of: - rendering or hydration - downloading the island’s JavaScript --- .../src/web/browser/islands/doHydration.ts | 22 ++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) diff --git a/dotcom-rendering/src/web/browser/islands/doHydration.ts b/dotcom-rendering/src/web/browser/islands/doHydration.ts index 8302f1247c9..6c4a40de46a 100644 --- a/dotcom-rendering/src/web/browser/islands/doHydration.ts +++ b/dotcom-rendering/src/web/browser/islands/doHydration.ts @@ -37,15 +37,31 @@ export const doHydration = ( if (clientOnly) { element.querySelector('[data-name="placeholder"]')?.remove(); - log('dotcom', `Rendering island ${name}`); render(h(module[name], data), element); } else { - log('dotcom', `Hydrating island ${name}`); hydrate(h(module[name], data), element); } element.setAttribute('data-gu-ready', 'true'); - end(); + const timeTaken = end(); + + return { clientOnly, timeTaken }; + }) + .then(({ clientOnly, timeTaken }) => { + // Log performance info + const entry = window.performance + .getEntriesByType('resource') + .find((p) => p.name.includes(`${name}-importable.`)); + const { requestStart = 0, responseEnd = 0 } = + entry instanceof PerformanceResourceTiming ? entry : {}; + const download = Math.ceil(responseEnd - requestStart); + + const action = clientOnly ? 'Rendering' : 'Hydrating'; + + log( + 'dotcom', + `🏝 ${action} island <${name} /> took ${timeTaken}ms (downloaded in ${download}ms)`, + ); }) .catch((error) => { if (name && error.message.includes(name)) { From 7388ffef8888faede4b5bea476365762ef408d43 Mon Sep 17 00:00:00 2001 From: Max Duval Date: Sat, 2 Jul 2022 19:04:37 +0100 Subject: [PATCH 4/4] deps: bump lockfiles --- apps-rendering/package-lock.json | 38 ++++++++++++++++---------------- yarn.lock | 25 ++++++++++++++------- 2 files changed, 36 insertions(+), 27 deletions(-) diff --git a/apps-rendering/package-lock.json b/apps-rendering/package-lock.json index 70592f1c807..195d2bcae6c 100644 --- a/apps-rendering/package-lock.json +++ b/apps-rendering/package-lock.json @@ -5974,7 +5974,7 @@ "find-up": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz", - "integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=", + "integrity": "sha512-NWzkk0jSJtTt08+FBFMvXoeZnOJD+jTtsRmBYbAIzJdX6l7dLgR7CTubCM5/eDdPUBvLCeVasP1brfVR/9/EZQ==", "requires": { "locate-path": "^2.0.0" } @@ -6040,7 +6040,7 @@ "locate-path": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz", - "integrity": "sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=", + "integrity": "sha512-NCI2kiDkyR7VeEKm27Kda/iQHyKJe1Bu0FlTbYp3CqJu+9IFe9bLyAjMxf5ZDDbEg+iMPzB5zYyUTSm8wVTKmA==", "requires": { "p-locate": "^2.0.0", "path-exists": "^3.0.0" @@ -8294,7 +8294,7 @@ "array-flatten": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz", - "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==" + "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=" }, "array-includes": { "version": "3.1.1", @@ -9718,7 +9718,7 @@ "cookie-signature": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz", - "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==" + "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=" }, "copy-descriptor": { "version": "0.1.1", @@ -10286,7 +10286,7 @@ "ee-first": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", - "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==" + "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=" }, "electron-to-chromium": { "version": "1.3.842", @@ -10316,7 +10316,7 @@ "encodeurl": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", - "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==" + "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=" }, "end-of-stream": { "version": "1.4.4", @@ -11316,7 +11316,7 @@ "etag": { "version": "1.8.1", "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz", - "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==" + "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=" }, "eventemitter3": { "version": "4.0.7", @@ -11872,7 +11872,7 @@ "fresh": { "version": "0.5.2", "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", - "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==" + "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=" }, "fs-constants": { "version": "1.0.0", @@ -14485,7 +14485,7 @@ "load-json-file": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-4.0.0.tgz", - "integrity": "sha1-L19Fq5HjMhYjT9U62rZo607AmTs=", + "integrity": "sha512-Kx8hMakjX03tiGTLAIdJ+lL0htKnXjEZN6hk/tozf/WOuYGdZBJrZ+rCJRbVCugsjB3jMLn9746NsQIf5VjBMw==", "requires": { "graceful-fs": "^4.1.2", "parse-json": "^4.0.0", @@ -14707,7 +14707,7 @@ "media-typer": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", - "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==" + "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=" }, "memfs": { "version": "3.4.1", @@ -14720,7 +14720,7 @@ "merge-descriptors": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", - "integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==" + "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=" }, "merge-stream": { "version": "2.0.0", @@ -14735,7 +14735,7 @@ "methods": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz", - "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==" + "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=" }, "micromatch": { "version": "4.0.2", @@ -15916,7 +15916,7 @@ "path-to-regexp": { "version": "0.1.7", "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz", - "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==" + "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=" }, "path-type": { "version": "4.0.0", @@ -15960,7 +15960,7 @@ "find-up": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz", - "integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=", + "integrity": "sha512-NWzkk0jSJtTt08+FBFMvXoeZnOJD+jTtsRmBYbAIzJdX6l7dLgR7CTubCM5/eDdPUBvLCeVasP1brfVR/9/EZQ==", "requires": { "locate-path": "^2.0.0" } @@ -15968,7 +15968,7 @@ "locate-path": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz", - "integrity": "sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=", + "integrity": "sha512-NCI2kiDkyR7VeEKm27Kda/iQHyKJe1Bu0FlTbYp3CqJu+9IFe9bLyAjMxf5ZDDbEg+iMPzB5zYyUTSm8wVTKmA==", "requires": { "p-locate": "^2.0.0", "path-exists": "^3.0.0" @@ -16310,7 +16310,7 @@ "find-up": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz", - "integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=", + "integrity": "sha512-NWzkk0jSJtTt08+FBFMvXoeZnOJD+jTtsRmBYbAIzJdX6l7dLgR7CTubCM5/eDdPUBvLCeVasP1brfVR/9/EZQ==", "requires": { "locate-path": "^2.0.0" } @@ -16318,7 +16318,7 @@ "locate-path": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz", - "integrity": "sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=", + "integrity": "sha512-NCI2kiDkyR7VeEKm27Kda/iQHyKJe1Bu0FlTbYp3CqJu+9IFe9bLyAjMxf5ZDDbEg+iMPzB5zYyUTSm8wVTKmA==", "requires": { "p-locate": "^2.0.0", "path-exists": "^3.0.0" @@ -18224,7 +18224,7 @@ "unpipe": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz", - "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==" + "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=" }, "unset-value": { "version": "1.0.0", @@ -18323,7 +18323,7 @@ "utils-merge": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz", - "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==" + "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=" }, "uuid": { "version": "3.3.2", diff --git a/yarn.lock b/yarn.lock index d8fabcbac3e..af67e26ad31 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2624,9 +2624,9 @@ "@emotion/memoize" "0.7.4" "@emotion/jest@^11.3.0": - version "11.9.1" - resolved "https://registry.yarnpkg.com/@emotion/jest/-/jest-11.9.1.tgz#65224814552eab6acb923504e597c6f6b67e90d6" - integrity sha512-JFf9yBA6a7fKrKCWMmjODGRcgBnjiQsl9AakP1y7oRJ6B147ZKPo8DgzHUZ5qQkI06GKAWwYU1vKROInc7SYVA== + version "11.9.3" + resolved "https://registry.yarnpkg.com/@emotion/jest/-/jest-11.9.3.tgz#24a392d24e9af1f91bd1297ab1e53f069f9ca47c" + integrity sha512-fDfZc1ydjjJ+2IDAK+rP+rm469I4u5cIkN3zmGYf0CBW9TLrtM9u9kke3s+i5/M2UpcqLDvtal0EyPBR0A8EWg== dependencies: "@babel/runtime" "^7.13.10" "@emotion/css-prettifier" "^1.0.1" @@ -12425,7 +12425,7 @@ is-core-module@^2.2.0, is-core-module@^2.5.0: dependencies: has "^1.0.3" -is-core-module@^2.8.0, is-core-module@^2.8.1: +is-core-module@^2.8.0, is-core-module@^2.8.1, is-core-module@^2.9.0: version "2.9.0" resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.9.0.tgz#e1c34429cd51c6dd9e09e0799e396e27b19a9c69" integrity sha512-+5FPy5PnwmO3lvfMb0AsoPaBG+5KHUI0wYFXOtYPnVVVspTFUuMZNfNaNVRt3FZadstu2c8x23vykRW/NBoU6A== @@ -17210,9 +17210,9 @@ react-is@17.0.2, react-is@^17.0.1, react-is@^17.0.2: integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w== "react-is@^16.12.0 || ^17.0.0 || ^18.0.0": - version "18.1.0" - resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.1.0.tgz#61aaed3096d30eacf2a2127118b5b41387d32a67" - integrity sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg== + version "18.2.0" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b" + integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w== react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4: version "16.13.1" @@ -17897,7 +17897,16 @@ resolve@1.x, resolve@^1.10.0, resolve@^1.12.0, resolve@^1.13.1, resolve@^1.14.2, is-core-module "^2.2.0" path-parse "^1.0.6" -resolve@^1.18.1, resolve@^1.22.0: +resolve@^1.18.1: + version "1.22.1" + resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.1.tgz#27cb2ebb53f91abb49470a928bba7558066ac177" + integrity sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw== + dependencies: + is-core-module "^2.9.0" + path-parse "^1.0.7" + supports-preserve-symlinks-flag "^1.0.0" + +resolve@^1.22.0: version "1.22.0" resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.0.tgz#5e0b8c67c15df57a89bdbabe603a002f21731198" integrity sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==