2012-06-01 5 views
1

В настоящее время я работаю над плагином для автоматической установки PIE.
Он просматривает все таблицы стилей CSS CSS, проверяет свойства CSS3 с помощью indexOf, а затем вызывает метод привязки PIE в том случае, если он нашел какой-либо для текущего селектора.
Основной цикл выглядит следующим образом:PIE.js низкая производительность

for (var j = 0, length2 = styleSheet.rules.length; j < length2; j++) { 
     rule = styleSheet.rules[j]; 
     // the replacedProperties is a simple array 
     // with string values for css properties - border-radius and so on 
     $.each(replacedProperties, function(index, property) { 
      if (rule.style.cssText.indexOf(property) !== -1) { 
       try { 
        $(rule.selectorText).each(function() { 
         PIE.attach(this); 
        }); 

       } catch(e) { } 
        return false; 
       } 
      } 

     }); 
    } 

Это на самом деле довольно медленно, подбегая к 2s на CSS3 тяжелые страницы в IE8 и IE7.
Вопрос в том, можно ли как-то улучшить производительность этого цикла?
PIE.js фактически оптимизирует повторное прикрепление, поэтому проверка того, был ли прикреплен PIE, ничего не сделает.
И стандартная техника отряда $ .fn.detach печально не работает с PIE (хотя я не пробовал версию ванили).
Буду благодарен за любые ответы.

+0

ПОЧЕМУ вы хотите это сделать? PIE делает это автоматически. И я предпочитаю 'pie.htc', это только срабатывает в IE и не является дополнительным запросом для других браузеров. – Christoph

+0

Но он прикрепляется только к PIE.attach, не так ли? – opportunato

+0

Причиной этого является отказ дизайнеров и разработчиков от необходимости добавлять классы для приложения PIE вручную. – opportunato

ответ

1

Я рекомендую вам прочитать документы, особенно о pie.js: http://css3pie.com/documentation/pie-js/

Теперь я использую pie.htc и к тому же имеет некоторые недостатки, он Hase больше преимуществ, так это preferrable решение.

Вы можете определить, какие стили должны обрабатываться непосредственно в css - где это необходимо, объявив behaviour(/absolute-path-to-pie.htc);. Это намного быстрее, чем повторение ВСЕХ стилей и стилей, и THEN, содержащих пирог. Также вы можете легко добавить это в условную таблицу стилей. Я думаю, что это должно в значительной степени решить ваши проблемы - не нужно перебирать все стили вручную.

+0

Но вы все же должны указать поведение для каждого существующего элемента. – opportunato

+0

Прикрепление pie.js динамически намного более гибкое - вам не нужно ставить эту модернизационную логику в css, вам просто нужно добавить один простой плагин. Это просто вопрос жертвования производительности для гибкости. – opportunato

+2

Просто добавьте строку, ссылающуюся на pie.htc, в ваши микшины для CSS, тогда, когда вы включите радиус границы, он просто добавит подходящий CSS. Если вы используете SASS, вы можете просто расширить свой класс, сделав CSS очень минимальным для достижения этого. –

0

Большой вентилятор PIE здесь. Однако, когда дело доходит до производительности, стоимость больше, чем можно было бы себе представить. Недавно был разработан веб-сайт на компьютере монстра, так сказать, под управлением Windows7 с IE8 и несколькими виртуальными машинами для тестирования. Протестированы как PIE 1.0, так и PIE 2.0 beta. Хотя в начале проекта и с несколькими десятками элементов с приложением PIE, IE, похоже, задыхается от прокрутки вниз и при использовании эффектов jQueryUI и анимаций. С pie 2.0, отключая опросы, кажется, улучшает производительность, но побеждает цели, для которых в первую очередь используется пирог ... вы получаете желаемый внешний вид, но ни один из эффектов. В конце концов, необходимо учитывать стоимость исполнения на стороне клиента. В 2010 году Google сообщила, что почти 48% веб-клиентов использовали IE в основном IE7 (winXP). Хотя цифры сильно изменились, поскольку некоторые просто не имеют средств для обновления. Все вещи, собранные вместе, доставка содержимого css3 через PIE может оказать большое влияние на клиента ... не зная, как 100% будет действовать, ваш клиент может дважды подумать перед тем, как получить доступ к вашему сайту, потому что он просто не ведет себя плавно (i я знаю). Итак, по крайней мере для этого проекта. я бросаю PIE и возвращаюсь к старой доброй PNG. Пока что спрайт, содержащий элементы, которые мне нужно стилизовать с градиентами и круглыми углами, меньше, чем PIE. Без сомнения, он будет увеличиваться, однако это не влияет на производительность, как раньше. Как раз для записи, я не знаю, как построены браузеры, и мне действительно неинтересно, но человек ... они взорвали это с IE.

Смежные вопросы