Merge pull request #17144 from ckeditor/ck/performance-research

Other (engine): Performance improvements. Avoided creating unnecessary arrays. Closes #17143.

packages/ckeditor5-engine/src/model/nodelist.ts

@@ -80,7 +80,17 @@ export default class NodeList implements Iterable<Node> {
 	public getNodeStartOffset( node: Node ): number | null {
 		const index = this.getNodeIndex( node );
 
-		return index === null ? null : this._nodes.slice( 0, index ).reduce( ( sum, node ) => sum + node.offsetSize, 0 );
+		if ( index === null ) {
+			return null;
+		}
+
+		let sum = 0;
+
+		for ( let i = 0; i < index; i++ ) {
+			sum += this._nodes[ i ].offsetSize;
+		}
+
+		return sum;
 	}
 
 	/**

packages/ckeditor5-engine/src/view/domconverter.ts

@@ -233,7 +233,7 @@ export default class DomConverter {
 			this._domToViewMapping.delete( domElement );
 			this._viewToDomMapping.delete( viewElement );
 
-			for ( const child of Array.from( domElement.children ) ) {
+			for ( const child of domElement.children ) {
 				this.unbindDomElement( child as DomElement );
 			}
 		}

packages/ckeditor5-engine/src/view/renderer.ts

@@ -585,21 +585,24 @@ export default class Renderer extends /* #__PURE__ */ ObservableMixin() {
 			return;
 		}
 
-		const domAttrKeys = Array.from( ( domElement as DomElement ).attributes ).map( attr => attr.name );
-		const viewAttrKeys = viewElement.getAttributeKeys();
-
-		// Add or overwrite attributes.
-		for ( const key of viewAttrKeys ) {
-			this.domConverter.setDomElementAttribute( domElement as DomElement, key, viewElement.getAttribute( key )!, viewElement );
-		}
+		// Remove attributes from DOM elements if they do not exist in the view.
+		//
+		// Note: It is important to first remove DOM attributes and then set new ones, because some view attributes may be renamed
+		// as they are set on DOM (due to unsafe attributes handling). If we set the view attribute first, and then remove
+		// non-existing DOM attributes, then we would remove the attribute that we just set.
+		for ( const domAttr of ( domElement as DomElement ).attributes ) {
+			const key = domAttr.name;
 
-		// Remove from DOM attributes which do not exists in the view.
-		for ( const key of domAttrKeys ) {
 			// All other attributes not present in the DOM should be removed.
 			if ( !viewElement.hasAttribute( key ) ) {
 				this.domConverter.removeDomElementAttribute( domElement as DomElement, key );
 			}
 		}
+
+		// Add or overwrite attributes.
+		for ( const key of viewElement.getAttributeKeys() ) {
+			this.domConverter.setDomElementAttribute( domElement as DomElement, key, viewElement.getAttribute( key )!, viewElement );
+		}
 	}
 
 	/**

packages/ckeditor5-engine/src/view/stylesmap.ts

@@ -624,23 +624,22 @@ export class StylesProcessor {
 	 * @param styles Object holding normalized styles.
 	 */
 	public getStyleNames( styles: Styles ): Array<string> {
+		const styleNamesKeysSet = new Set<string>();
+
 		// Find all extractable styles that have a value.
-		const expandedStyleNames = Array.from( this._consumables.keys() ).filter( name => {
+		for ( const name of this._consumables.keys() ) {
 			const style = this.getNormalized( name, styles );
 
-			if ( style && typeof style == 'object' ) {
-				return Object.keys( style ).length;
+			if ( style && ( typeof style != 'object' || Object.keys( style ).length ) ) {
+				styleNamesKeysSet.add( name );
 			}
-
-			return style;
-		} );
+		}
 
 		// For simple styles (for example `color`) we don't have a map of those styles
 		// but they are 1 to 1 with normalized object keys.
-		const styleNamesKeysSet = new Set( [
-			...expandedStyleNames,
-			...Object.keys( styles )
-		] );
+		for ( const name of Object.keys( styles ) ) {
+			styleNamesKeysSet.add( name );
+		}
 
 		return Array.from( styleNamesKeysSet );
 	}