1
\$\begingroup\$

How to make insertJson faster (I should keep the script compatible with old versions of IE and other browsers)?

Sorry about my codes that I had to write with short variables and thanks so much!

Problem

innerHTML of this section tag:

<section id="two"></section>

is created by loading json.txt to window[p]:

// Gets a tree structure JSON: 
getJsonTxt({p:'dir/dir/json.txt'});

Then, it adds the generated HTML to section tag using:

setTimeout(function(){
    insertJson(window['p'],{t:"two"});
}, 1200);

It also take ~100-200 mili-seconds that window[p] to be ready for insertJson. I added a 1200 safe-line with setTimeout function - which is inefficient.

What would be the fastest function to replace setTimeout with? I tried a recursive function before which was checking each mili-second for window['p'] to be ready. Unfortunately, I could not make it work.

insertJson:

// z is json.txt and g is section
insertJson:function(z,g){
    if(z==null){return;}
    z=z.trim();
    z=JSON.parse(z);
    var a,c,d,e,p,i,j,t,p=[];a=document.getElementById(g.t);
    for(i in z){
        if(a==null){break;}
        if(i==1){continue;}
        c=null;/*current element class name*/
        d=z[i].d; /*current element depth*/
        e=null; /*current element*/
        if(z[i].a!=undefined){
            if(z[i].a.class!=undefined){
                c=z[i].a.class+" i".concat(i,"-d",d);
            }else{
                c="i".concat(i,"-d",d);
            }
        }else{
            c="i".concat(i,"-d",d);
        }
        p[d]=c;e=document.createElement(z[i].t); /*create the new element*/
        if(z[i].x!=undefined){
            t=document.createTextNode(z[i].x);e.appendChild(t);
        } /*element text*/
        if(z[i].a!=undefined){
            for(j in z[i].a){
                if(j!='class'){
                    e.setAttribute(j,z[i].a[j]);
                }
            }
        } /*non-class attributes*/
        e.setAttribute("class",c); /*class attribute*/
        if(i==0){a.appendChild(e);}
        if(i>0){a.getElementsByClassName(p[(d-1)])[0].appendChild(e);}
    }
}

getJsonTxt:

This is just a XMLHttpRequest to add JSON object to the window.

/*get json.txt*/
getJsonTxt:function(z){
    var g,h,x=[];

    Object.keys(z).forEach(function(a,b,c){
        window[a]=null;
        x[b]=new XMLHttpRequest();
        url=window.location.origin.concat('/',z[a.toString()]);
        x[b].open("GET",url,true);
        x[b].onreadystatechange=function (z){
            if(x[b].readyState===4){
                if(x[b].status===200 || x[b].status==0){
                    window[a]=x[b].responseText;
                }
            }
        }
        x[b].send();
     });
}

json.txt

d is the branch depth in tree, t is the HTML tag and as are attributes of HTML tags being generated:

