javascript - PHP 回显大量 HTML 数据需要花费大量时间

Question

我有 15k 个 JSON 产品需要用 PHP 处理，如果我 var_dump 数组就没有问题。 如果我将 JSON 数据减少到 1000-1500，则需要 1/2 秒，并且由执行一些 jquery 操作的两个按钮组成的用户界面需要几秒钟。 问题很明显，当我传递所有数据(15k)时，显示 HTML 页面需要 40/50 秒，如果我单击按钮，它们将不起作用。

这就是我所做的: 从外部 URL 获取 JSON(没问题)。 使用 AJAX(POST) 将 JSON 传递给 PHP(没有问题)。 在 PHP 文件中获取字符串，对数组中的字符串进行编码并处理每个数据，在 data_processing 正常后，我将数据回显为

<? 
   echo'<div class="myclass" id="myid">';
   echo'<input type="hidden" value="somedatas">';
   echo'<input type="text" name="'.$json[$_POST["SOMEDATA"]].'" value="somedatas">";
   ....
?>

有更好的方法吗？我还尝试将 display:none 设置为主 div，但没有任何更改。

更新 我忘记了一个pass，php echo 被转回ajax 请求并附加到div

这是我在单击确认按钮后用来一一处理数据的脚本

        echo'<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#close_tab_prw").click(function(){
         document.getElementById("prd_prw_tab").innerHTML = ""; //reset div
         $("#prd_prw").css("display","none");
       $("#container_others").css("opacity","1");
}); 
     $("#update_all_items").click(function(){
        var prd_number = $("input[name=prd_max_number]").val();
        for(var i = 0; i < prd_number; i++){
            var string_ok = "#confirm_form_prd_";
            string_ok = string_ok.concat(i);
            var dataString = $(string_ok).serialize();
             $.ajax( {
        type: "POST",
        url: "';echo $dir; echo'",
        data: dataString,
        success: function(data) {
            console.log(data);
            $("#prd_prw_tab").html(data);
        }
            });
        }
    });
     $("#disable_img").click(function(){
        $(".img_check").prop("checked", false);
    });
     $("#allow_img").click(function(){
        $(".img_check").prop("checked", true);
    });
     $("#disable_desc").click(function(){
        $(".n_desc_chk").prop("checked", false);
    });
     $("#allow_desc").click(function(){
        $(".n_desc_chk").prop("checked", true);
    });


    });

</script>';

这是我用来展示产品的主要功能:

$(document).ready(function(){
 $("#get_json_btn").click(function(){


        document.getElementById("unique_json_return").innerHTML = ""; //reset div

        if(document.getElementById('url_json').value != "") {
            $.getJSON(document.getElementById('url_json').value , function(result){
            $.each(result, function(i, field){
                $("#unique_json_return").append(JSON.stringify(result));
            })
        })
        .fail(function() { alert('getJSON request failed, see tips '); })
        }
       else {
            alert("No Url insrted, please, insert your JSON url");
        } 
    });
 $("#update_products").click(function(){
      new_height = "";
    $( window ).resize(function() {
        $("#prd_prw").css("height", $(window).height()-(20*$(document).height()/100));
    });
      new_height = $(window).height()-(20*$(document).height()/100);
      $("#prd_prw").css("height", new_height);
     $("#prd_prw").css("display","block");
       $("#container_others").css("opacity","0.3");

    var entire_json = document.getElementById('unique_json_return').innerText;
    var one = document.getElementsByName('one')[0].value;
    var two = document.getElementsByName('two')[0].value;
    ...
    var ten = document.getElementsByName('ten')[0].value;


    if(entire_json == "") {
        alert("Invalid or Empty JSON response");
    }
    else{
                $.ajax({
   url: '<?echo $dir; ?>',
   data: {entire_json : entire_json, one:one, two:two, three:three,...ten:ten
    },
   type: 'POST',
   success: function(data) {
   document.getElementById("unique_json_return").innerHTML = ""; //reset div
    $("#prd_prw_tab").append(data);

       }
});
    }
});
});

Answer 1

您需要多久解析一次这 15k 个产品？

如果只是偶尔执行，仅在后端并且没有最终用户经历 50 秒的等待，我会容忍它，直到您可以将其拆分为单独的服务(可能不是 PHP)。

如果这是在最终用户交互后发生的事情，我会重新审视整个设计，并确保没有任何单个用户操作会导致完整解析 15k 个对象。