Firefox Jquery приложение к неэффективности? - PullRequest
Новая
       41

Firefox Jquery приложение к неэффективности?

0 голосов
/ 23 июля 2011

Я работаю над редизайном портфолио, и у меня есть немного JS, который генерирует большое количество (около 300) элементов div, стилизует их и добавляет к телу.Это работает быстро и идеально в браузерах webkit, но когда дело доходит до Firefox, он медленный до чертиков.

Я пытался выяснить, почему Firefox не может справиться с этим, и я попытался объединить все div'ы 'html в виде строк и затем добавление всего этого к телу, но это оказалось медленным или медленным.

Если вы хотите увидеть проблему вживую, мой сайт - здесь

Вот соответствующие биты кода:

get_bokeh возвращает строку стилей CSS, описывающую один кусок "bokeh". 

function generate(){ 

            $("#bokeh_container").remove();
            if (q==0){
                min = 30,
                max = 30,
                bokeh_count = 1;
            }
            else if (q==1){
                min = 7,
                max = 10,
                bokeh_count = 300;
            }
            else if (q==2){
                min = 7,
                max = 15,
                bokeh_count = 300;  
            }
            else if (q==3){
                min = 8,
                max = 11,
                bokeh_count = 500;  
            }

            sum = min+max;

            window_width = $(document).width(); 

            window_height = $(window).height();

            colorful = $("#colorful").attr("checked");

            var container = $("<div />",{"id":"bokeh_container","style":"width:100%; height:100%; position:absolute; left:50%; margin-left:-600px; top:0px; z-index:1; display:none; "});

            for( var i=0;i<bokeh_count;i++){

                $("<div />",{"class":"bokeh","style":get_bokeh()}).appendTo(container);

            }

            container.appendTo("body").show();

Ответы [ 4 ]

1 голос
/ 23 июля 2011

Вы должны удалить .appendTo в цикле for.Вы говорите браузеру создавать дополнения к dom на каждой итерации, которая стоит дорого.Вместо этого добавьте объекты в массив или объедините их в строку (намного дешевле), а затем выполните одно добавление позже. 

var html = '';
for( var i=0;i<bokeh_count;i++){
    html += '<div class="bokeh" style="'+ get_bokeh()+ '"></div>';
}
var container = $("<div />",{"id":"bokeh_container","style":"width:100%; height:100%; position:absolute; left:50%; margin-left:-600px; top:0px; z-index:1; display:none; "}).html(html);
$('body').append(container);
0 голосов
/ 23 июля 2011

Ваш код не намного медленнее в FF, чем в Chrome.

Просмотрите и запустите этот тест производительности .

Кроме того, вы можете выполнитьстандартный: выключить Firefox, запустить Ccleaner , перезапустить FF Dance.

0 голосов
/ 23 июля 2011

Почему вы не используете классы CSS вместо встроенных стилей?Я вижу, у вас есть куча атрибутов стиля, установленных для контейнера и даже для div в цикле.Если вы установите эти стили в классе и будете использовать класс вместо этого, это определенно улучшит производительность, поскольку jquery не нужно перебирать все свойства при создании элемента.

0 голосов
/ 23 июля 2011

Проверьте этот тест jsperf: http://jsperf.com/test-of-jquery-appendto.

Построение HTML-кода в строку и последующее добавление его в DOM сразу показывает, что это в 2-3 раза быстрее в Chrome и Firefox и почти в 5 раз быстрее в IE8. Это не идеальная симуляция того, что вы делаете, но, вероятно, стоит посмотреть.

...