这是一个基本的文本输入框,它将头像图片和文本添加到类似聊天框的
问题:使用标准的
我已经计时了主要函数本身,它完成时间大约为 6 毫秒(非常好),但此时 Chrome 已经渲染了文本,甚至还没有开始渲染图片。在另一台更快的电脑上测试 - 没有变化。 http://jsfiddle.net/chrisadmin/yw24h2aj/ html:
div
中,头像可以是数百种不同的形式,所以我不能只使用一个类。问题:使用标准的
<img>
标签通过 html 插入会导致 Chrome 显示图像时出现缓慢的重绘。IE 和 Firefox 可以立即显示图片(在缓存第一个条目后)。我已经计时了主要函数本身,它完成时间大约为 6 毫秒(非常好),但此时 Chrome 已经渲染了文本,甚至还没有开始渲染图片。在另一台更快的电脑上测试 - 没有变化。 http://jsfiddle.net/chrisadmin/yw24h2aj/ html:
<div id="newMsg" style="border:1px solid black"></div>
<br/>Type some stuff and hit enter<br/>
<input class="ui-widget-content ui-corner-bl ui-corner-br" maxlength="400" type="text" id="outgoing" onkeydown="if (event.keyCode == 13) displayMsg()" />
js:
ngcClientTag = 0;
opt_avatar = '1';
function displayMsg() {
var message = $('#outgoing').val();
$('#outgoing').val('');
ngcClientTag++;
var innerHtml =
'<div id="c_m_' + (ngcClientTag - 1) + '" class="msg1">' +
'<div style="float:left">' +
'<img class="msg2" src="http://parkbenchgames.com/images/ava/' + opt_avatar + '.png"/>' +
'</div>' +
'<div>' +
'<div class="msg3" id="s_m_' + (ngcClientTag - 1) + '">' +
'</div>' +
'</div>' +
'<div style="clear:both">' + '</div>' +
'</div>';
$("#newMsg").append(innerHtml);
$("#s_m_" + (ngcClientTag - 1)).text(message);
}
CSS:
.msg1 {
position:relative;
margin-bottom:1px;
}
.msg2 {
position:relative;
margin-right:5px;
border:none;
height:25px;
width:46px;
}
.msg2a {
position:relative;
margin-right:5px;
border:none;
height:25px;
width:3px;
}
.msg3 {
position:relative;
top:4px;
margin-bottom:4px;
overflow:hidden;
}