Оптимизируем CSS-производительность

Автор оригинала: Dean Edwards
  • Перевод
Примечание: ниже перевод статьи Dean Edwards «Optimising Performance» с советами по написанию CSS-кода для Internet Explorer'а, который будет быстрее отрабатывать на клиенте. Мои комментарии далее курсивом.

При первоначальном поиске информации по теме удалось только наткнуться на советы от разработчиков Firefox, однако, последняя редакция датирована 2000 годом, да и сами советы несколько противоречивы. Если кто-то может поделиться информацией по теме, сделайте это, пожалуйста, в комментариях.

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

читать дальше на webo.in →
Поделиться публикацией

Комментарии 37

    +6

    На тему DOCTYPE также советую ознакомиться со статьей «Тип документа: объявлять или не объявлять?», и сначала решить, будете ли вы его вообще использовать.)


    Немного смущают и напрягают подобные комментарии.. Кроме того, при всем уважении к студии Лебедева, указывать их как первоисточник для познания магии DOCTYPE, считаю немного нецелесообразным.
      0
      как первоисточник я их не указываю. Введение DOCTYPE на страницу (при его изначальном отсутствии) может привести к массовым проблемам верстки. В статье это хорошо расписывается.
        +2
        Может быть, но в контексте статьи это утверждение выглядит немного иначе.
      +7
      вы только поясните где-нибудь при переводе, что, когда Эдвардс говорит о IE7, он имеет в виду не браузер, а свою JS-библиотеку, которая должна эмулировать поведение CSS2-модели селекторов в IE6. а то пассаж:

      IE7 написан на интерпретируемом языке (примерно в 100 раз медленнее, чем cкомпилированный вариант)

      может несколько испугать общественность.
        0
        Спасибо. Очень интересно было узнать о скорости исполнения разных вариантов инструкций CSS.
        Как-то не задумывалась об этом. Все больше думала об оптомизации скорости всего CSS в целом.
          +1
          Хм. Уже по-моему туча подобных статей. Но за ссылку на Лебедева спасибо :-).
          ps
          Вот залил шпору по CSS, может надо кому
          http://imgspy.in/show.php?dir=yHfkzFG&img=80947b836df185f8.png
            +4
            Эта статья исключительно о скрипте «IE7» авторства Дина Эдвардса, и это обязательно следует отразить в заголовке. К интерпретации CSS на родном для браузеров уровне это имеет отношение крайне отдалённое.
              0
              Не вводите людей в заблуждение.
                0
                я бы рад с Вами согласиться, но заявленные тезисы справедливы, скорее, для всех распространенных браузеров, чем только для IE7 или только для JS-библиотеки. Если есть желание аргуметированно поспорить, то можно начать с DOCTYPE и ссылки на документация разработчиков Mozilla
                  0
                  Я думаю, что нативное строгое наследование вполне может работать быстрее, чем куча дополнительных селекторов.
                    0
                    можете привести ссылки на подтверждающие Ваше мнение источники? (я думаю, что Firefox/Opera/Safari это может быть верным, но только не для IE :)
                      0
                      Вы представляете себе хотя бы приблизительно разницу между скоростью работы исполняемого файла и интерпретируемого скрипта?
                        0
                        что Вы так к словам привязались. Дело не в абсолютной скорости исполнения, а в относительной. Если один алгоритм на одной языке программирования на одной платформе работает в разы быстрее другого, то при смене языка программирования (на той же платформе) эффект сохранится.

                        К тому же, IE использует для CSS-селекторов тот же движок, что предлагает в качестве DOM API, просто как исполняемый код он работает побыстрее.
                          0
                          Оба утверждения не обоснованы.
                            0
                            Виталий, полностью согласен, это только предположения. Крайне был бы признателен за любую дополнительную информацию
                              0
                              Я тоже, проблема ускорения рендеринга в MSIE для меня актуальна.
                                +1
                                тогда, боюсь, нас спасут только тесты, тесты и еще раз раз тесты :)
                        0
                        Какие ссылки? Я же не сказал «В ИЕ строгое наследование работает быстрее, чем куча дополнительных селекторов». Я имел в виду, что в принципе возможно реализовать такой алгоритм (в движке, а не в джаваскрипте), в котором строгое наследование будет быстрее.
                          0
                          :)) ну да, "в принципе" можно сделать браузер, который будет отображать страницу "по стандартам" :) даже вот Amaya есть...
                            0
                            К чему это было сказано?
                              0
                              "в принципе возможно реализовать такой алгоритм (в движке, а не в джаваскрипте), в котором строгое наследование будет быстрее"
                • НЛО прилетело и опубликовало эту надпись здесь
                    0
                    Ага, нанесём ядерный удар в 10кт по воробьям ^_^
                    А можно ссылку на пример подобного извращения?
                    • НЛО прилетело и опубликовало эту надпись здесь
                        0
                        Не понимаю при чём здесь xsl-fo, WYSIWYG, шаблоны, чайники и сантихники? "И тут Остапа понесло..."
                        Прочтите тему топика.
                        > после этого скармливаете документ скриптам и получаете
                        > набор файлов XHTML, CSS и картинок
                        Сильно сомневаюсь что это _оптимальный_ вариант, хотя могу и ошибаться, ибо так никогда не делал, весь css пишу руками.
                    0
                    Забавно: используйте *#myid вместо div#myid — и сразу же: используйте div.myclass вместо *.myclass.
                      +1
                      Я думаю, что при если написано просто #myid, то он работает очень быстро - ведь #id-элемент может быть всего один на страницу, и он вытягивается просто из какой-нибудь таблицы по ключу. Вот если написать *#myid, то, может быть, это будет медленнее, чем #myid, а соответственно, и div#myid. Но может и не быть.

                      А вот элементов с одним классом на странице может быть много, и поэтому целесообразно сужать поиск.
                        0
                        *#myid и #myid эквивалентны.

                        IE как раз-таки сквозь пальцы смотрит на несколько элементов с одинаковыми id.
                      +1
                      Закрывающий тег явно не туда втерся, немого сбивает с толку, поправте plz.
                        0
                        ps: я про </span> ;)
                        0
                        «Тип документа: объявлять или не объявлять?».
                        Особенно понравилась дата публикации... 22 ноября 2005

                        имхо: если есть стандарт то давайте его придерживаться или зачем его вообще ввели?
                        Кстати многие fw (например jquery) более корректно работают с обьявлением doctype + сюда и скорость...
                        и теперь ссылку на эту статью можно убрать, как не обязательную, а про историю можно в двух словах и здесь.
                          0
                          Что удивительно Лебедевцы так и верстают без доктайпа (не все, но в основном).
                          Как им вообще удается, обычно без него все разваливается нафиг.
                          • НЛО прилетело и опубликовало эту надпись здесь
                              0
                              Отсутствие доктайпа воспринимается браузерами как quirks режим, и в этом режиме можно точно так же спокойно верстать, как и любом другом. И ничего там не "разваливается".
                              Просто надо знать особенности каждого режима, и учитывать их при вёрстке.
                                0
                                Согласен, но не полностью...
                                Это все правильно для 20 века, но не для 21.
                                Вы забыли про fw и кучу браузеров и кучу настроек и плугинсов браузеров. Попробуйте сверстать вместе с jquery без doctype (кстати jquery вообще очень любит strict) + библиотеки на нем. Если стандарт введен, то он для чего-то введен.
                                  0
                                  Стандарты тут не при чём. Надо всё делать осознанно. Если сайтик простенький, то можно не указывать доктайп и верстать себе спокойно в quirks. Если требуется использование всякого разного навороченного, можно прописать соответствующий доктайп, чтобы оно работало.
                                  Просто глупо доказывать, что «надо всегда указывать доктайп» или наоборот. Надо всё делать осознанно, с какой-то целью. Требуется доктайп — укажи, не требуется — не указывай, вот и всё.
                                  А слова о том, что без доктайпа якобы что-то там разваливается (см. выше) — это глупость и признак неопытности.
                                    0
                                    Скажем так сейчас редко кто верстает маленькие сайты в 3-5 страниц только html.
                                    И скаже больше. Лучше сразу "привыкать". Потому что потом когда вы вставите doctype на ваши так называемые "шаблоны" то с удивлением обнаружите что всё что вы делали - зря.
                                    Я кстати не писал что разваливается что-то. Моя "тема" такая:
                                    Для того чтобы потом не было проблем в больших проектах надо и в маленьких "привыкать" ставить doctype. Всё! (кстати, как советуют желательно strict)

                          Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                          Самое читаемое