Javascript 仅使用Chrome进行慢速图像绘制

这是一个基本的文本输入，它将化身图像和文本添加到一个类似聊天的框

div

，化身可以是任意数量的数百个，所以我不能仅仅将其作为一个类

问题：通过html插入使用标准的

，会使Chrome中的图像重绘速度变慢。 IE和Firefox立即显示图像（缓存第一个条目后）

我已经对主函数本身进行了计时，它在6毫秒左右完成（很好），但是在那个阶段Chrome已经渲染了文本，甚至还没有开始渲染图像。 在另一台速度更快的计算机上测试-无变化

html:

---

真烦人！我遇到了完全相同的问题：动态创建的图像在FF中不会闪烁，但在Chrome中会闪烁

我没有任何关于Chrome内部的参考资料来说明它为什么会发生，但下面是当它发生在我身上时我是如何解决它的。2件事：

1。不要使用

img src

将图像作为背景图像加载到分区。Chrome必须以不同方式加载/缓存这些图像

2。预加载图像。

这就完全不同了。在FF中，您可以通过创建包含图像的DOM元素ala来实现预加载

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);
}

拨弄

---

这是一个完整的FUBAR：我（在一些史前阶段）使用PHP强制浏览器通过无缓存选项拾取新图像。 一个非常糟糕的主意

与其他浏览器相比，Chrome遵循的政策更为无情

我回答的重点是，在图片url的末尾使用“？number_here”，作为一项广泛的js策略，将在不影响速度的情况下提供完美的更新

当您希望在浏览器刷新时进行完美更新时，请更改“此处编号”。 使用变量是明智的

var $img=$('<img>');
$img.attr('src','image.ext');
$img.css({position:'absolute',top:'-10000px',left:'-10000px'});
$('body').append($img);

pv='？24'；
...
输出=''；
...

你已经掌握了一些东西，不过是在你的小提琴上。如果您键入一个字母（如a）并按enter键，它将快速加载最多15次，然后缓慢加载。如果在第四行或第五行之后键入“aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa。一旦它慢了，它就不会回来了：-（我明天会查出来。下次我会对答案而不是问题发表评论，这样我就会收到通知：）哦，很抱歉-威尔do@user975033我试着玩它，但它发生的情况（等待15次，键入大量字母等）不足以在相同条件下解决和/或可靠再现闪烁。有时会闪烁，有时不会。也就是说，我不会再深入调查这件事了。我认为目前的方法涵盖了大多数情况。我认为我的电脑一定速度较慢，它是一个缓慢的重画，而不是闪烁，但感谢你的努力，经过一些研究，我发现这可能是Chrome v40的问题。不过，你的回答将来会对其他人有所帮助。是否只针对Chrome v40？是的。这并不让我感到惊讶，那个浏览器完全是为了速度而进行时髦的优化，这自然会适得其反，使某些东西重新绘制的速度比FF慢！希望这些代码能对你有所帮助！还没有确认，但6个月前的Chrome肯定是以浏览器通常的速度绘制的。从我最近读到的内容来看，Chrome40似乎有一些问题，在某种程度上使用了不同的引擎。

.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;
}

var $img=$('<img>');
$img.attr('src','image.ext');

var $img=$('<img>');
$img.attr('src','image.ext');
$img.css({position:'absolute',top:'-10000px',left:'-10000px'});
$('body').append($img);

ngcClientTag = 0;
opt_avatar = '1';

/* PRELOAD *///===========================
//you know the avatar number, grab the image
var img='http://parkbenchgames.com/images/ava/' + opt_avatar + '.png';
//make it a background style instead of an img tag
var bgStyle="background-image:url("+img+")";
$(document).ready(function () {
//preload the image!
displayMsg();
//use setTimeout to make sure we are on the next iteration of event loop
setTimeout(function() {$('.msg1').remove()},0);
});


function displayMsg() {
    var message = $('#outgoing').val();
    $('#outgoing').val('');
    ngcClientTag++;
    var innerHtml =
        '<div id="c_m_' + ngcClientTag + '" class="msg1">';
                 //display img in div instead of img tag
                 //borrow class msg2 to give it the same dimensions as the img
    innerHtml +='<div style="float:left;'+bgStyle+'" class="msg2">' +
        '</div>' +
        '<div>' +
        '<div class="msg3" id="s_m_' + ngcClientTag + '">' +
        '</div>' +
        '</div>' +
        '<div style="clear:both">' + '</div>' +
        '</div>';
    $("#newMsg").append(innerHtml);
    $("#s_m_" + ngcClientTag).text(message); // for text safe insert
}

pv = '?24';
...
output = '<img src="\images\icon20.png"'+pv+'>';
...