ページ速度とコードの最適化について質問があります。AJAX呼び出しによってほぼ100％入力されるページがあります。私の質問は次のとおりです。ページのHTMLにいくつかの空のdiv、スパンなどをコーディングしてから、javascriptを使用してそれらの要素を入力する方が速いですか？または、JavaScriptでこれらの要素を作成し、挿入して追加する方が速いですか？大きな違いがあるかどうかもわかりません。したがって、この分野でのヘルプ/アドバイスをいただければ幸いです。
2383 次
4 に答える
6
数年前、私はこれについて実験をしました。innerHTML繰り返しcreateElement appendChild insertBeforeなどの呼び出しを使用するよりも、要素のプロパティに割り当てて複雑な構造を作成する方がはるかに高速です。私はそれについて行った投稿を掘り起こしました（Prototype＆script.aculo.usメーリングリストへ）。下。
HTMLを解析してすばやくレンダリングすることは、ブラウザーが行うことであり、それを実行するために高度に最適化されていることを忘れないでください。複雑なHTML構造を含む文字列をコンテナ要素のinnerHTMLプロパティに割り当てると、JavaScriptレイヤーからブラウザのレンダリングレイヤーに1回移動することになります。その後、ブラウザの解析とレンダリングのコードを中断することなく続行できます。
対照的に、DOM APIを使用して複雑な構造を構築している場合は、多くのクロスレイヤー移動が発生するだけでなく（JavaScript->ブラウザー-> JavaScript）、ブラウザーもDOMを操作する必要があります。内部構造ではなくAPI。
したがって、通常は、適切に記述されたJavaScriptテンプレートエンジンを検討する価値があります（このクライアント側で実行する場合）。これらは通常、テンプレートを簡単に処理できる形式に一度「コンパイル」し、特定のデータセットの処理中に、を介して文字列を配列内のフラグメントとして構築し、渡しArray#pushて最終結果を取得するなどのトリックを使用します。セパレータとして。大きな文字列の場合、文字列の連結よりも高速になる可能性がありますが、それが実装に大きく依存するかどうか（FirefoxのSpiderMonkeyとChromeのV8とIEのJScript）は、DOMとは異なります。どれだけ速いか。Array#join""innerHTML
これが私が話していた数年前のメーリングリストメッセージです（基本的に私が上で言ったことを言っています;うわー、それは2年前でした）、これが参照するパスティです、これがJSBinにコピーされましたそして最後に...コードは次のとおりです:(コードは永遠に美しさと喜びを与えることを意図したものではないことに注意してください、それは簡単なハックでした...それでも、私は少し何かをハックしたいと思います今、2年後の方がいいです。）
これをjsPerfで動作するものに変換する価値があるかもしれません。今それをする時間はありません、私は恐れています。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
#log {
border-bottom: 1px solid black;
}
#log p {
margin: 0;
padding: 0;
}
</style>
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/prototype/1/prototype.js'></script>
<script type='text/javascript'>
document.observe('dom:loaded', function() {
$('btnDOMDirect').observe('click', useDOMDirect);
$('btnPrototypeDOM').observe('click', usePrototypeDOM);
$('btnHTML').observe('click', useHTML);
});
var numRows = 10;
var numCols = 10;
function usePrototypeDOM(evt)
{
var table;
var tbody;
var tr;
var td;
var row;
var col;
var start;
var end;
start = (new Date()).getTime();
table = new Element('table');
tbody = new Element('tbody');
table.appendChild(tbody);
for (row = 0; row < numRows; ++row) {
tr = new Element('tr');
tbody.appendChild(tr);
for (col = 0; col < numCols; ++col) {
td = new Element('td');
td.update('Row ' + row + ', col ' + col);
tr.appendChild(td);
}
}
$('targetTable').update(table);
end = (new Date()).getTime();
log('DOM took ' + (end - start) + 'ms');
}
function useDOMDirect(evt)
{
var table;
var tbody;
var tr;
var td;
var row;
var col;
var start;
var end;
if (Prototype.Browser.IE) {
alert("DOM direct doesn't work on IE because I used table elements. Sorry. The other two work.");
return;
}
start = (new Date()).getTime();
table = document.createElement('table');
tbody = document.createElement('tbody');
table.appendChild(tbody);
for (row = 0; row < numRows; ++row) {
tr = document.createElement('tr');
tbody.appendChild(tr);
for (col = 0; col < numCols; ++col) {
td = document.createElement('td');
td.update('Row ' + row + ', col ' + col);
tr.appendChild(td);
}
}
$('targetTable').update(table);
end = (new Date()).getTime();
log('DOM took ' + (end - start) + 'ms');
}
function useHTML(evt)
{
var html;
var row;
var col;
var start;
var end;
start = (new Date()).getTime();
html = '<table><tbody>';
for (row = 0; row < numRows; ++row) {
html += '<tr>';
for (col = 0; col < numCols; ++col) {
html += '<td>Row ' + row + ', col ' + col + '</td>';
}
html += '</tr>';
}
html += '</tbody></table>';
$('targetTable').update(html);
end = (new Date()).getTime();
log('HTML took ' + (end - start) + 'ms');
}
function log(msg)
{
var l;
var p;
l = $('log');
if (l) {
p = new Element('p');
p.update(msg);
l.appendChild(p);
}
}
</script>
</head>
<body>
<input type='button' id='btnDOMDirect' value='DOM Direct' />
<input type='button' id='btnPrototypeDOM' value='Prototype DOM' />
<input type='button' id='btnHTML' value='HTML' />
<div id='log'></div>
<div id='targetTable'></div>
</body>
</html>
于 2011-03-23T16:56:28.357 に答える
0
これを行うためにjavascriptを使用すると、HTMLに要素を追加する場合のように、ページの読み込みではなく、ページの読み込みの上で実行されるため、常に遅くなります。ただし、HTMLに要素がない場合、ページの実際の負荷は（大幅ではありませんが）少ないと言うこともできます。
ただし、もう1つのポイントは、javascriptはガベージコレクションがかなり苦手なので、DOM呼び出しを大量に行うと、最終的には処理能力が向上し始めます。
さらに、セマンティックWebサイトの保守に関心がある場合は、タグが必要ですか？javascriptなしで優雅に劣化しますか？等々。撮りたい角度にもよると思います。
于 2011-03-23T16:58:07.393 に答える
0
多くの要素を作成している場合、innerHTMLははるかに高速になりますが、公式のDOM標準の一部ではありません（広くサポートされていますが）。私の推奨事項は、ページ自体にできるだけ多くのHTMLを含むスケルトンレイアウトでページを提供し、ページの関連部分への参照を取得して、標準のDOMメソッドで値をプラグインすることです。
これは適度に高速で、プレゼンテーションとロジックを分離し、将来のサイトの変更や再設計の場合に、より柔軟になる可能性があります。
于 2011-03-23T17:03:22.300 に答える
0
DOMinnerHTMLメソッドを使用する代わりに変更します。
QuirksmodeでのW3CDOMとinnerHTMLのこのベンチマークによると、テストされたすべてのブラウザーは、DOMよりもHTMLの方がはるかに高速であるように見えます。
于 2011-03-23T17:03:59.617 に答える