谷歌瀏覽器中的jquery hide（）和show（）運行太慢

我有一個web應用程序在chrome中無法正常運行。在Firefox中完美工作。我有一個包含大量列表項的頁面，準確地說是316。每個列表項都包含大量的HTML。我的問題是當我想隱藏或顯示這些列表項。谷歌瀏覽器中的jquery hide（）和show（）運行太慢

我有一個關於jsFiddle的測試頁來顯示我遇到的問題。我將HTML頁面分解爲一個無序列表以保存所有316個列表項。我有兩個按鈕，簡單地調用jQuery隱藏或顯示時單擊。同樣，在Firefox，Opera甚至IE中運行速度都很快，但在Safari中運行得非常好，但在谷歌瀏覽器中它可能需要超過30秒的時間，這會彈出一個對話窗口，詢問您是否要因腳本運行時間過長而終止頁面。

這裏是鏈接到的jsfiddle

http://jsfiddle.net/oumichaelm/UZCZc/3/embedded/result/

感謝任何輸入。 jmm

來源

2011-01-30 jmm

那是不尋常的。 Chrome的動態操作速度較慢。你有沒有嘗試分析它，看看它是緩慢的操作？ – Orbling 2011-01-30 03:08:50

奇怪的是，如果您使用Web Inspector通過CSS隱藏它也需要很長時間，所以問題不在於Javascript。可見性：隱藏速度很快，但我猜這並不能解決您的問題。 – Duopixel 2011-01-30 03:37:20

看起來這與jQuery無關，只是Chrome隱藏父元素的問題，該元素具有大量的子元素。

這只是使用基本JavaScript來隱藏文件準備的元素：

document.getElementById('sortable-lines').style.display="none";

而且它仍然需要後永遠的文件已準備就緒。

http://jsfiddle.net/petersendidit/UZCZc/10/embedded/result/

打開Chrome錯誤此：http://code.google.com/p/chromium/issues/detail?id=71305

來源

2011-01-30 03:40:12 PetersenDidIt

你能否請在Chrome中提交一個錯誤？ http://crbug.com/new讓我知道你提交的文件。我會用合適的團隊提出來。性能應該更好。它不可接受的發生，它打破了Chrome瀏覽器中的三個之一，這是「速度」 – 2011-01-30 04:11:35

隱藏的情況下，除去從DOM元素比使用hide()更快。

var sortableLines = $('#sortable-lines'); 
$('#hide').click(function() { 
    $('#timer').text("Hiding");   
    sortableLines.remove(); 
});

當您將append()返回到DOM時，它仍然很慢。

一個可能的解決方法是在點擊顯示按鈕時顯示前10個左右的項目，然後點擊setInterval逐步顯示它們。

編輯：發現了另外一個黑客：

您必須將容器設置爲overflow: hidden：

#linecontainer { overflow: hidden; }

隱藏當，移動該元素達遠頂部，通過設置margin-top到一個很大的負數。

$('#hide').click(function() { 
    $('#timer').text("Hiding"); 
    sortableLines.css('margin-top', '-1000000px'); 
});

當顯示時，重置其margin-top。

$('#show').click(function() { 
    $('#timer').text("Showing"); 
    sortableLines.css('margin-top', '0'); 
});

和it shows and hides instantly。

來源

2011-01-30 04:12:55 Thai

感謝上面的答案，它工作得很好，加快了過程。

但它並不總是工作 - 當我需要的元素位於列表的頂部時很好用。但是，如果我從列表中選擇一些東西，它不會顯示全部。

我相信我知道爲什麼它行事不端。

當元件的一個長列表的值被設置爲隱藏/顯示隱藏的元件從流中除去，並放置在頁面中被移走的順序的底部。
這使得刪除元素非常快。

然而，試圖讓他們看到又是在呈現一種痛苦鉻必須記住在這些項目屬於中，看似重新計算相關值的順序。

除了大多數其他瀏覽器之外，組件的位置不會丟失，因此不必浪費時間在這種不必要的排序中。上述答案非常好，因爲這可以避免Chrome的無序問題。

來源

2011-08-04 15:02:21 James

谷歌瀏覽器中的jquery hide（）和show（）運行太慢

回答

相關問題