[{"d":0,"t":"div","a":{"class":"ro"}},
    {"d": 1,"t": "input","a": {"a": "index","b": null,"c": "Market Indices","class": "di-0","d": "Near-Real-Time Sector Estimation","id": "index","type": "hidden","z": ""}},

    {"d":1,"t":"div","a":{"class":"ro di-2 tx-1 p-5 a120 a220 a320 a420 a520 a620 a720"}},
        {"d":2,"t":"ins","a":{"class":"adsbygoogle","style":"display:block","data-ad-client":"ca-pub-1444970657765319","data-ad-slot":"9621343003","data-ad-format":"auto"}},


    {"d":1,"t":"div","a":{"class":"ro di-2 p-3 a120 a220 a320 a420 a520 a620 a720 r113"}},
        {"d":2,"t":"h1","a":{"class":"ro s16 fw-6 tx-1 r113 mv-3"},"x":"Near-Real-Time Sector Forecast"},
        {"d":2,"t":"div","a":{"class":"ro a120 a220 a320 a420 a520 a620 a720 tx-1 s15 p-2 mv-3 bx-2"}},
            {"d":3,"t":"b","a":{"class":"s12 a120 a220 a318 a418 a518 a618 a718 r110 mv-2 tx-0 di-1"},"x":"💹 Stocks"},
            {"d":3,"t":"b","a":{"class":"s14 a120 a220 a318 a418 a518 a618 a718 r113 mv-2 tx-1 di-1 fw-6"},"x":"🇺🇸 Sector Speculator"},
            {"d":3,"t":"b","a":{"class":"s12 a120 a220 a318 a418 a518 a618 a718 r110 mv-2 tx-2 di-1"},"x":"🏛 Markets"},

        {"d":2,"t":"div","a":{"class":"ro di-2 a120 a220 a320 a420 a520 a620 a720 sq-1 r113"}},
            {"d":3,"t":"h3","a":{"class":"ro s15 mv-4 fw-6 tx-1"},"x":"Current Average Markets Forecast"},
            {"d":3,"t":"div","a":{"class":"ro a120 a220 a320 a420 a520 a620 a720"}},
                {"d":4,"t":"b","a":{"class":"s16 a118 a218 a318 a418 a518 a618 a718 r190 t-12 mv-2 tx-0 di-1"},"x":"Sell"},
                {"d":4,"t":"b","a":{"class":"s16 a118 a218 a318 a418 a518 a618 a718 r110 mv-2 tx-1 di-1"},"x":"Hold"},
                {"d":4,"t":"b","a":{"class":"s16 a118 a218 a318 a418 a518 a618 a718 r140 t-19 mv-2 tx-2 di-1"},"x":"Buy"},
            {"d":3,"t":"div","a":{"class":"ro a120 a220 a320 a420 a520 a620 a720 g-3 fh-5 sq-2"}},
            {"d":3,"t":"div","a":{"class":"u1 di-1","style":"padding-left:50%;","data":"Overall"}},
                {"d":4,"t":"div","a":{"class":"bx-1 s10 fw-6 ml-5 di-1"}},
                {"d":4,"t":"div","a":{"class":"tg-up"}},



        {"d":1,"t":"div","a":{"class":"ro di-2 p-3 a120 a220 a320 a420 a520 a620 a720"}},
            {"d":2,"t":"div","a":{"class":"ro di-2 a120 a220 a319 a419 a518 a618 a718 sq-1 r113"}},
                {"d":3,"t":"h4","a":{"class":"ro s14 mv-3 fw-6 tx-1"},"x":"💻 IT"},
                {"d":3,"t":"div","a":{"class":"ro a120 a220 a320 a420 a520 a620 a720 br-2"}},
                    {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r110 mv-2 tx-0 di-1"},"x":"Sell"},
                    {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r111 mv-2 tx-1 di-1"},"x":"Hold"},
                    {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r112 mv-2 tx-2 di-1"},"x":"Buy"},
                {"d":3,"t":"div","a":{"class":"ro a120 a220 a320 a420 a520 a620 a720 g-3 fh-1 sq-2"}},
                {"d":3,"t":"div","a":{"class":"u1 di-1","style":"padding-left:50%;","data":"IT"}},
                    {"d":4,"t":"div","a":{"class":"bx-1 s10 fw-6 ml-5 di-1"}},
                    {"d":4,"t":"div","a":{"class":"tg-up"}},

            {"d":2,"t":"div","a":{"class":"ro di-2 a120 a220 a319 a419 a518 a618 a718 sq-1 r113"}},
                {"d":3,"t":"h4","a":{"class":"ro s14 mv-3 fw-6 tx-1"},"x":"🛰 Telecom"},
                {"d":3,"t":"div","a":{"class":"ro a120 a220 a320 a420 a520 a620 a720 br-2"}},
                    {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r110 mv-2 tx-0 di-1"},"x":"Sell"},
                    {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r111 mv-2 tx-1 di-1"},"x":"Hold"},
                    {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r112 mv-2 tx-2 di-1"},"x":"Buy"},
                {"d":3,"t":"div","a":{"class":"ro a120 a220 a320 a420 a520 a620 a720 g-3 fh-1 sq-2"}},

                {"d":3,"t":"div","a":{"class":"u1 di-1","style":"padding-left:50%;","data":"Telecommunication"}},
                    {"d":4,"t":"div","a":{"class":"bx-1 s10 fw-6 ml-5 di-1"}},
                    {"d":4,"t":"div","a":{"class":"tg-up"}},


            {"d":2,"t":"div","a":{"class":"ro di-2 a120 a220 a319 a419 a518 a618 a718 sq-1 r113"}},
                {"d":3,"t":"h4","a":{"class":"ro s14 mv-3 fw-6 tx-1"},"x":"💵 Finance"},
                {"d":3,"t":"div","a":{"class":"ro a120 a220 a320 a420 a520 a620 a720 br-2"}},
                    {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r110 mv-2 tx-0 di-1"},"x":"Sell"},
                    {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r111 mv-2 tx-1 di-1"},"x":"Hold"},
                    {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r112 mv-2 tx-2 di-1"},"x":"Buy"},
                {"d":3,"t":"div","a":{"class":"ro a120 a220 a320 a420 a520 a620 a720 g-3 fh-1 sq-2"}},
                {"d":3,"t":"div","a":{"class":"u1 di-1","style":"padding-left:50%;","data":"Finance"}},
                    {"d":4,"t":"div","a":{"class":"bx-1 s10 fw-6 ml-5 di-1"}},
                    {"d":4,"t":"div","a":{"class":"tg-up"}},

            {"d":2,"t":"div","a":{"class":"ro di-2 a120 a220 a319 a419 a518 a618 a718 sq-1 r113"}},
                {"d":3,"t":"h4","a":{"class":"ro s14 mv-3 fw-6 tx-1"},"x":"🏗 Energy"},
                {"d":3,"t":"div","a":{"class":"ro a120 a220 a320 a420 a520 a620 a720 br-2"}},
                    {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r110 mv-2 tx-0 di-1"},"x":"Sell"},
                    {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r111 mv-2 tx-1 di-1"},"x":"Hold"},
                    {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r112 mv-2 tx-2 di-1"},"x":"Buy"},
                {"d":3,"t":"div","a":{"class":"ro a120 a220 a320 a420 a520 a620 a720 g-3 fh-1 sq-2"}},
                {"d":3,"t":"div","a":{"class":"u1 di-1","style":"padding-left:50%;","data":"Energy"}},
                    {"d":4,"t":"div","a":{"class":"bx-1 s10 fw-6 ml-5 di-1"}},
                    {"d":4,"t":"div","a":{"class":"tg-up"}},


            {"d":2,"t":"div","a":{"class":"ro di-2 a120 a220 a319 a419 a518 a618 a718 sq-1 r113"}},
                {"d":3,"t":"h4","a":{"class":"ro s14 mv-3 fw-6 tx-1"},"x":"🏭 Industrials"},
                {"d":3,"t":"div","a":{"class":"ro a120 a220 a320 a420 a520 a620 a720 br-2"}},
                    {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r110 mv-2 tx-0 di-1"},"x":"Sell"},
                    {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r111 mv-2 tx-1 di-1"},"x":"Hold"},
                    {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r112 mv-2 tx-2 di-1"},"x":"Buy"},
                {"d":3,"t":"div","a":{"class":"ro a120 a220 a320 a420 a520 a620 a720 g-3 fh-1 sq-2"}},
                {"d":3,"t":"div","a":{"class":"u1 di-1","style":"padding-left:50%;","data":"Industrials"}},
                    {"d":4,"t":"div","a":{"class":"bx-1 s10 fw-6 ml-5 di-1"}},
                    {"d":4,"t":"div","a":{"class":"tg-up"}},

            {"d":2,"t":"div","a":{"class":"ro di-2 a120 a220 a319 a419 a518 a618 a718 sq-1 r113"}},
                {"d":3,"t":"h4","a":{"class":"ro s14 mv-3 fw-6 tx-1"},"x":"⚗ Materials"},
                {"d":3,"t":"div","a":{"class":"ro a120 a220 a320 a420 a520 a620 a720 br-2"}},
                    {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r110 mv-2 tx-0 di-1"},"x":"Sell"},
                    {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r111 mv-2 tx-1 di-1"},"x":"Hold"},
                    {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r112 mv-2 tx-2 di-1"},"x":"Buy"},
                {"d":3,"t":"div","a":{"class":"ro a120 a220 a320 a420 a520 a620 a720 g-3 fh-1 sq-2"}},
                {"d":3,"t":"div","a":{"class":"u1 di-1","style":"padding-left:50%;","data":"Materials and Chemicals"}},
                    {"d":4,"t":"div","a":{"class":"bx-1 s10 fw-6 ml-5 di-1"}},
                    {"d":4,"t":"div","a":{"class":"tg-up"}},
            {"d":2,"t":"div","a":{"class":"ro di-2 a120 a220 a319 a419 a518 a618 a718 sq-1 r113"}},
                {"d":3,"t":"h4","a":{"class":"ro s14 mv-3 fw-6 tx-1"},"x":"🕯 Utilities"},
                {"d":3,"t":"div","a":{"class":"ro a120 a220 a320 a420 a520 a620 a720 br-2"}},
                    {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r110 mv-2 tx-0 di-1"},"x":"Sell"},
                    {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r111 mv-2 tx-1 di-1"},"x":"Hold"},
                    {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r112 mv-2 tx-2 di-1"},"x":"Buy"},
                {"d":3,"t":"div","a":{"class":"ro a120 a220 a320 a420 a520 a620 a720 g-3 fh-1 sq-2"}},
                {"d":3,"t":"div","a":{"class":"u1 di-1","style":"padding-left:50%;","data":"Utilities"}},
                    {"d":4,"t":"div","a":{"class":"bx-1 s10 fw-6 ml-5 di-1"}},
                    {"d":4,"t":"div","a":{"class":"tg-up"}},


            {"d":2,"t":"div","a":{"class":"ro di-2 a120 a220 a319 a419 a518 a618 a718 sq-1 r113"}},
                {"d":3,"t":"h4","a":{"class":"ro s14 mv-3 fw-6 tx-1"},"x":"🎪 Discretionary"},
                {"d":3,"t":"div","a":{"class":"ro a120 a220 a320 a420 a520 a620 a720 br-2"}},
                    {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r110 mv-2 tx-0 di-1"},"x":"Sell"},
                    {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r111 mv-2 tx-1 di-1"},"x":"Hold"},
                    {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r112 mv-2 tx-2 di-1"},"x":"Buy"},
                {"d":3,"t":"div","a":{"class":"ro a120 a220 a320 a420 a520 a620 a720 g-3 fh-1 sq-2"}},
                {"d":3,"t":"div","a":{"class":"u1 di-1","style":"padding-left:50%;","data":"Consumer Discretionary"}},
                    {"d":4,"t":"div","a":{"class":"bx-1 s10 fw-6 ml-5 di-1"}},
                    {"d":4,"t":"div","a":{"class":"tg-up"}},

            {"d":2,"t":"div","a":{"class":"ro di-2 a120 a220 a319 a419 a518 a618 a718 sq-1 r113"}},
                {"d":3,"t":"h4","a":{"class":"ro s14 mv-3 fw-6 tx-1"},"x":"🍞 Staples"},
                {"d":3,"t":"div","a":{"class":"ro a120 a220 a320 a420 a520 a620 a720 br-2"}},
                    {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r110 mv-2 tx-0 di-1"},"x":"Sell"},
                    {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r111 mv-2 tx-1 di-1"},"x":"Hold"},
                    {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r112 mv-2 tx-2 di-1"},"x":"Buy"},
                {"d":3,"t":"div","a":{"class":"ro a120 a220 a320 a420 a520 a620 a720 g-3 fh-1 sq-2"}},
                {"d":3,"t":"div","a":{"class":"u1 di-1","style":"padding-left:50%;","data":"Consumer Staples"}},
                    {"d":4,"t":"div","a":{"class":"bx-1 s10 fw-6 ml-5 di-1"}},
                    {"d":4,"t":"div","a":{"class":"tg-up"}},

            {"d":2,"t":"div","a":{"class":"ro di-2 a120 a220 a319 a419 a518 a618 a718 sq-1 r113"}},
                {"d":3,"t":"h4","a":{"class":"ro s14 mv-3 fw-6 tx-1"},"x":"🚀 Defense"},
                {"d":3,"t":"div","a":{"class":"ro a120 a220 a320 a420 a520 a620 a720 br-2"}},
                    {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r110 mv-2 tx-0 di-1"},"x":"Sell"},
                    {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r111 mv-2 tx-1 di-1"},"x":"Hold"},
                    {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r112 mv-2 tx-2 di-1"},"x":"Buy"},
                {"d":3,"t":"div","a":{"class":"ro a120 a220 a320 a420 a520 a620 a720 g-3 fh-1 sq-2"}},
                {"d":3,"t":"div","a":{"class":"u1 di-1","style":"padding-left:50%;","data":"Defense"}},
                    {"d":4,"t":"div","a":{"class":"bx-1 s10 fw-6 ml-5 di-1"}},
                    {"d":4,"t":"div","a":{"class":"tg-up"}},


            {"d":2,"t":"div","a":{"class":"ro di-2 a120 a220 a319 a419 a518 a618 a718 sq-1 r113"}},
                {"d":3,"t":"h4","a":{"class":"ro s14 mv-3 fw-6 tx-1"},"x":"🏩 Healthcare"},
                {"d":3,"t":"div","a":{"class":"ro a120 a220 a320 a420 a520 a620 a720 br-2"}},
                    {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r110 mv-2 tx-0 di-1"},"x":"Sell"},
                    {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r111 mv-2 tx-1 di-1"},"x":"Hold"},
                    {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r112 mv-2 tx-2 di-1"},"x":"Buy"},
                {"d":3,"t":"div","a":{"class":"ro a120 a220 a320 a420 a520 a620 a720 g-3 fh-1 sq-2"}},
                {"d":3,"t":"div","a":{"class":"u1 di-1","style":"padding-left:50%;","data":"Health"}},
                    {"d":4,"t":"div","a":{"class":"bx-1 s10 fw-6 ml-5 di-1"}},
                    {"d":4,"t":"div","a":{"class":"tg-up"}},

            {"d":2,"t":"div","a":{"class":"ro di-2 a120 a220 a319 a419 a518 a618 a718 sq-1 r113"}},
                {"d":3,"t":"h4","a":{"class":"ro s14 mv-3 fw-6 tx-1"},"x":"🏘 Real Estate"},
                {"d":3,"t":"div","a":{"class":"ro a120 a220 a320 a420 a520 a620 a720 br-2"}},
                    {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r110 mv-2 tx-0 di-1"},"x":"Sell"},
                    {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r111 mv-2 tx-1 di-1"},"x":"Hold"},
                    {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r112 mv-2 tx-2 di-1"},"x":"Buy"},
                {"d":3,"t":"div","a":{"class":"ro a120 a220 a320 a420 a520 a620 a720 g-3 fh-1 sq-2"}},
                {"d":3,"t":"div","a":{"class":"u1 di-1","style":"padding-left:50%;","data":"Real Estate"}},
                    {"d":4,"t":"div","a":{"class":"bx-1 s10 fw-6 ml-5 di-1"}},
                    {"d":4,"t":"div","a":{"class":"tg-up"}}


]

I appreciate any help.

\$\endgroup\$
  • 1
    \$\begingroup\$ I changed the title so that it describes what the code does per site goals: "State what your code does in your title, not your main concerns about it.". Feel free to edit and give it a different title if there is something more appropriate. \$\endgroup\$ – Sᴀᴍ Onᴇᴌᴀ Mar 5 at 19:05
  • \$\begingroup\$ You're welcome. Might you be upvoting many of my answers? If so, note that this is referred to as serial voting and while I am flattered, sadly the system will likely reverse the reputation at the end of the day (in UTC time). \$\endgroup\$ – Sᴀᴍ Onᴇᴌᴀ Mar 5 at 22:34
1
\$\begingroup\$

Don't write functions with ten one-letter variables in them. If you want to conserve bandwidth, enable gzip compression on the web server or use a minifier program.

Try building a string of HTML and inserting it all at once, so that the DOM isn't updated so often.

Instead of querying class names over and over, keep track of what depth you're at and what unclosed tags are out there. Every time you encounter a depth equal or less than the previous one, close all pending tags at that depth or deeper.

function closeTags(mindepth, stack) { 
    var closes="";
    while (stack.length && stack[stack.length-1].depth >= mindepth) {
      var popped=stack.pop();
      closes += "  ".repeat(popped.depth) + "</" + popped.tag + ">\n";
    }
    return closes;
}

function insertJson(json,target){
  var lastdepth=0,
      tagstack=[],
      html="";

  json=JSON.parse(json.trim());

  for(i of json.filter( i => i.t )){
    var depth=i.d || 0,
        tag=i.t,
        attrs=i.a || {},
        innerText=i.x || "",
        indent="  ".repeat(depth),
        attrHtml=Object.keys(attrs).map(a => `${a}="${attrs[a]}"`).join(" ");

    if (depth <= lastdepth) html += closeTags(depth, tagstack);

    html += `${indent}<${tag} ${attrHtml}>${innerText}\n`;

    tagstack.push( {tag,depth} );
    lastdepth=depth;
  }
  document.getElementById(target.t).innerHTML = html + closeTags(0, tagstack);     
}

 insertJson(json,{t:"two"})
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.