Jquery Live получает скрипт, вызывающий медленную работу браузера в IE - PullRequest
Новая
       1

Jquery Live получает скрипт, вызывающий медленную работу браузера в IE

0 голосов
/ 29 июня 2011

У меня есть блок кода, который обычно работает нормально, за исключением случаев, когда большие куски данных приходят в документ, тогда я получаю ошибку, упомянутую в заголовке.

Я прикреплял событие click к каждому элементу, как вы могли видеть в закомментированных строках, но затем я изменил все, чтобы жить, как я думал, что это было более эффективно. Несмотря на повышение скорости, он все равно дважды выдал предупреждение с просьбой остановить сценарий, прежде чем отобразить всю страницу.

Интересно, есть ли какой-нибудь возможный способ улучшить производительность следующего блока кода (скрипта), чтобы предупреждающее сообщение не появлялось при отправке большого количества данных на эту конкретную страницу.

ПРИМЕЧАНИЕ: я уменьшил количество кода, показанного до того, как был повторен код. эти два левых дают хороший пример функций, вызывающих у меня проблему. 

$(document).ready(function () {

//This adds the click event to toggle the next div right under the divLink clicked. 
//Old Code $(".divLink").click(function () { $(this).next('div').slideToggle(); });
$(".divLink").live('click', function (e) { $(this).next('div').slideToggle(); });


//Distribution 
//$(".Distribution").click(function () { $(this).parents().nextAll(".divDistribution").slideToggle(); });
$(".Distribution").live('click',function (e) { $(this).parents().nextAll(".divDistribution").slideToggle(); });

}); * * 1 010

Любые идеи, объяснение будет очень цениться.

Заранее спасибо.

Ответы [ 3 ]

3 голосов
/ 30 июня 2011

Эврика !!!

Я обнаружил, почему у меня возникают такие большие проблемы с производительностью при использовании .live в моем коде.

IСначала была проблема, упомянутая в моем вопросе, потому что я использовал document.ready + element.click () для выбранных элементов, так что это вызывало большие проблемы с производительностью, вплоть до оповещения " Прекратить запуск этого сценария? ".

Затем я изменил element.click () для element.live ('click', function () {}), потому что .live прикрепляет обработчик к событию для всех элементов, соответствующих текущему селектору.поэтому это должно быть намного быстрее, но это не так.

Причиной проблем с производительностью при использовании .live было то, что я оставил операторы с использованием .live внутри документа .ready ();и поэтому он ожидал, что страница будет обработана, чтобы прикрепить обработчик к четному для всех элементов.

Решение , извлекающее .live из документа .ready () какего не нужно.

Результат Теперь рендеринг страницы становится более светлым, независимо от размера документа.

2 голосов
/ 29 июня 2011

Добро пожаловать в мир IE.

Javascript Engine в Internet Explorer известен своей серьезной нехваткой производительности.

Вы можете найти много пыхтя и пыхтя об этом почти на каждом форуме.

MS ввела это предупреждение - то, которое сообщает пользователю, что «на странице медленно работает скрипт» (ИМХО), потому что им стыдно за то, как плохо он работает, и пытаются попытаться свалить вину на сайт Разработчики. К счастью, дискуссии на этот счет уже давнишние, потому что, наконец, MS бросила полотенце и решила полностью использовать веб-стандарты в своем последнем предложении. Надеемся, что эти проблемы исчезнут в течение короткого периода времени.

Я знаю, что это не очень хороший ответ, если ваша работа - это внутренняя корпоративная интрасеть, но в реальном мире большинство сайтов перенаправляют пользователей IE и ставят табличку с надписью «скачайте современный безопасный браузер, такой как FF Chrome или Safari, чтобы использовать» этот сайт "- чтобы избежать плохой прессы.

Я думаю, что это корень вашей проблемы, а не сам javascript.

1 голос
/ 29 июня 2011

Итак, вы сказали, что многим элементам назначается один и тот же прослушиватель событий, и я могу предложить обходной путь - привязать один приемник событий к их контейнеру, например, (при условии, что у вас похожая структура): 

<div class="DistributionContainer">
    <div class="divDistribution"><div class="Distribution">Clicky</div></div>
    <div class="divDistribution"><div class="Distribution">Clicky</div></div>
        ...
    <div class="divDistribution"><div class="Distribution">Clicky</div></div>
</div>

Привязать обработчик кликов к DistributionContainer вместо каждого .myElement. 

$('.DistributionContainer').click(function(e) {
    if (e.target.className=="Distribution")
        $(e.target).parents().nextAll(".divDistribution").slideToggle();
    }
});

Вот пример с 300 элементами распределения: http://jsfiddle.net/zCt6X/

...