-1
問題の制約を処理しているので、私の質問を完全に読んだり、重複してマークしてください。javascriptブロッキングブラウザを使用して何百万ものレコードを持つhtmlテーブルを作成
こんにちはすべてのJavascriptのロックスター、
私はJavaScriptでHTMLテーブルを作成しています。テーブルでは、私は垂直と水平の両方のscrollerが必要です。私はこの部分で終わった。それは働いている。今、私の問題が始まります。テーブルのために何百万の行を作成しているときに、ブラウザをブロックします。数千のレコードでは正常に動作します。
私はパフォーマンスを向上させるために多くのGoogleを行っていますが、パフォーマンスの大幅な向上は得られませんでした。いくつかのように、row.appendChild（cell）;私はまた、労働者を使用しようとしました。しかし、私は私が労働者のドキュメントオブジェクトにアクセスすることができないことがわかった。 setTimeoutは私の問題を解決するのにも十分ではありません。ここでは、テーブルの行を作成するための私のコードです。
var arr = JSON.parse(rcvReq.responseText);
var json = arr.abc;
var columns = [];
columns = Object.keys(json[0]);
//Build an array containing Customer records.
var customers = new Array();
customers.push(columns);
for (i = 0; i < json.length; i++) {
var dataVal = [];
for(j = 0; j < columns.length; j++){
var mytempvar = json[i];
dataVal.push(mytempvar[columns[j]+'']);
}
customers.push(dataVal);
}
//Create a HTML Table element.
var table = document.createElement("TABLE");
var table1 = document.createElement("TABLE");
table.border = "1";
//Get the count of columns.
var columnCount = customers[0].length;
//Add the header row.
var row = document.createElement('tr');
row.className = 'fixed-header';
for (var i = 0; i < columnCount; i++) {
var headerCell = document.createElement("TH");
headerCell.innerHTML = customers[0][i];
row.appendChild(headerCell);
}
table1.appendChild(row);
//Add the data rows.
var documentFragment = document.createDocumentFragment();
for (var i = 1; i < customers.length; i++) {
row = document.createElement('tr');
for (var j = 0; j < columnCount; j++) {
var cellVal = customers[i][j];
var cell = document.createElement("TD");
cell.innerHTML = cellVal;
row.appendChild(cell);
}
setTimeout(function(){ }, 1000);
documentFragment.appendChild(row);
}
/* Event of button */
var siblings = e.parentNode.children;
var childOf1stShibling = siblings[0];
table.appendChild(documentFragment);
var div = document.createElement("DIV");
var dvTable = document.getElementById(siblings[1].id +'');
var dvTable1 = document.getElementById(childOf1stShibling.children[0].id + '');
dvTable.innerHTML = "";
dvTable1.innerHTML = "";
dvTable.appendChild(table);
dvTable1.appendChild(table1);
制約
- のjqueryのない使用。私は、javascript、css、htmlを使うことができます。
- サードパーティ製のプラグインを使用していません。
- ページネーションは使用できません。
- レコードは数千万ではありません。
上記の制約を念頭に置いて回避策を提案してください。 ありがとうございます。
jqueryを使用できないのはなぜですか？それはあなたのコードを簡単にする！ –
そして、何百万ものテーブル行をWeb上で閲覧できる人はどうでしょうか？それは悪い考えです。 –
私の質問をよくお読みください。私はすでにJavaScript、CSS、HTML以外の何も使用しないという制約があることを言及しています。サードパーティのプラグインはありません。jqueryプラグインはありません。 –