Mun*_*lla 2 javascript optimization dom pagespeed
我有一个关于页面速度和代码优化的问题.我有一个页面,通过AJAX调用几乎100%填充.我的问题是:对于我来说,编写几个空的div,spans,无论是在页面的HTML中,然后使用javascript填充这些元素,我会更快吗？或者,在javascript中创建这些元素并插入和追加它们会更快吗？我不确定是否存在很大差异.因此,非常感谢这方面的任何帮助/建议.
几年前,我做了一个实验.分配给innerHTML元素的属性来创建复杂的结构比使用重复的createElement appendChild insertBefore调用要快得多.我挖出了我做过的关于它的帖子(到Prototype&script.aculo.us邮件列表); 下面.
请记住,解析HTML并快速呈现它是浏览器所做的事情,并且它们已经过高度优化.如果将包含复杂HTML结构的字符串分配给容器元素的innerHTML属性,那么您将从JavaScript层到浏览器的渲染层进行一次旅行,之后浏览器的解析和呈现代码可以不间断地进行.
相比之下,如果你使用DOM API构建一些复杂的结构,不仅会发生很多跨层旅行(JavaScript - >浏览器 - > JavaScript),而且浏览器也必须使用DOM API而不是其内部结构.
因此,通常值得看一个编写良好的JavaScript模板引擎(如果你想做这个客户端).这些通常会将模板"编译"成一个易于处理的形式,并且在处理特定数据集时,他们会使用诸如将字符串构建为数组中的片段等技巧Array#push,然后通过Array#join传入获取最终结果""作为分隔符.对于大型的字符串,可以比字符串连接快,但无论是(到什么程度)是非常依赖于实现(Firefox的SpiderMonkey的与Chrome的V8与IE的JScript中),不同的是innerHTML对DOM的事情,这只是在变化怎么多快它.
这是几年前我正在谈论的邮件列表消息(基本上说我上面说的;哇,这是两年前),这里是它所指的Pastie,这里是复制到JSBin,最后......这是代码:( 请注意,代码不是永远的美丽和快乐的东西,它是一个快速的黑客...但是,是的,是的,我想我会讨厌一些东西现在好了,两年后.)
可能值得将其转换为适用于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>
| 归档时间： |
|
| 查看次数： |
2231 次 |
| 最近记录： |