Question

我正在使用html5数据属性来存储有关记录的信息，并在悬停时创建预览。我目前正在执行下面的代码，但有时会有点迟钝。它有效，但我仍然在学习，知道这不可能是最好的方式。

function showfileinfo() {
    var filetags = $(this).attr('data-filetags');
    var tags ='';

    if(filetags.length > 0) {
        $.each(filetags.split(','), function(index, item) {
            tags += '<div>' + item + '</div>';
        });
    }

    $('.tags').html('<div class="tag-image"><img src="/_ima/tag.png"/> tags</div>' + tags);
    $('#file-preview > h3:first').html($(this).attr('data-filetitle'));
    $('.file-name').html($(this).attr('data-filename') + ' - ' + humanize_filesize($(this).attr('data-filesize')));
    $('.description').html($(this).attr('data-filetext'));
    $('#file-preview').hide().fadeIn();

}

我正在更新此预览div。

<div id="file-preview" style="display:none;">
    <h3>Document Title</h3>
    <p class="file-name">acrobat.pdf - 4.06 MB</p>
    <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquet arcu nec tortor porttitor laoreet sollicitudin odio vestibulum</p>
    <div class="tags">
        <div class="tag-image"><img src="/_ima/tag.png"/> tags</div>
        <div>wireframe</div>
        <div>visio</div>
        <div>workflow</div>
    </div>
</div>

Answer 1

每次更改DOM时，浏览器都需要重新绘制页面。这需要时间。您应该尝试不要多次更改DOM（对于需要发生的每个更改，显然如果您执行ajax请求或更改用户交互，则需要再次更改它，但对于每个更改，您只应更改DOM 一次。）

此外，只需向选择器添加元素名称（div.tags而不仅仅是.tags）也会加快速度，如果它们全部位于#file-preview元素中，您应该肯定先选择那个，然后再从那里选择find()元素。这也将加速很多。

使用jQuery更新多个div的最有效方法是什么

1 个答案: