Add a slimDOM option to strip out unnecessary parts of the DOM (#36)

* Add a `slimDOM` option to strip out unnecessary parts of the DOM in terms of replay

 - <script> tags in the <head> take up unnecessary storage space and are often injected semi randomly to become a source of unnecessary variation between recordings of the same thing
 - comment tags can be stripped out without affecting display
 - future: this option could also turn on more aggressive stripping, e.g. elements that are hidden by CSS (assuming we can handle them becoming visible after mutation events)

* Mark nodes ignored due to slimDOM option, so that they can also be ignored by the mutation observer in rrweb

* Introducing the `ignored` attribute violates the `serializedNodeWithId` type

* slimDOM: Strip out whitespace nodes from <head> element as they have no effect but take up space

 - these would otherwise have to be merged after <script> elements are removed; for statcounter usecase, removing
   <script> elements is no good if there is still a trace of their presence due to the white space (and hence a variant <head> node is still produced)
 - I explored a more radical stripping of all white space nodes, but there is a problem if parent node is <pre> or otherwise rendered with `white-space: pre` and similar.
   detecting applied styles with getComputedStyle would be very expensive (I haven't measured it though)

* Export IGNORED_NODE as a constant instead of relying on the hard-to-grok `-2`

* Remove <link rel=preload as=script> which are similarly as useless as <script> tags

* Make slimDOM configurable with the expecations that `slimDOMOptions: true` will only enable non-destructive options (so not all options may be turned on)

* Expand slimDOM to add options to remove more elements from the <head> that should not be necessary in the replayer context
This commit is contained in:
Eoghan Murray
2026-04-01 12:00:00 +08:00
committed by GitHub
parent d8ba0cc8e2
commit 71b6e683c0
3 changed files with 139 additions and 0 deletions

View File

@@ -2,6 +2,7 @@ import snapshot, {
serializeNodeWithId,
transformAttribute,
visitSnapshot,
IGNORED_NODE,
} from './snapshot';
import rebuild, { buildNodeWithSN, addHoverClass } from './rebuild';
export * from './types';
@@ -14,4 +15,5 @@ export {
addHoverClass,
transformAttribute,
visitSnapshot,
IGNORED_NODE,
};