Improve initial rendering performance

client-data/js/board.js

@@ -166,37 +166,44 @@ Tools.drawAndSend = function (data) {
 //is loaded. keys : the name of the tool, values : array of messages for this tool
 Tools.pendingMessages = {};
 
-//Receive draw instructions from the server
-Tools.socket.on("broadcast", function (message) {
-	function messageForTool(message) {
-		var name = message.tool,
-			tool = Tools.list[name];
-		if (tool) {
-			Tools.applyHooks(Tools.messageHooks, message);
-			tool.draw(message, false);
-		} else {
-			///We received a message destinated to a tool that we don't have
-			//So we add it to the pending messages
-			if (!Tools.pendingMessages[name]) Tools.pendingMessages[name] = [message];
-			else Tools.pendingMessages[name].push(message);
-		}
+// Send a message to the corresponding tool
+function messageForTool(message) {
+	var name = message.tool,
+		tool = Tools.list[name];
+	if (tool) {
+		Tools.applyHooks(Tools.messageHooks, message);
+		tool.draw(message, false);
+	} else {
+		///We received a message destinated to a tool that we don't have
+		//So we add it to the pending messages
+		if (!Tools.pendingMessages[name]) Tools.pendingMessages[name] = [message];
+		else Tools.pendingMessages[name].push(message);
 	}
+}
 
-	//Check if the message is in the expected format
-	if (message.tool) {
-		messageForTool(message);
-	}
-	if (message._children) {
-		for (var i = 0; i < message._children.length; i++) {
-			//Apply hooks on children too
-			var msg = message._children[i];
-			messageForTool(msg);
-		}
+// Apply the function to all arguments by batches
+function batchCall(fn, args) {
+	var BATCH_SIZE = 512;
+	if (args.length > 0) {
+		var batch = args.slice(0, BATCH_SIZE);
+		var rest = args.slice(BATCH_SIZE);
+		for (var i = 0; i < batch.length; i++) fn(batch[i]);
+		requestAnimationFrame(batchCall.bind(null, fn, rest));
 	}
+}
+
+// Call messageForTool recursively on the message and its children
+function handleMessage(message) {
+	//Check if the message is in the expected format
+	if (message.tool) messageForTool(message);
+	if (message._children) batchCall(handleMessage, message._children);
 	if (!message.tool && !message._children) {
 		console.error("Received a badly formatted message (no tool). ", message);
 	}
-});
+}
+
+//Receive draw instructions from the server
+Tools.socket.on("broadcast", handleMessage);
 
 Tools.unreadMessagesCount = 0;
 Tools.newUnreadMessage = function () {

server/boardData.js

@@ -138,13 +138,14 @@ BoardData.prototype.get = function (id, children) {
  * @param {string} [id] - Identifier of the first element to get.
  * @param {BoardData~processData} callback - Function to be called with each piece of data read
  */
-BoardData.prototype.getAll = function (id, callback) {
-	if (!callback) callback = id;
+BoardData.prototype.getAll = function (id) {
+	var results = [];
 	for (var i in this.board) {
 		if (!id || i > id) {
-			callback(this.board[i]);
+			results.push(this.board[i]);
 		}
 	}
+	return results;
 };
 
 /**

server/sockets.js

@@ -50,9 +50,7 @@ function socketConnection(socket) {
 
 		//Send all the board's data as soon as it's loaded
 		var sendIt = function () {
-			board_data.getAll(function (data) {
-				socket.emit("broadcast", data);
-			});
+			socket.emit("broadcast", { _children: board_data.getAll() });
 		};
 
 		if (board_data.ready) sendIt();