页面速度优化:使用javascript与html写入DOM
我有一个关于页面速度和代码优化的问题。我有一个几乎100%通过AJAX调用填充的页面。我的问题是:对我来说,在页面的HTML中编码几个空的div、span或其他内容,然后使用javascript填充这些元素会更快吗?或者,在javascript中创建这些元素并插入和附加它们会更快吗?页面速度优化:使用javascript与html写入DOM,javascript,optimization,dom,pagespeed,Javascript,Optimization,Dom,Pagespeed,我有一个关于页面速度和代码优化的问题。我有一个几乎100%通过AJAX调用填充的页面。我的问题是:对我来说,在页面的HTML中编码几个空的div、span或其他内容,然后使用javascript填充这些元素会更快吗?或者,在javascript中创建这些元素并插入和附加它们会更快吗? 我也不确定是否有很大的区别。因此,在此领域的任何帮助/建议都将不胜感激 几年前,我做了一个实验。分配给元素的innerHTML属性以创建复杂结构要比使用重复的createElementappendChildinse
我也不确定是否有很大的区别。因此,在此领域的任何帮助/建议都将不胜感激 几年前,我做了一个实验。分配给元素的
innerHTML
属性以创建复杂结构要比使用重复的createElement
appendChild
insertBefore
等调用快得多。我已经找到了关于它的帖子(到Prototype&script.aculo.us邮件列表);下面
请记住,解析HTML并快速呈现它是浏览器所做的事情,浏览器为此进行了高度优化。如果将包含复杂HTML结构的字符串指定给容器元素的innerHTML
属性,则将从JavaScript层切换到浏览器的呈现层,之后浏览器的解析和呈现代码可以不间断地进行
相反,如果您正在使用domapi构建一些复杂的结构,那么不仅会发生大量的跨层迁移(JavaScript->browser->JavaScript),而且浏览器还必须使用domapi,而不是其内部结构
因此,通常值得一看编写良好的JavaScript模板引擎(如果您想在客户端执行此操作)。它们通常会将模板“编译”成易于处理的形式,在处理特定数据集的过程中,它们会使用一些技巧,例如通过array#push
将字符串构建为数组中的片段,然后通过array#join
传递”
作为分隔符来获得最终结果。对于大字符串,这可能比字符串连接更快,尽管它是否(以及在多大程度上)取决于实现(Firefox的SpiderMonkey与Chrome的V8与IE的JScript),这与innerHTML
与DOM不同,后者只在速度上有所不同
几年前我所说的信息(基本上就是我上面所说的;哇,那是两年前的事),它指的是,这里就是,最后……这里是代码:(请注意,代码是而不是旨在永远成为一件美丽和欢乐的事情,它是一个快速的破解…尽管如此,yeesh,我还是认为我应该在两年后的现在破解一些更好的东西。)
也许把这件事转化成能奏效的东西是值得的。恐怕现在没时间这么做了
<!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>
#日志{
边框底部:1px纯黑;
}
#对数p{
保证金:0;
填充:0;
}
document.observe('dom:loaded',function()){
$('btnDOMDirect')。观察('click',useDOMDirect);
$('btnPrototypeDOM')。观察('click',使用PrototypeDOM);
$('btnHTML')。观察('click',使用HTML);
});
var numRows=10;
var numCols=10;
函数usePrototypeDOM(evt)
{
var表;
变异体;
var-tr;
var-td;
var行;
var-col;
var启动;
var端;
开始=(新日期()).getTime();
表=新元素(“表”);
tbody=新元素(“tbody”);
表3.儿童(t身体);
对于(行=0;行
使用javascript执行此操作总是比较慢,因为它在页面加载上运行,而不是像在HTML中添加元素那样在页面加载上运行。但是,如果没有HTML中的元素,您也可以说页面的实际加载更少(虽然不明显)
不过,另一点是,javascript在垃圾收集方面非常糟糕,因此如果进行大量DOM调用,它最终将开始增加您的处理能力
另外,如果您对维护语义网站感兴趣,您是否需要标签