angularjs optimize ng-repeat with many ng-if ng-show inside it - angularjs

Question

I use AngularJS to create a page where a user can correct a text (for example grammar, typo ... ).
I cannot use a Textarea because I want to keep trace about changes and let user rollback a correction on each word.
The following code work but it take a few seconds to render with page freeze, specialy on IE like 30 seconds), the text to correct can be very long like in the example.
I use a ng-repeat to display the text (which is an array of word). For each word I text in html if it is punctuation or a <br> or an editable word.
Is there a way to optimize this or to create in a JS way (like a compile html or anything faster)?
PLUNKER
HTML
<div ng-controller="Ctrl1">
Correct the text
<span ng-repeat="word in words track by $index">
<br ng-if="word.br"/>
<span ng-show="(!word.br)&& !word.edited">
<span ng-if="word.editable" class="correct-span" ng-click="word.edited = true">{{word.u}}</span>
<span ng-if="!word.editable">{{word.u}}</span>
</span>
<span class="my-danger" ng-show="(!word.br)&& word.edited">
<input type="text" ng-model="word.u">
<button ng-click="word.edited = false;word.u = word.o">X</button>
</span>
</span>
</div>
My controller :
var myApp = angular.module('myApp', []);
myApp.controller('Ctrl1', ['$scope', function($scope) {
function tools_isString(myVar){
return (typeof myVar == 'string' || myVar instanceof String);
}
/***
* test if object if defined
* #param object
* #returns {boolean}
*/
function tools_defined(object){
return (( typeof object !== undefined) && ( typeof object !== 'undefined') && ( object !== null ) && (object !== "")) ;
}
/**
* test if a word is in array
* #param mot : string
* #param tableau : array list
* #returns {boolean}
*/
function tools_inArray(word, array) {
if(tools_defined(array)&&tools_defined(word)) {
var length = array.length;
if (tools_isString(word)) {
word = word.toLowerCase();
}
for (var i = 0; i < length; i++) {
if (tools_isString(array[i])) {
array[i] = (array[i]).toLowerCase();
}
if (array[i] == word) return true;
}
}
return false;
}
function escapeRegExp(string) {
return string.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
}
function tools_replaceAll(str, find, replace) {
if(str == null ){
return null
}
return str.replace(new RegExp(escapeRegExp(find), 'g'), replace);
}
var prepareTextToCorrect = function(inputstring){
//encode new lines
inputstring = tools_replaceAll(inputstring,"<br/>","*br*");
inputstring = tools_replaceAll(inputstring,"<br>","*br*");
// unescape
inputstring = inputstring.replace(/&(lt|gt);/g, function (strMatch, p1){
return (p1 == "lt")? "<" : ">";
});
// remove all the hmtl tags
var rex = /(<([^>]+)>)|(<([^>]+)>)/ig;
inputstring = inputstring.replace(rex , "");
// re encode new lines
inputstring = tools_replaceAll(inputstring,"*br*"," <br/> ");
// separating punctuation from words
var ponctuations = [",","?",",",";",".",":","!","-","_","(",")","«","»","—"];
for(var p in ponctuations){
inputstring = tools_replaceAll(inputstring,ponctuations[p]," "+ponctuations[p]);
}
inputstring = tools_replaceAll(inputstring," "," ");
inputstring = tools_replaceAll(inputstring," "," ");
var elements = inputstring.split(" ");
var res = [];
/**
* "o" : original word
* "u" : word edited by user
* "edited" : if user edited this word
* "editable" : if the word can be edited ( ponctuation and <br> cannot )
*/
for(var i in elements){
if(elements[i].length>0) {
if(elements[i] == "<br/>") {
res.push({
"o": null, "u": null, "edited": false, "br":true
});
} else if (tools_inArray(elements[i], ponctuations)) {
res.push({
"o": elements[i], "u": elements[i], "edited": false,"editable": false , "br":false
});
}else{
res.push({
"o": elements[i], "u": elements[i], "edited": false,"editable": true , "br":false
});
}
}
}
return res ;
};
var text = "Stack Overflow is a question and answer site for professional and enthusiast programmers. It's built and run by you as part of the Stack Exchange network of Q&A sites. With your help, we're working together to build a library of detailed answers to every question about programming.<br/><br/>We're a little bit different from other sites. Here's how:<br/>Ask questions, get answers, no distractions<br/><br/>This site is all about getting answers. It's not a discussion forum. There's no chit-chat.<br/><br/>Just questions...<br/>...and answers.<br/>Good answers are voted up and rise to the top.<br/><br/>The best answers show up first so that they are always easy to find.<br/>accept<br/><br/>The person who asked can mark one answer as accepted.<br/><br/>Accepting doesn't mean it's the best answer, it just means that it worked for the person who asked.<br/>Do Swift-based applications work on OS X 10.9/iOS 7 and lower?<br/>up vote 14 down vote favorite<br/><br/>Will Swift-based applications work on OS X 10.9 (Mavericks)/iOS 7 and lower?<br/><br/>For example, I have a machine running OS X 10.8 (Mountain Lion), and I am wondering if an application I write in Swift will run on it.<br/>ios osx swift<br/>asked Jun 2 '14 at 19:25<br/>MeIr<br/>3,27752557<br/>2 Answers<br/>up vote 4 down vote accept<br/><br/>Swift code can be deployed to OS X 10.9 and iOS 7.0. It will usually crash at launch on older OS versions.<br/>answered Jun 3 '14 at 8:25<br/>Greg Parker<br/>6,21011118<br/>up vote 3 down vote<br/><br/>Apple has announced that Swift apps will be backward compatible with iOS 7 and OS X Mavericks. The WWDC app is written in Swift.<br/>answered Jun 3 '14 at 0:03<br/>Ben Gottlieb<br/>73.3k19161166<br/>Get answers to practical, detailed questions<br/><br/>Focus on questions about an actual problem you have faced. Include details about what you have tried and exactly what you are trying to do.<br/><br/>Ask about...<br/><br/>Specific programming problems<br/>Software algorithms<br/>Coding techniques<br/>Software development tools<br/><br/>Not all questions work well in our format. Avoid questions that are primarily opinion-based, or that are likely to generate discussion rather than answers.<br/><br/>Questions that need improvement may be closed until someone fixes them.<br/><br/>Don't ask about...<br/><br/>Questions you haven't tried to find an answer for (show your work!)<br/>Product or service recommendations or comparisons<br/>Requests for lists of things, polls, opinions, discussions, etc.<br/>Anything not directly related to writing computer programs<br/><br/>Tags make it easy to find interesting questions<br/><br/>Stack Overflow is a question and answer site for professional and enthusiast programmers. It's built and run by you as part of the Stack Exchange network of Q&A sites. With your help, we're working together to build a library of detailed answers to every question about programming.<br/><br/>We're a little bit different from other sites. Here's how:<br/>Ask questions, get answers, no distractions<br/><br/>This site is all about getting answers. It's not a discussion forum. There's no chit-chat.<br/><br/>Just questions...<br/>...and answers.<br/>Good answers are voted up and rise to the top.<br/><br/>The best answers show up first so that they are always easy to find.<br/>accept<br/><br/>The person who asked can mark one answer as accepted.<br/><br/>Accepting doesn't mean it's the best answer, it just means that it worked for the person who asked.<br/>Do Swift-based applications work on OS X 10.9/iOS 7 and lower?<br/>up vote 14 down vote favorite<br/><br/>Will Swift-based applications work on OS X 10.9 (Mavericks)/iOS 7 and lower?<br/><br/>For example, I have a machine running OS X 10.8 (Mountain Lion), and I am wondering if an application I write in Swift will run on it.<br/>ios osx swift<br/>asked Jun 2 '14 at 19:25<br/>MeIr<br/>3,27752557<br/>2 Answers<br/>up vote 4 down vote accept<br/><br/>Swift code can be deployed to OS X 10.9 and iOS 7.0. It will usually crash at launch on older OS versions.<br/>answered Jun 3 '14 at 8:25<br/>Greg Parker<br/>6,21011118<br/>up vote 3 down vote<br/><br/>Apple has announced that Swift apps will be backward compatible with iOS 7 and OS X Mavericks. The WWDC app is written in Swift.<br/>answered Jun 3 '14 at 0:03<br/>Ben Gottlieb<br/>73.3k19161166<br/>Get answers to practical, detailed questions<br/><br/>Focus on questions about an actual problem you have faced. Include details about what you have tried and exactly what you are trying to do.<br/><br/>Ask about...<br/><br/>Specific programming problems<br/>Software algorithms<br/>Coding techniques<br/>Software development tools<br/><br/>Not all questions work well in our format. Avoid questions that are primarily opinion-based, or that are likely to generate discussion rather than answers.<br/><br/>Questions that need improvement may be closed until someone fixes them.<br/><br/>Don't ask about...<br/><br/>Questions you haven't tried to find an answer for (show your work!)<br/>Product or service recommendations or comparisons<br/>Requests for lists of things, polls, opinions, discussions, etc.<br/>Anything not directly related to writing computer programs<br/><br/>Tags make it easy to find interesting questions<br/><br/>Stack Overflow is a question and answer site for professional and enthusiast programmers. It's built and run by you as part of the Stack Exchange network of Q&A sites. With your help, we're working together to build a library of detailed answers to every question about programming.<br/><br/>We're a little bit different from other sites. Here's how:<br/>Ask questions, get answers, no distractions<br/><br/>This site is all about getting answers. It's not a discussion forum. There's no chit-chat.<br/><br/>Just questions...<br/>...and answers.<br/>Good answers are voted up and rise to the top.<br/><br/>The best answers show up first so that they are always easy to find.<br/>accept<br/><br/>The person who asked can mark one answer as accepted.<br/><br/>Accepting doesn't mean it's the best answer, it just means that it worked for the person who asked.<br/>Do Swift-based applications work on OS X 10.9/iOS 7 and lower?<br/>up vote 14 down vote favorite<br/><br/>Will Swift-based applications work on OS X 10.9 (Mavericks)/iOS 7 and lower?<br/><br/>For example, I have a machine running OS X 10.8 (Mountain Lion), and I am wondering if an application I write in Swift will run on it.<br/>ios osx swift<br/>asked Jun 2 '14 at 19:25<br/>MeIr<br/>3,27752557<br/>2 Answers<br/>up vote 4 down vote accept<br/><br/>Swift code can be deployed to OS X 10.9 and iOS 7.0. It will usually crash at launch on older OS versions.<br/>answered Jun 3 '14 at 8:25<br/>Greg Parker<br/>6,21011118<br/>up vote 3 down vote<br/><br/>Apple has announced that Swift apps will be backward compatible with iOS 7 and OS X Mavericks. The WWDC app is written in Swift.<br/>answered Jun 3 '14 at 0:03<br/>Ben Gottlieb<br/>73.3k19161166<br/>Get answers to practical, detailed questions<br/><br/>Focus on questions about an actual problem you have faced. Include details about what you have tried and exactly what you are trying to do.<br/><br/>Ask about...<br/><br/>Specific programming problems<br/>Software algorithms<br/>Coding techniques<br/>Software development tools<br/><br/>Not all questions work well in our format. Avoid questions that are primarily opinion-based, or that are likely to generate discussion rather than answers.<br/><br/>Questions that need improvement may be closed until someone fixes them.<br/><br/>Don't ask about...<br/><br/>Questions you haven't tried to find an answer for (show your work!)<br/>Product or service recommendations or comparisons<br/>Requests for lists of things, polls, opinions, discussions, etc.<br/>Anything not directly related to writing computer programs<br/><br/>Tags make it easy to find interesting questions<br/><br/>Stack Overflow is a question and answer site for professional and enthusiast programmers. It's built and run by you as part of the Stack Exchange network of Q&A sites. With your help, we're working together to build a library of detailed answers to every question about programming.<br/><br/>We're a little bit different from other sites. Here's how:<br/>Ask questions, get answers, no distractions<br/><br/>This site is all about getting answers. It's not a discussion forum. There's no chit-chat.<br/><br/>Just questions...<br/>...and answers.<br/>Good answers are voted up and rise to the top.<br/><br/>The best answers show up first so that they are always easy to find.<br/>accept<br/><br/>The person who asked can mark one answer as accepted.<br/><br/>Accepting doesn't mean it's the best answer, it just means that it worked for the person who asked.<br/>Do Swift-based applications work on OS X 10.9/iOS 7 and lower?<br/>up vote 14 down vote favorite<br/><br/>Will Swift-based applications work on OS X 10.9 (Mavericks)/iOS 7 and lower?<br/><br/>For example, I have a machine running OS X 10.8 (Mountain Lion), and I am wondering if an application I write in Swift will run on it.<br/>ios osx swift<br/>asked Jun 2 '14 at 19:25<br/>MeIr<br/>3,27752557<br/>2 Answers<br/>up vote 4 down vote accept<br/><br/>Swift code can be deployed to OS X 10.9 and iOS 7.0. It will usually crash at launch on older OS versions.<br/>answered Jun 3 '14 at 8:25<br/>Greg Parker<br/>6,21011118<br/>up vote 3 down vote<br/><br/>Apple has announced that Swift apps will be backward compatible with iOS 7 and OS X Mavericks. The WWDC app is written in Swift.<br/>answered Jun 3 '14 at 0:03<br/>Ben Gottlieb<br/>73.3k19161166<br/>Get answers to practical, detailed questions<br/><br/>Focus on questions about an actual problem you have faced. Include details about what you have tried and exactly what you are trying to do.<br/><br/>Ask about...<br/><br/>Specific programming problems<br/>Software algorithms<br/>Coding techniques<br/>Software development tools<br/><br/>Not all questions work well in our format. Avoid questions that are primarily opinion-based, or that are likely to generate discussion rather than answers.<br/><br/>Questions that need improvement may be closed until someone fixes them.<br/><br/>Don't ask about...<br/><br/>Questions you haven't tried to find an answer for (show your work!)<br/>Product or service recommendations or comparisons<br/>Requests for lists of things, polls, opinions, discussions, etc.<br/>Anything not directly related to writing computer programs<br/><br/>Tags make it easy to find interesting questions<br/><br/>" ;
$scope.words = prepareTextToCorrect(text) ;
}]);

