嵌入从树结构JSON生成的HTML (字符串)

Question

如何使insertJson更快(我应该保持脚本与IE和其他浏览器的旧版本兼容)？

问题

这个innerHTML标记的section：

是通过将json.txt加载到window[p]创建的：

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

然后，使用以下方法将生成的HTML添加到section标记中：

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

window[p]也需要100到200毫秒的时间才能为insertJson做好准备.我添加了一个带有1200函数的setTimeout安全行--这是效率低下的。

用什么最快的函数来取代setTimeout？在此之前，我尝试了一个递归函数，它检查每毫秒的window['p']是否就绪。不幸的是，我做不到。

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:

这只是一个将JSON对象添加到XMLHttpRequest中的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是树的分支深度，t是HTML，as是生成的HTML标记的属性：

[{"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"}}


]

Answer 1

不要写有十个一个字母变量的函数。如果要节省带宽，请在web服务器上启用gzip压缩或使用小型程序。

尝试构建一个HTML字符串并一次性插入它，这样DOM就不会经常更新。

不要一遍又一遍地查询类名，而是要跟踪您所处的深度以及存在哪些未关闭的标记。每次遇到深度等于或小于前一个深度时，请在该深度或更深处关闭所有挂起的标记。

function closeTags(mindepth, stack) { 
    var closes="";
    while (stack.length && stack[stack.length-1].depth >= mindepth) {
      var popped=stack.pop();
      closes += "  ".repeat(popped.depth) + "\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"})