⚡️ Fix performance issue when rendering hundreds of custom elements

11ways · Nov 15, 2023 · 997d6bc · 997d6bc
1 parent 11b0864
commit 997d6bc
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 14 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,7 @@
 * Automatically set the `force_async` option of the `Hawkejs.series` method to false
 * Use as many Swift pledges as possible
 * Improve performance of enabling styles/scripts in the browser
+* Fix performance issue when rendering hundreds of custom elements
 
 ## 2.3.14 (2023-10-15)
 

diff --git a/lib/core/base.js b/lib/core/base.js
@@ -104,9 +104,11 @@ Base.setProperty(function hawkejs() {
 
 const FN_NEXT_IMMEDIATE = Object.create(Fn);
 FN_NEXT_IMMEDIATE[Blast.asyncScheduler] = Blast.nextGroupedImmediate;
+FN_NEXT_IMMEDIATE[Blast.flowPledgeClass] = Classes.Pledge.Swift;
 
 const FN_SYNC = Object.create(Fn);
 FN_SYNC[Blast.asyncScheduler] = Blast.callNow;
+FN_SYNC[Blast.flowPledgeClass] = Classes.Pledge.Swift;
 
 /**
  * Tokenize Hawkejs code
@@ -195,7 +197,7 @@ addToNs(function series(...args) {
 	let type = typeof args[0];
 
 	// Implicitly set the `force_async` option
-	if (type != 'number' && type != 'boolean') {
+	if (type != 'boolean') {
 		args.unshift(false);
 	}
 
@@ -215,10 +217,16 @@ addToNs(function parallel(...args) {
 
 	// Implicitly set the `force_async` option
 	// (To true for now)
-	if (type != 'number' && type != 'boolean') {
+	if (type != 'boolean') {
 		args.unshift(true);
 	}
 
+	type = typeof args[1];
+
+	if (type != 'number') {
+		args.splice(1, 0, Hawkejs.Hawkejs.prototype.parallel_task_limit);
+	}
+
 	return FN_NEXT_IMMEDIATE.parallel(...args);
 });
 

diff --git a/lib/core/block_buffer.js b/lib/core/block_buffer.js
@@ -604,13 +604,13 @@ BlockBuffer.setMethod(function assembleHTML() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    2.2.16
- * @version  2.2.16
+ * @version  2.3.15
  *
  * @param    {Array}     tasks
  * @param    {Function}  callback
  */
-BlockBuffer.setMethod(function doTasksGrouped(tasks, callback) {
-	return this.renderer.doTasksGrouped(tasks, callback);
+BlockBuffer.setMethod(function doTasksGrouped(task_limit, tasks, callback) {
+	return this.renderer.doTasksGrouped(task_limit, tasks, callback);
 });
 
 /**
@@ -663,7 +663,7 @@ BlockBuffer.setMethod(function assemble() {
  *
  * @author   Jelle De Loecker   <jelle@develry.be>
  * @since    1.0.0
- * @version  2.3.1
+ * @version  2.3.15
  *
  * @param    {Boolean}  join_others
  *
@@ -679,6 +679,11 @@ BlockBuffer.setMethod(function _assemble(join_others) {
 		join_others = true;
 	}
 
+	// We increase the parallel task limit a bit, since this is a special case:
+	// blocks can contain *a lot* of lines, and they can be CustomElements
+	// needing to do some (async) rendering.
+	let task_limit = this.renderer.hawkejs.parallel_task_limit * 6;
+
 	if (join_others && this.other_instances.length && this.options.content == 'push') {
 
 		tasks = [];
@@ -716,7 +721,7 @@ BlockBuffer.setMethod(function _assemble(join_others) {
 			return next();
 		}
 
-		that.doTasksGrouped(line_tasks, next);
+		that.doTasksGrouped(task_limit, line_tasks, next);
 
 	}, function assembleLines(next) {
 
@@ -737,7 +742,7 @@ BlockBuffer.setMethod(function _assemble(join_others) {
 		let more_tasks = Hawkejs.prepareLineTasks(that.lines, that.renderer, false, true);
 
 		if (more_tasks.length) {
-			that.doTasksGrouped(more_tasks, next);
+			that.doTasksGrouped(task_limit, more_tasks, next);
 		} else {
 			next();
 		}

diff --git a/lib/core/hawkejs.js b/lib/core/hawkejs.js
@@ -319,7 +319,7 @@ Main.setProperty('app_version', '');
  *
  * @type     {Number}
  */
-Main.setProperty('parallel_task_limit', Blast.isBrowser ? 24 : 6);
+Main.setProperty('parallel_task_limit', Blast.isBrowser ? 24 : 8);
 
 /**
  * Create an HTML element
@@ -2405,7 +2405,7 @@ defStat(function prepareLineTasks(lines, renderer, force, assembling) {
 	if (pre_tasks.length) {
 
 		if (final_tasks.length) {
-			let pre_task_pledge = Hawkejs.parallel(false, task_limit, pre_tasks);
+			let pre_task_pledge = Hawkejs.parallel(false, task_limit * 3, pre_tasks);
 			let after_tasks = final_tasks;
 
 			final_tasks = [

diff --git a/lib/core/renderer.js b/lib/core/renderer.js
@@ -1299,12 +1299,18 @@ Renderer.setMethod(function renderTemplate(templates, variables, main_name_modif
  *
  * @param    {Array}   tasks
  */
-Renderer.setMethod(function doTasksGrouped(tasks, callback) {
+Renderer.setMethod(function doTasksGrouped(task_limit, tasks, callback) {
+
+	if (typeof task_limit != 'number') {
+		callback = tasks;
+		tasks = task_limit;
+		task_limit = this.hawkejs.parallel_task_limit;
+	}
 
 	// No need to group tasks on the server-side, it can handle them fast enough
 	// and the grouping actually makes it slower
 	if (Blast.isNode) {
-		Hawkejs.parallel(false, this.hawkejs.parallel_task_limit, tasks).done(callback);
+		Hawkejs.parallel(false, task_limit, tasks).done(callback);
 		return;
 	}
 
@@ -1323,7 +1329,7 @@ Renderer.setMethod(function doTasksGrouped(tasks, callback) {
 
 	// If there are more than 3 tasks already, do them immediately
 	if (tasks.length > 3) {
-		Fn.parallel(false, this.hawkejs.parallel_task_limit, tasks).done(callback);
+		Hawkejs.parallel(false, task_limit, tasks).done(callback);
 		return;
 	}
 
@@ -1337,7 +1343,7 @@ Renderer.setMethod(function doTasksGrouped(tasks, callback) {
 
 		// Do the grouped tasks
 		for (let pair of grouped_tasks) {
-			Fn.parallel(false, pair[0]).done(pair[1]);
+			Hawkejs.parallel(false, task_limit, pair[0]).done(pair[1]);
 		}
 	});
 });