Производительность CSS Expressions



    F.A.Q. «Коротко о главном»



    Что такое CSS Expressions?


    CSS Expressions это проприетарная технология Microsoft, позволяющая в браузерах Internet Explorer (с пятой по седьмую версию включительно) использовать JavaScript в CSS-коде.

    CSS Expressions это хорошо или плохо?


    Это палка о двух концах. Экспрешены позволяют решить разные проблемы с некорректной блочной моделью IE и недостатками движка Trident.
    С другой стороны, они ощутимо влияют на производительность.

    Что значит «влияют на производительность»? Сколько слышу по интернетам, везде эта «производительность»!


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

    Ну, допустим. Что это за график?


    График нарисовал ProcessExplorer для шестого IE, в который был загружен вот этот макет (проект еще в разработке, не могу пока раскрыть, чей это сайт):



    Требование заказчика: «резина». Кроме того что резина, надо ограничить максимальную ширину, и установить минимальную. max/min-width рулят, но только не в IE. Поэтому через условные комментарии подключаем стили:

    * html #wrapper,
    * html #footer {
    width: expression(
    (document.compatMode && document.compatMode == 'CSS1Compat') ?
    (document.documentElement.clientWidth < 950 ? "950px" :
    (document.documentElement.clientWidth > 1300 ? "1300px" : "auto")) :
    (document.body.clientWidth > 950 ? "950px" :
    (document.body.clientWidth < 1300 ? "1300px" : "auto")));
    }


    А потом начинаем дрыгать сайт во все стороны. График, показывающий прожорливость IE прилагается.

    Ого. И что теперь? Ну их в баню, эти экспрешены, пойду с заказчиком потолкую насчет фикса лучше...


    Выход есть. Даже два. Только подходят они для отдельных случаев. Это одноразовые и кэшируемые экспрешены. Кратко по первым: значение вычисляется единственный раз при загрузке страницы. Подходят для добавления элементов в DOM, или для единоразового стиля какого-либо проблемного элемента. Кратко по вторым: значение вычисляется один раз до тех пор, пока не появится нужда его поменять. Подробнее по обоим: презентация Виталия Харисова, и видео-версия того же самого (второе предпочтительнее).

    Во, круто, спасибо. Пойду пробовать! Это, может еще какие-то рекомендации?


    Старайтесь свести использование CSS Expressions к минимуму, но если иного выхода нет (всякое в работе бывает) — по возможности оптимизируйте их. Подключайте их через Conditional Comments только тогда, когда нужно, а еще лучше — хорошенько подумайте, быть может, получится обойтись без них.

    P.S. Народ, я знаю что тут полно профессионалов, которые это уже знают. Давайте не будем кидаться ссаными тряпками и кричать «баян», ладно? Вы ведь не одни на этом ресурсе, пусть молодежь учится :)
    Share post

    Similar posts

    Comments 46

      +1
      Вывод, старайтесь верстать без експрешенов ;)
      Min-width & height 100% можно сделать и так ;)
      почерпнуть знаний в вёрстке, можно здесь
        –1
        Очень смущают фразы «проприетарная технология микрософт» и «с пятой по седьмую включительно».
        0
        Min-width без JS в IE: www.cssplay.co.uk/boxes/minwidth.html
          +1
          спасибо, я умею пользоваться гуглом. к несчастью, даже Стю Никколс не нашел решения одновременного max и min-width без экспрешшенов
            0
            Есть вариант для IE6 min-witdth сделать через CSS, а max-width — через expression. Либо не делать max-width вовсе и рассказать заказчику почему.
              0
              заказчик уже сказал, как ему нужно, и обсуждению это не подлежит — он вправе заказывать все, что ему хочется. ему было много раз предложено и оговорено, с чем придется столкнуться, но он остался непреклонен.

              и по-моему обсуждение взаимодействия с закачзиком не сильно стыкуется с темой топика.
                0
                и по-моему обсуждение взаимодействия с закачзиком не сильно стыкуется с темой топика.

                А по-моему, стыкуется. Из вашего же текста:
                Ого. И что теперь? Ну их в баню, эти экспрешены, пойду с заказчиком потолкую насчет фикса лучше...

                Т.е. вы прямо задаёте как одну из тем — взаимодействие с заказчиком.

                Кроме того. Я никогда не верил, что «запоминается только последнее», но данный случай наглядная иллюстрация. Если внимательно перечитать мой коммент, то станет очевидным, что там, кроме взаимодействия с заказчиком, есть ещё предложение.
                –1
                Или рассказать заказчику еще кучу всего об ИЕ6 и, если повезет, не делать ничего кроме «заглушки» для этого браузера.
                  0
                  у заказчика ИЕ6 основной и корпоративный браузер, ему плевать, что есть браузеры лучше.

                  к сожалению…
                    +1
                    Значит, не повезло…
                +2
                Я таки выложил свою эмуляцию habrahabr.ru/blogs/webdev/68917/
              0
              «не могу пока раскрыть, чей это сайт»

              Хабраэффекта боитесь?
                0
                эээ, нет, вовсе нет.
                0
                А можно подобный замер на IE7?
                  0
                  у меня на машине IETester стоит, не знаю, насколько честными будут эти измерения.

                  p.s. IE6, в которым производились испытания, «родной» для XP
                    0
                    Я к чему спрашиваю: IE6, слава богу, потихоньку отмирает, и если вы проведете замер, не важно чем будь то IETester или еще что и опубликуете сравнительный результат, то тогда можно будет говорить о перспективах подобной технологии.
                      0
                      ну, хорошо. вот график для IE7, запущенного из под IETester v0.3.5

                      <img src=«www.picamatic.com/show/2009/09/07/11/54/4992847_115x133.jpg» width=«115» height=«133>

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

                      из чего как будто можно заключить — ИЕ7 ест меньше на пиковой загрузке, однако в рабочих режимах нагружает проц сильней.

                      еще раз повторюсь — не знаю, насколько можно верить этому графику. ИЕ7 не „родной“.
                        0
                        парсер — лох, простите :) ну хоть линк работает
                        0
                        У этой технологии уже нет будущего, M$ в 8-ой версии IE не поддерживают expression
                    +2
                    Стоило бы ещё рассказать, что:

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

                    — Кешируемые (проверка на необходимость перед выполнением) могут убить, но иногда они единственный способ сделать более-менее сложное поведение.

                    — Бесконтрольные совершенно чётко убивают IE6
                      0
                      JS не выход? все равно expression не работает с отключенным JS
                        0
                        Выход, но тогда решение проблем вёрстки слишком размазывается — файл стилей, файл стилей-хаков, файл скриптов-хаков.
                          0
                          гым, ну, соглашусь. Только для IE все равно ситуация «размазывается»: стили для IE6, стили для IE7…
                            +1
                            Файл можно один, а дальше фильтровать — благо, всё известно.
                      –1
                      Надеюсь недолго осталось ещё мучатся с ИЕ6-7.
                        0
                        Для себя «изобрёл» глянув на код примеров такой min-width:

                        width:expression(function(t){
                        window.attachEvent('onresize', function()
                        {
                        document.body.clientWidth
                          0
                          И что, прям фигурные скобки работают внутри expression'а? )
                            0
                            Да.
                            По-сути, внутри expression вызывается attachEvent с анонимной функцией(или как там это правильно называется). Это то же самое, что создать обработчик с осмысленным именем, а после 'onresize' передать его имя.

                            Проверил в IE6 (Browser Sandbox, IETester). Работает.

                            P.S. Вычитал про возможные утечки памяти, которые лечатся снятием обработчиков на onunload, либо отказом от анонимных функций, то есть attachEvent('...', funcName); function funcName(){...}
                              0
                              Про утечки в IE: htmlcoder.visions.ru/Javascript/?29
                                0
                                Спасибо, я Вас поправлю только:
                                htmlcoder.visions.ru/Javascript/?29
                                • UFO just landed and posted this here
                                  • UFO just landed and posted this here
                                      0
                                      а бесполезно :) у меня в топике тоже маленькую букву вместо большой ставит :))
                                      • UFO just landed and posted this here
                                        • UFO just landed and posted this here
                                      0
                                      Дела, однако :)
                                      script должен быть с большой буквы.
                                      А парсер—лох
                                  0
                                  Гм… а почему фигурные скобки не должны работать внутри expression?
                                    0
                                    Наверное потому, что это происходит внутри других фигурных скобок,
                                    что, как мне казалось, вызывает проблемы парсинга.

                                    #box { width: function() {…} }

                                    …но если работает — почему нет.
                                      –1
                                      если это будет в общем файле стилей, есть вероятность, что остальные браузеры неадекватно воспримут фигурные скобки.
                                        +1
                                        Насколько я помню, если не указывать DOCTYPE у документа, то у expression'ов появляются проблемы с интерпретацией JS-кода (как раз на скобках сыпется). Но есть и обратный эффект: некоторый код может нормально работать в IE6 без доктайпа, но не работает с ним, хотя скобок нет.

                                        Я даже допиливал различные решения из Техногрета под работы с доктайпом :)
                                      0
                                      Ой, как плохо-то, парсер съел код.

                                      pastebin.ca/1556962
                                    • UFO just landed and posted this here
                                        0
                                        ресайз — тяжёлая операция независимо от экспрешшенов и браузеров. и редкая. остальные действия не особо и тормозят…
                                        • UFO just landed and posted this here
                                          • UFO just landed and posted this here

                                          Only users with full accounts can post comments. Log in, please.