From 5947f7fd5be24882fb647151b063c02673c77d7b Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Tue, 15 Jan 2019 00:40:20 +0100 Subject: [PATCH] refactor(table): use DocumentFragment for faster DOM insertions (#14747) Reworks some code in the table that was creating elements in a loop to use a `DocumentFragment` so it only hits the DOM once, rather than doing so for each element. --- src/cdk/table/table.ts | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/cdk/table/table.ts b/src/cdk/table/table.ts index b5f2aa7019b..4919071119b 100644 --- a/src/cdk/table/table.ts +++ b/src/cdk/table/table.ts @@ -965,6 +965,9 @@ export class CdkTable implements AfterContentChecked, CollectionViewer, OnDes /** Adds native table sections (e.g. tbody) and moves the row outlets into them. */ private _applyNativeTableSections() { + // @breaking-change 8.0.0 remove the `|| document` once the `_document` is a required param. + const documentRef = this._document || document; + const documentFragment = documentRef.createDocumentFragment(); const sections = [ {tag: 'thead', outlet: this._headerRowOutlet}, {tag: 'tbody', outlet: this._rowOutlet}, @@ -972,12 +975,13 @@ export class CdkTable implements AfterContentChecked, CollectionViewer, OnDes ]; for (const section of sections) { - // @breaking-change 8.0.0 remove the `|| document` once the `_document` is a required param. - const documentRef = this._document || document; const element = documentRef.createElement(section.tag); element.appendChild(section.outlet.elementRef.nativeElement); - this._elementRef.nativeElement.appendChild(element); + documentFragment.appendChild(element); } + + // Use a DocumentFragment so we don't hit the DOM on each iteration. + this._elementRef.nativeElement.appendChild(documentFragment); } /**