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); } /**