Answer 1

Try using ng-if instead of ng-show in your <span> tags. In such a way the browser does not need to render all the DOM nodes that you use when the word is edited. With ng-show the nodes are rendered and then hidden from the DOM using CSS. This means that the browser has to render nodes that you potentially do not use, it is highly probable that you only need to change few words and not the entire document! Try to see if this can improve the rendering time.

Answer 2

Whatever the front-end framework, tracking each word of a text is going to put the browser on its knees, no matter if you have V8, Turbo, 4x4 or whatever.
Just picture the number of nodes. Take a deep deep look at your DOM element, just one of your ng-if spans in your case, and imagine each one of its endless list of attributes being tracked. But you probably already know.
With angular 1.x, you can check if a textarea is $dirty on mouseup, and/or blur, and/on mousemove with a simple directive.
Just wire a service that stores any change made to the whole textarea whenever one of the above events triggers.
In short, it's going to be less expensive to store the whole textarea on every event (after all, its content is just a string, nothing too hard for a browser to handle, even if the string is big — but I'm sure you care about your users and your textarea won't end up to be massive).
To store every change made to the textarea, you can use localStorage and/or a remote DB, using possibly angular locker for localStorage abstractions, and Firebase (AngularFire), which is going to handle automagically any changes made to the textarea given you previously wire the textarea content to a Firebase object.
But your back-end could be of course any data API. I would to suggest to store a limited amount of "Ctrl/Cmd+Z" into localStorage, and for the external DB, well, it's up to you to store infinite versions. That's where Firebase would come in handy, because by forcing you to make adhere to a JSON, you can store by month, week, day, therefore accelerating your retrieval queries for when the end user wants to go back in history.