Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/71.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 改进表格渲染,提高表格渲染速度_Javascript_Jquery_Html_Css - Fatal编程技术网

Javascript 改进表格渲染,提高表格渲染速度

Javascript 改进表格渲染,提高表格渲染速度,javascript,jquery,html,css,Javascript,Jquery,Html,Css,因此,我必须呈现一个包含1000行和1000列的表。因此,最好的方法似乎是用javascript构建HTML字符串,然后一次性将其插入DOM。我做了一个简单的例子,并将其与其他几种方法进行了比较。最后,这真的是我想出的最快的方法。但这仍然不够令人满意。所以我的问题是,有没有比下面的例子更快的方法 var startTime = new Date().getTime(), tableString = "<table>", body = document.getEleme

因此,我必须呈现一个包含1000行和1000列的表。因此,最好的方法似乎是用javascript构建HTML字符串,然后一次性将其插入DOM。我做了一个简单的例子,并将其与其他几种方法进行了比较。最后,这真的是我想出的最快的方法。但这仍然不够令人满意。所以我的问题是,有没有比下面的例子更快的方法

var startTime = new Date().getTime(),
    tableString = "<table>",
    body = document.getElementsByTagName('body')[0],
    div = document.createElement('div'),
    finalResult = 0,
    endTime = 0,
    result = 0;

for (row = 0; row < 1000; row += 1) {

    tableString += "<tr>";

    for (col = 0; col < 1000; col += 1) {

        tableString += "<td>" + "testing" + "</td>";
    }
    tableString += "</tr";
}

tableString += "</table>";
div.innerHTML = tableString;
body.appendChild(div);

endTime  = new Date().getTime();
console.log(endTime - startTime);
var startTime=new Date().getTime(),
表字符串=”,
body=document.getElementsByTagName('body')[0],
div=document.createElement('div'),
最终结果=0,
endTime=0,
结果=0;
对于(行=0;行<1000;行+=1){
表字符串+=“”;
用于(列=0;列<1000;列+=1){
表字符串+=“+”测试“+”;
}

tableString+=“无论使用哪种语言,大量的字符串串联都会让您在运行时遇到麻烦。 fastet的方法是在文档片段中构造表时,遍历本机JavaScript DOM API。在函数末尾,将该文档片段插入文档中所需的位置

类似这样的操作将创建一个包含1000行和每行20个单元格的表:

function makeTable() {
    var fragment = document.createDocumentFragment();

    for (var i = 0; i < 1000; i++) {
        var row = document.createElement('tr');
        fragment.appendChild(row);

        for (var j = 0; j < 20; j++) {
            var cell = document.createElement('td');
            cell.appendChild(document.createTextNode(i.toString() + ', ' + j.toString()));
            row.appendChild(cell);
        }
    }

    var target = document.getElementById('target');
    target.appendChild(fragment);
}
函数makeTable(){
var fragment=document.createDocumentFragment();
对于(变量i=0;i<1000;i++){
var行=document.createElement('tr');
片段.appendChild(行);
对于(var j=0;j<20;j++){
var cell=document.createElement('td');
cell.appendChild(document.createTextNode(i.toString()+','+j.toString());
子行(单元格);
}
}
var target=document.getElementById('target');
target.appendChild(片段);
}
JSFiddle:


编辑刚刚看到你做了1000x1000个-也就是一百万个单元格,无论如何都会很慢。我真的希望一百万个表格单元格不是你的实际使用案例。-

我想这是最快的方法。谢谢!:)