Skip to content

Speed up snapshotting of many new dom nodes #903

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.

Sign up for GitHub

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

Merged
merged 18 commits into from
Jun 6, 2022
Merged

Speed up snapshotting of many new dom nodes #903

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
ed86eca
Speed up snapshotting of many new dom nodes
Juice10 May 25, 2022
30e4f7d
Improve newlyAddedElement docs
Juice10 May 25, 2022
39a70d0
Optimize needMaskingText by using el.closest and less recursion
Juice10 May 26, 2022
778471e
Serve all rrweb dist files
Juice10 May 26, 2022
9eaf4ce
Split serializeNode into smaller functions
Juice10 May 26, 2022
5d77c7b
Slow down cpu enhance tracing on fast machines
Juice10 May 26, 2022
909c127
Increase timeout
Juice10 May 26, 2022
d289cde
Perf: only loop through ancestors when they have something to compare to
Juice10 May 27, 2022
9d666d3
Perf: `hasNode` is cheaper than `getMeta`
Juice10 May 27, 2022
ff2b225
Perf: If parents where already checked, no need to do it again
Juice10 May 27, 2022
b179941
Perf: reverse for loops are faster
Juice10 May 27, 2022
b2ae33e
Clean up code
Juice10 May 27, 2022
288c275
Perf: check ancestors once with isBlocked
Juice10 May 28, 2022
64c50a9
guessing this might fixes canvas test
Juice10 May 28, 2022
038f40e
Update packages/rrweb/src/record/observers/canvas/webgl.ts
Juice10 Jun 5, 2022
0a63f4c
Fix #904 (#906)
Juice10 May 31, 2022
4b4e343
Bump minimist from 1.2.5 to 1.2.6 (#902)
dependabot[bot] Jun 5, 2022
100c12f
Merge branch 'master' into serialize-perf
Juice10 Jun 6, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Improve newlyAddedElement docs
  • Loading branch information
@Juice10
Juice10 committed May 25, 2022
commit 30e4f7d2323686f9b4dad7ba8f097f9c31bcf50a
6 changes: 4 additions & 2 deletions .eslintrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ module.exports = {
tsconfigRootDir: __dirname,
project: ['./tsconfig.eslint.json', './packages/*/tsconfig.json'],
},
plugins: ['@typescript-eslint'],
rules: {},
plugins: ['@typescript-eslint', 'eslint-plugin-tsdoc'],
rules: {
'tsdoc/syntax': 'warn',
},
};
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
"@typescript-eslint/parser": "^5.25.0",
"concurrently": "^7.1.0",
"eslint": "^8.15.0",
"eslint-plugin-tsdoc": "^0.2.16",
"lerna": "^4.0.0",
"markdownlint": "^0.25.1",
"markdownlint-cli": "^0.31.1",
Expand Down
10 changes: 7 additions & 3 deletions packages/rrweb-snapshot/src/snapshot.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -389,6 +389,9 @@ function serializeNode(
inlineImages: boolean;
recordCanvas: boolean;
keepIframeSrcFn: KeepIframeSrcFn;
/**
* `newlyAddedElement: true` skips scrollTop and scrollLeft check
*/
newlyAddedElement?: boolean;
},
): serializedNode | false {
Expand Down Expand Up @@ -599,9 +602,10 @@ function serializeNode(
}
// Scroll
if (!newlyAddedElement) {
// `scrollTop` and `scrollLeft` are expensive calls because they trigger reflow
// since `scrollTop` & `scrollLeft` are always 0 when an element is added
// to the DOM we can safely skip them for new elements
// `scrollTop` and `scrollLeft` are expensive calls because they trigger reflow.
// Since `scrollTop` & `scrollLeft` are always 0 when an element is added to the DOM.
// And scrolls also get picked up by rrweb's ScrollObserver
// So we can safely skip the `scrollTop/Left` calls for newly added elements
if ((n as HTMLElement).scrollLeft) {
attributes.rr_scrollLeft = (n as HTMLElement).scrollLeft;
}
Expand Down
105 changes: 48 additions & 57 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1560,6 +1560,21 @@
npmlog "^4.1.2"
write-file-atomic "^3.0.3"

"@microsoft/[email protected]":
version "0.16.1"
resolved "https://registry.yarnpkg.com/@microsoft/tsdoc-config/-/tsdoc-config-0.16.1.tgz#4de11976c1202854c4618f364bf499b4be33e657"
integrity sha512-2RqkwiD4uN6MLnHFljqBlZIXlt/SaUT6cuogU1w2ARw4nKuuppSmR0+s+NC+7kXBQykd9zzu0P4HtBpZT5zBpQ==
dependencies:
"@microsoft/tsdoc" "0.14.1"
ajv "~6.12.6"
jju "~1.4.0"
resolve "~1.19.0"

"@microsoft/[email protected]":
version "0.14.1"
resolved "https://registry.yarnpkg.com/@microsoft/tsdoc/-/tsdoc-0.14.1.tgz#155ef21065427901994e765da8a0ba0eaae8b8bd"
integrity sha512-6Wci+Tp3CgPt/B9B0a3J4s3yMgLNSku6w5TV6mN+61C71UqsRBv2FUibBf3tPGlNxebgPHMEUzKpb1ggE8KCKw==

"@nodelib/[email protected]":
version "2.1.5"
resolved "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz"
Expand Down Expand Up @@ -2562,7 +2577,7 @@ aggregate-error@^3.0.0:
clean-stack "^2.0.0"
indent-string "^4.0.0"

ajv@^6.10.0, ajv@^6.12.3, ajv@^6.12.4:
ajv@^6.10.0, ajv@^6.12.3, ajv@^6.12.4, ajv@~6.12.6:
version "6.12.6"
resolved "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz"
integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
Expand Down Expand Up @@ -3072,11 +3087,6 @@ buffer@^5.2.1, buffer@^5.5.0:
base64-js "^1.3.1"
ieee754 "^1.1.13"

builtin-modules@^1.1.1:
version "1.1.1"
resolved "https://registry.npmjs.org/builtin-modules/-/builtin-modules-1.1.1.tgz"
integrity sha1-Jw8HbFpywC9bZaR9+Uxf46J4iS8=

builtin-modules@^3.1.0:
version "3.2.0"
resolved "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.2.0.tgz"
Expand Down Expand Up @@ -3217,7 +3227,7 @@ chalk@^1.1.3:
strip-ansi "^3.0.0"
supports-color "^2.0.0"

chalk@^2.0.0, chalk@^2.0.1, chalk@^2.3.0, chalk@^2.4.1, chalk@^2.4.2:
chalk@^2.0.0, chalk@^2.0.1, chalk@^2.4.1, chalk@^2.4.2:
version "2.4.2"
resolved "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz"
integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
Expand Down Expand Up @@ -3464,7 +3474,7 @@ combined-stream@^1.0.6, combined-stream@^1.0.8, combined-stream@~1.0.6:
dependencies:
delayed-stream "~1.0.0"

commander@^2.12.1, commander@^2.20.0:
commander@^2.20.0:
version "2.20.3"
resolved "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz"
integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
Expand Down Expand Up @@ -4539,6 +4549,14 @@ eslint-plugin-svelte3@^4.0.0:
resolved "https://registry.yarnpkg.com/eslint-plugin-svelte3/-/eslint-plugin-svelte3-4.0.0.tgz#3d4f3dcaec5761dac8bc697f81de3613b485b4e3"
integrity sha512-OIx9lgaNzD02+MDFNLw0GEUbuovNcglg+wnd/UY0fbZmlQSz7GlQiQ1f+yX0XvC07XPcDOnFcichqI3xCwp71g==

eslint-plugin-tsdoc@^0.2.16:
version "0.2.16"
resolved "https://registry.yarnpkg.com/eslint-plugin-tsdoc/-/eslint-plugin-tsdoc-0.2.16.tgz#a3d31fb9c7955faa3c66a43dd43da7635f1c5e0d"
integrity sha512-F/RWMnyDQuGlg82vQEFHQtGyWi7++XJKdYNn0ulIbyMOFqYIjoJOUdE6olORxgwgLkpJxsCJpJbTHgxJ/ggfXw==
dependencies:
"@microsoft/tsdoc" "0.14.1"
"@microsoft/tsdoc-config" "0.16.1"

eslint-scope@^5.1.1:
version "5.1.1"
resolved "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz"
Expand Down Expand Up @@ -5913,20 +5931,20 @@ is-color-stop@^1.0.0:
rgb-regex "^1.0.1"
rgba-regex "^1.0.0"

is-core-module@^2.1.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==
dependencies:
has "^1.0.3"

is-core-module@^2.2.0:
version "2.5.0"
resolved "https://registry.npmjs.org/is-core-module/-/is-core-module-2.5.0.tgz"
integrity sha512-TXCMSDsEHMEEZ6eCA8rwRDbLu55MRGmrctljsBX/2v1d9/GzqHOxW5c5oPSgrUt2vBFXebu9rGqckXGPWOlYpg==
dependencies:
has "^1.0.3"

is-core-module@^2.8.1:
version "2.8.1"
resolved "https://registry.npmjs.org/is-core-module/-/is-core-module-2.8.1.tgz"
integrity sha512-SdNCUs284hr40hFTFP6l0IfZ/RSrMXF3qgoRHd3/79unUTvrFO/JoXwkGm+5J/Oe3E/b5GsnG330uUNgRpu1PA==
dependencies:
has "^1.0.3"

is-date-object@^1.0.1:
version "1.0.4"
resolved "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.4.tgz"
Expand Down Expand Up @@ -7149,6 +7167,11 @@ jest@^27.5.1:
import-local "^3.0.2"
jest-cli "^27.5.1"

jju@~1.4.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/jju/-/jju-1.4.0.tgz#a3abe2718af241a2b2904f84a625970f389ae32a"
integrity sha1-o6vicYryQaKykE+EpiWXDzia4yo=

joycon@^3.0.1:
version "3.1.1"
resolved "https://registry.npmjs.org/joycon/-/joycon-3.1.1.tgz"
Expand Down Expand Up @@ -7951,7 +7974,7 @@ mkdirp-infer-owner@^2.0.0:
infer-owner "^1.0.4"
mkdirp "^1.0.3"

mkdirp@^0.5.1, mkdirp@^0.5.3, mkdirp@^0.5.4, mkdirp@^0.5.5, mkdirp@~0.5.1:
mkdirp@^0.5.1, mkdirp@^0.5.4, mkdirp@^0.5.5, mkdirp@~0.5.1:
version "0.5.5"
resolved "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz"
integrity sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==
Expand Down Expand Up @@ -8655,7 +8678,7 @@ path-key@^3.0.0, path-key@^3.1.0:
resolved "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz"
integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==

path-parse@^1.0.6, path-parse@^1.0.7:
path-parse@^1.0.6:
version "1.0.7"
resolved "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz"
integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
Expand Down Expand Up @@ -9653,14 +9676,13 @@ resolve@^1.1.7, resolve@^1.10.0, resolve@^1.16.1, resolve@^1.17.0, resolve@^1.19
is-core-module "^2.2.0"
path-parse "^1.0.6"

resolve@^1.3.2:
version "1.22.0"
resolved "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz"
integrity sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==
resolve@~1.19.0:
version "1.19.0"
resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.19.0.tgz#1af5bf630409734a067cae29318aac7fa29a267c"
integrity sha512-rArEXAgsBG4UgRGcynxWIWKFvh/XZCcS8UJdHhwy91zwAvCZIbcs+vAbflgBnNjYMs/i/i+/Ux6IZhML1yPvxg==
dependencies:
is-core-module "^2.8.1"
path-parse "^1.0.7"
supports-preserve-symlinks-flag "^1.0.0"
is-core-module "^2.1.0"
path-parse "^1.0.6"

restore-cursor@^2.0.0:
version "2.0.0"
Expand Down Expand Up @@ -9903,7 +9925,7 @@ saxes@^5.0.1:
dependencies:
xmlchars "^2.2.0"

"semver@2 || 3 || 4 || 5", semver@^5.3.0, semver@^5.5.0, semver@^5.6.0, semver@^5.7.1:
"semver@2 || 3 || 4 || 5", semver@^5.5.0, semver@^5.6.0, semver@^5.7.1:
version "5.7.1"
resolved "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz"
integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
Expand Down Expand Up @@ -10436,11 +10458,6 @@ supports-hyperlinks@^2.0.0:
has-flag "^4.0.0"
supports-color "^7.0.0"

supports-preserve-symlinks-flag@^1.0.0:
version "1.0.0"
resolved "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz"
integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==

svelte-check@^1.4.0:
version "1.6.0"
resolved "https://registry.npmjs.org/svelte-check/-/svelte-check-1.6.0.tgz"
Expand Down Expand Up @@ -10774,7 +10791,7 @@ ts-node@^7.0.1:
source-map-support "^0.5.6"
yn "^2.0.0"

tslib@^1.13.0, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
version "1.14.1"
resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz"
integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
Expand All @@ -10789,32 +10806,6 @@ tslib@^2.3.1:
resolved "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz"
integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==

tslint@^6.1.3:
version "6.1.3"
resolved "https://registry.npmjs.org/tslint/-/tslint-6.1.3.tgz"
integrity sha512-IbR4nkT96EQOvKE2PW/djGz8iGNeJ4rF2mBfiYaR/nvUWYKJhLwimoJKgjIFEIDibBtOevj7BqCRL4oHeWWUCg==
dependencies:
"@babel/code-frame" "^7.0.0"
builtin-modules "^1.1.1"
chalk "^2.3.0"
commander "^2.12.1"
diff "^4.0.1"
glob "^7.1.1"
js-yaml "^3.13.1"
minimatch "^3.0.4"
mkdirp "^0.5.3"
resolve "^1.3.2"
semver "^5.3.0"
tslib "^1.13.0"
tsutils "^2.29.0"

tsutils@^2.29.0:
version "2.29.0"
resolved "https://registry.npmjs.org/tsutils/-/tsutils-2.29.0.tgz"
integrity sha512-g5JVHCIJwzfISaXpXE1qvNalca5Jwob6FjI4AoPlqMusJ6ftFE7IkkFoMhVLRgK+4Kx3gkzb8UZK5t5yTTvEmA==
dependencies:
tslib "^1.8.1"

tsutils@^3.21.0:
version "3.21.0"
resolved "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz"
Expand Down