"For" 'lagando' interface

Asked

Viewed 99 times

3

I have a JSON I’m using to generate an HTML in a app Cordova as follows: 

function gerarLista(lista) {

    strHtml = "";

    for(item in lista) {

            strHtml += '<div class="item">';

                strHtml += '<div class="descricao">' + lista[item].descricao + '</div>';

                strHtml += '<div class="imagem">';
                    strHtml += '<img src="' + lista[item].imagem + '" />';
                strHtml += '</div>';

                strHtml += '<div class="valor">' + lista[item].valor + '</div>';

            strHtml += '</div>';

    }


    $("#produtos").html(strHtml);

}

To generate a small list is quiet, but when you have a larger amount of products the interface of a locked when I call this function, I see this because when this function is called already has a css animation running.

I was wondering if you have any better way (in the performance question) to generate this html? From what I understood the for run time so there’s some way to run it asynchronously or whatever, so there’s no locking?

javascript html apache-cordova for

  • I believe that using https://handlebarsjs.com you can do something more interesting. Or try something with Interpolation string in javascript https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/template_strings

  • 1

    You can try to follow the modern frameworks approach and update only what you have changed by not touching the products that remain the same. Certainly implies more logic.

  • @Isac the problem is the first time I will create these elements in which happens the lag

1 answer

5


Javascript has strings immutable, then incurs the problem called Shlemiel the Painter’s Algorithm. I’m not saying this is the only problem, but it makes everything terrible, and I think this way can really help. I do not guarantee because I do not know the details of the implementation of JS in each browser, but a site user showed me privately that there are clear gains. Creating a array with space already predetermined and filling with texts in each element and then joining everything in one string tends to give a very large gain.

It also helps to make at least the string of the bond be one through interpolation (I hope this is done internally the right way, but it’s JS, so I’m afraid) that you just can’t use in browsers very old, still has a reasonable solution without it using the array.

function gerarLista(lista) {
    var array = new Array(lista.length);
    for (var i = 0; i < lista.length; i++) {
        array[i] = `<div class="item">
            <div class="descricao">${lista[i].descricao}</div>
            <div class="imagem">
            <img src="${lista[i].imagem}" />
            </div>';
            <div class="valor">${lista[i].valor}</div>
            </div>`;
    }
    $("#produtos").html(array.join(""));
}

I put in the Github for future reference.

  • I liked the articles, I will do a test with your code. But you know tell me if this template string ``` will not give problem with the devices, this app I intend to compile for IOS and Android(minimum version 5)? His support is good(You can use without fear of not working on the devices)?

  • 1

    It seems to be quiet: https://caniuse.com/#search=template%20string.

  • I believe the code will generate some errors. In the original code the author used the loop for in soon the argument lista function is of the type object and not array and object does not have the attribute length used in calls to lista.length in his reply. Inside the loop, several times was used lista[item] however item has never been defined in the sample of the response.

  • @Vinicius.Silva Nothing says the use of for in has to occur with an object that does not have size, in this case it seems to me that it has, if not he needs to talk about it (in fact it is rare to have an object with several elements that do not know the size), if he says he has an object like this I modify the code to meet it, which complicates the code, then I will only do it if I have to. The name of the variable I actually ate ball and I’ll fix it.

  • @Maniero Da page of the mozila itself "Given that for...in is built for iterating Object properties(...)". On the question of the length I referred to the use of property and not object length. Test on console var obj = { a: 1, b: 2 }; console.log(obj.length); //undefined

  • You’re talking about something that’s not what he has in his code, that’s pretty clear. Its code has no elements, only members, it is very difficult to build an object that has elements and does not have the size property. The code and description of his question makes it clear that the object accesses elements, although it is not explicitly stated. But it would be strange something called lista not be a list and just be a simple object. And it would be weird to give problem quando tem uma quantidade de produtos maior, then it seems to me that it is a matter of text interpretation.

  • I agree with your point of view. If lista for really an array the code will run smoothly.

  • List was a Array[], spun smooth along with other optimizations.

Show 3 more comments

Browser other questions tagged javascript html apache-cordova for

You are not signed in. Login or sign up in order to post.