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.

Author: crisbeto

src/cdk/table/table.ts

@@ -965,19 +965,23 @@ export class CdkTable<T> 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},
       {tag: 'tfoot', outlet: this._footerRowOutlet},
     ];
 
     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);
   }
 
   /**