xuguopeng/rrweb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

gc virtual style map when DOM has been removed

Browse Source
This commit is contained in:
Yanzhen Yu
2021-10-02 22:15:46 +08:00
parent 53492c1ee4
commit fe4342e8b8
2 changed files with 16 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/rrweb/src/replay/index.ts
View File

@@ -922,7 +922,6 @@ export class Replayer {
case MouseInteractions.TouchStart: case MouseInteractions.TouchStart:
case MouseInteractions.TouchEnd: case MouseInteractions.TouchEnd:
if (isSync) { if (isSync) {
let touchActive: boolean | undefined;
if (d.type === MouseInteractions.TouchStart) { if (d.type === MouseInteractions.TouchStart) {
this.touchActive = true; this.touchActive = true;
} else if (d.type === MouseInteractions.TouchEnd) { } else if (d.type === MouseInteractions.TouchEnd) {
@@ -1263,6 +1262,9 @@ export class Replayer {
} }
return this.warnNodeNotFound(d, mutation.id); return this.warnNodeNotFound(d, mutation.id);
} }
if (this.virtualStyleRulesMap.has(target)) {
this.virtualStyleRulesMap.delete(target);
}
let parent: INode | null | ShadowRoot = this.mirror.getNode( let parent: INode | null | ShadowRoot = this.mirror.getNode(
mutation.parentId, mutation.parentId,
); );

25
packages/rrweb/src/replay/virtual-styles.ts
View File

@@ -65,18 +65,22 @@ export function applyVirtualStyleRulesToNode(
storedRules: VirtualStyleRules, storedRules: VirtualStyleRules,
styleNode: HTMLStyleElement, styleNode: HTMLStyleElement,
) { ) {
const { sheet } = styleNode;
if (!sheet) {
// styleNode without sheet means the DOM has been removed
// so the rules no longer need to be applied
return;
}
storedRules.forEach((rule) => { storedRules.forEach((rule) => {
if (rule.type === StyleRuleType.Insert) { if (rule.type === StyleRuleType.Insert) {
try { try {
if (Array.isArray(rule.index)) { if (Array.isArray(rule.index)) {
const { positions, index } = getPositionsAndIndex(rule.index); const { positions, index } = getPositionsAndIndex(rule.index);
const nestedRule = getNestedRule( const nestedRule = getNestedRule(sheet.cssRules, positions);
styleNode.sheet!.cssRules,
positions,
);
nestedRule.insertRule(rule.cssText, index); nestedRule.insertRule(rule.cssText, index);
} else { } else {
styleNode.sheet?.insertRule(rule.cssText, rule.index); sheet.insertRule(rule.cssText, rule.index);
} }
} catch (e) { } catch (e) {
/** /**
@@ -88,13 +92,10 @@ export function applyVirtualStyleRulesToNode(
try { try {
if (Array.isArray(rule.index)) { if (Array.isArray(rule.index)) {
const { positions, index } = getPositionsAndIndex(rule.index); const { positions, index } = getPositionsAndIndex(rule.index);
const nestedRule = getNestedRule( const nestedRule = getNestedRule(sheet.cssRules, positions);
styleNode.sheet!.cssRules,
positions,
);
nestedRule.deleteRule(index || 0); nestedRule.deleteRule(index || 0);
} else { } else {
styleNode.sheet?.deleteRule(rule.index); sheet.deleteRule(rule.index);
} }
} catch (e) { } catch (e) {
/** /**
@@ -106,13 +107,13 @@ export function applyVirtualStyleRulesToNode(
restoreSnapshotOfStyleRulesToNode(rule.cssTexts, styleNode); restoreSnapshotOfStyleRulesToNode(rule.cssTexts, styleNode);
} else if (rule.type === StyleRuleType.SetProperty) { } else if (rule.type === StyleRuleType.SetProperty) {
const nativeRule = (getNestedRule( const nativeRule = (getNestedRule(
styleNode.sheet!.cssRules, sheet.cssRules,
rule.index, rule.index,
) as unknown) as CSSStyleRule; ) as unknown) as CSSStyleRule;
nativeRule.style.setProperty(rule.property, rule.value, rule.priority); nativeRule.style.setProperty(rule.property, rule.value, rule.priority);
} else if (rule.type === StyleRuleType.RemoveProperty) { } else if (rule.type === StyleRuleType.RemoveProperty) {
const nativeRule = (getNestedRule( const nativeRule = (getNestedRule(
styleNode.sheet!.cssRules, sheet.cssRules,
rule.index, rule.index,
) as unknown) as CSSStyleRule; ) as unknown) as CSSStyleRule;
nativeRule.style.removeProperty(rule.property); nativeRule.style.removeProperty(rule.property);