0

I'm currently making a college project in which at some point i need to load large ammounts os HTML into a div. I'm doing this like so

$('#output-div').html(codHTML);

Note that the variable "codHTML" is the variable that contains the large ammounts of HTML

The contents of the HTML code aren't much more then <span>, <b> and <p> and text that is retrieved by a JSON search.

This is where i fill the codHTML variable

for(iTest=0; iTest<nTests; iTest++){
    nLivros=numLivrosTest(iTest);
    for(iLivro=0; iLivro<nLivros; iLivro++){
        nCaps=numCapsLivroTest(iTest, iLivro);
        for(iCap=0; iCap<nCaps; iCap++){
            nVerss=numVerssCapLivroTest(iTest, iLivro, iCap);
            for(iVers=0; iVers<nVerss; iVers++){
                txtVers = txtVersCapLivroTest(iTest, iLivro, iCap, iVers);
                regexArray = txtVers.match(regex);
                if(regexArray!= null){
                    txtVersFinal = delimit(txtVersCapLivroTest(iTest, iLivro, iCap, iVers), regex, regexArray);
                    codHTML += '<p>' + refVers(iTest, iLivro, iCap, iVers) + txtVersFinal+ '</p>';
                }
            }
        }
    }
}

The delimit function, what it does is add bold elements to specified words. In the example bellow it's the "the" word

Functions started by "num" are related to the JSON search, they return the total number of childNodes of a certain parentNod.

The function refVers returns a String built with the names of parentNodes

Here's an example of how it looks:

enter image description here

My problem is that whenever the time comes that i load the html to the div, the page freezes for an extended period of time. I've investigate this and i can tell that the problem is NOT on the JSON search NOR it is when i inject the variable contents inside the div itself. The problem remains on the time the browsers take to actually display the results of that injection.

So after extensive research i am sad to say that i have found zero solutions to reduce the page freeze time.

If anyone knows how i can get around this delay, i would really apreciate if you told me.

Thank you in advance.

Ricardo Cruz
  • 11
  • 4
  • 1
    Please add your code to the question, including an example of the HTML returned if possible. – Rory McCrossan Jul 02 '15 at 12:13
  • `$('#output-div').empty().append(codHTML);` Have you tried this..? – Riddler Jul 02 '15 at 12:15
  • Where the codHTML data came from? If from AJAX call it can be set to synchronous. – Adam Kaczmarek Jul 02 '15 at 12:16
  • @Riddler I have tried that, yes. Made no difference at all – Ricardo Cruz Jul 02 '15 at 12:19
  • @RoryMcCrossan I have added the construction of the html variabl to the main post – Ricardo Cruz Jul 02 '15 at 12:20
  • @AdamKaczmarek as i said in the main post, it is a variable that is filled with html elements and text froma JSON search – Ricardo Cruz Jul 02 '15 at 12:21
  • what is the content of `numLivrosTest` this and similar functions ? – Prabhu Vignesh Rajagopal Jul 02 '15 at 12:24
  • @PrabhuVigneshRajagopal it is not relevant for this matter. What those funcctions do is related to the JSON search. The functions with "num" return the total of childNodes in the JSON file in this case the function numLivrosTest returns the total number of "Livros" inside the specified "Test". – Ricardo Cruz Jul 02 '15 at 12:27
  • since we dont know about the logic what you are doing in here, We can not solve your issue. But your problem is bit clear that nested for loop runs many times. try to use classes and objects – Prabhu Vignesh Rajagopal Jul 02 '15 at 12:27
  • @PrabhuVigneshRajagopal I did reference in the main post that the problem is NOT in the JSON search aka the for loops. That search ends in a matter of milliseconds. My problem is the time during which the page stays frozen while "drawing" the new contents that i have put inside the div. I have made a system that displays te amount of time taken by the loops and the ammount of time take by the loops+insertion of the html on the div. It's always bellow 1second. But, the page stays frozen more than 4seconds because of the "drawing" process. That's my problem – Ricardo Cruz Jul 02 '15 at 12:32
  • What is "drawing" process i wonder? If it is rendering process then this [post](http://stackoverflow.com/a/117988/4269160) may help – Prabhu Vignesh Rajagopal Jul 02 '15 at 12:38
  • @PrabhuVigneshRajagopal yes, that's what i meant. I've tried that, but it doesn't really do me any good since, everytime i add something to the div, i will erase everything that was in there previously. So, in other words, everytime i put anything new on the div, the div is empty. – Ricardo Cruz Jul 02 '15 at 12:45
  • Have to see your entire code. And it is impossible anyways. so Sorry – Prabhu Vignesh Rajagopal Jul 02 '15 at 12:56

0 Answers0