Одноразовый expression

6 December, 2007

XHTML/CSS, Полезности

Все уже часто сталкивались с специфическими для IE expressions, однако не все знают (я например не знал), что их можно оптимизировать. Об одном из приемов и пойдет дальше речь.

Проблема

Наверняка многие хакеры замечали, что когда expression становится много, то сайт начинает притормаживать в IE. Оно и понятно — они ведь исполняются при каждом действии на странице, будь то клик, наведение мышки, или ресайз экрана. Cмотрите сами. Для некоторых скриптов так и должно быть (min-width например), другим же достаточно одного выполнения(PNG fix, :first-child etc). О том как заставить их исполняться только один раз при загрузке и идет дальше речь.

Решение

Все решения используют один и тот же прием. Есть некий “флаг”, при наличии которого expression выполняется, скрипты же пытаются при первом же исполнении этот флаг убрать.

Вариант решения

Первый вариант выглядит так:

  1. jscript: expression(
  2. this.p ? 0 : (
  3. //а здесь пишем нужный нам код,
  4. this.p = 1
  5. )
  6. );

В данном случае в качестве флага используется абстрактное и несуществующее в спецификации свойство “p”. При первом выполнении, переменной p будет присвоена 1, а также выполнено наше действие. Таким образом при каждом следующем выполнении скрипта будет выполняться только this.p = 0. Что гораздо быстрее любых других операций.

Яндекс вариант

Вариация(false true переставили местами) на тему этого способа используемая в верстке Яндекса:

  1. b:expression(
  2. !this.a?
  3. (this.a=1, (this.previousSibling?this.innerHTML=’ ·’ + this.innerHTML:0)):
  4. 0
  5. );

В частности, этот скрипт ставит точки-разделители перед всеми “чайлдами”, кроме первого — такая вот эмуляция first-child.
Скорее всего принадлежит руке большого и уважаемого мною профессионала в верстке — Виталия Харисова

Второй тип, я использую

Есть и второй тип, используется CSS свойство, которое потом в самом expression “сбрасывается”, так, что expression при первом выполнении как бы “удаляет” сам себя:

  1. background-image:expression(
  2. this.runtimeStyle.backgroundImage = ‘none’,
  3. //а здесь пишем нужный нам код
  4. );

background-image тут играет лишь роль флага, на самом деле скриптить таким способом можно все, что вам нужно, как-то так выглядит эмуляция :first-child:

  1. background-image:expression(
  2. this.runtimeStyle.backgroundImage = ‘none’,
  3. this.previousSibling?false:this.className += ‘first-child’
  4. );

Когда мы присваиваем свойству none, соответственно и expression перестает исполняться.

Безопасно вместо background-image использовать всякие редкие свойства вроде azimuth.

Изучать дальше

Вообще за поднятую тему оптимизации expression спасибо Павлу Корнилову выступившему с соответствующим докладом на ClientSide 2007.

Следует помнить, что одноразовые expression нельзя применять для min-width, min-height и прочего. По понятным причинам подсчеты произведутся только при загрузке страницы.

XHTML/CSS, Полезности

21 комментариев к “Одноразовый expression”

Максим Покровский | 1. 8 December, 2007

Я стараюсь не злоупотреблять expressions. min-width и png и hover за глаза.
ИМХО, естественно

akella | 2. 9 December, 2007

Мне еще иногда приятно попользовать first-child, мы так отвыкли его использовать, что порой уже не замечаем его силы.

Вообще же =) я в душе твикер, и меня нервирует сам факт что эти экспрешны так часто пересчитываются

Евген | 3. 11 December, 2007

А что за хрень такая внизу, 508? По ссылке какие-то непонятные слова на аглицком языке.

akella | 4. 11 December, 2007

Почитайте http://cssing.org.ua/2004/10/14/russian-508/, хотя выучить аглицкий советую тоже

1smash1 | 5. 19 December, 2007

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

тур | 6. 25 December, 2007

Тоже иногда first-child юзаю, но это как раритет какой-то: )

Del'ka | 7. 12 February, 2008

освоил, большое спасибо!

Tutta | 8. 1 June, 2008

1. Не совсем по теме, но тоже ..

Предлагаю также рассмотреть в отд. посте тему:- “Мифы о ФФ”.
За основу можно принять статью известного гуру веба – Давида Хамунда ( David Hammond )
http://www.webdevout.net/firefox-myths

P.S. [З.Ы.]

Очень рекомендую ресурс. Много СИСТЕМАТИЗИРОВАННОЙ информации по свежим браузерам, CSS, ECMA … и не только.

2. Совсем не по теме

Никогда не была шовинистом в отношении определенного браузера. Но, признаюсь, что бывали моменты, когда хотелось убить NN4 , или Оперу, или ослика ИА и Рыжего Лиса !!! в том числе.

Много гуру сломали копий по поводу “логики” стандартов, написанных 3WC в т.ч. и “в пыку” зарвавшейся MS. Даже Сами Отцы стандарта не пришли к общему мнению об этой “логике”, приняв мнение большинства своего сообщества.

“Хороший индеец – мертвый индеец” – слова садиста и “людоеда” генерала Першинга.

“Плохой” / “хороший” браузер – понятие из ментальности детей и подростков.
Стандартный или нестандартный! Вот в чём вопрос Горацио.

А в остальном о “вкусах не спорят”. Ведь нет же проблем верстать под любой браузер В ОТДЕЛЬНОСТИ!

Кстати, ни один браузер не подходит под стандарты носорогов или фиников. Т.е. стандарт не догма, а руководство .. причем, не обязательное а рекомендательное для софт-девелоперов. И если вы не употребляете селёдку с молоком, то никакой стандарт потребления вас не заставаит это делать, поскольку – ЭТО ВАШЕ ЛИЧНОЕ !!

ЛИЧНОЕ ДЕЛО серфера – каким браузером пользоваться. Он нам НИЧЕГО НЕ ДОЛЖЕН!! Ни я, ни вы, ни он, НИКТО не терпит насилия в свой адрес. Поэтому детская демагогия о том, что всех надо ЗАСТАВИТЬ пользоваться стандартным и т.д. дебильна и порочна, по сути, как и демагогия 70 лет советской власти.

Это НАШИ проблемы, поскольку, “соно дэс ару” (яп.)!

Только дети или жлобы пытаются свалить свои обязанности на других. Кроссбраузерность – это наша работа, наша проблема и не надо сваливать свою лень на серфера или девелопера, на MS ли W3C.

P.P.S.

Но паддинги страницы в окне на весь экран монитора – НЕ ДЕЛАЕТ, в соответствии со стандартами 3WC, ваш монитор большего размера!!
:)

akella | 9. 1 June, 2008

Спасибо за мнение Tutta! Но почему вы решили его высказать именно в этом посте? :)
Со всем согласен, все это наши заботы. Что впрочем вовсе не мешает каждому из верстальщиков иметь свой взгляд и свои любимые слова для ИЕ :)

PS: Про паддинги – это вы о чем? О какой странице? Или вообще?

Tutta | 10. 2 June, 2008

Спасибо Юрий!

Из всех блоггеров вы самый толерантный автор.

Я писала, что “ЭТО НЕ ПО ТЕМЕ”. Так что можете удалить тот т.н. “коментарий”.

В одном из блогов целая толпа верстальщиков требовала от собратьев по цеху ЗАСТАВИТЬ серфера перейти на “самый-самый” один единственный стандартный браузер. Из монитора из щелей кнопок потекла густая струя яда.

ИЕ мне тоже не нравится, но и ФФ тоже не без …. Иногда некоторые повадки ИЕ очень даже …

О мониторе? Это в шутку. По поводу стандарта, гласящего, что паддинги увеличивают размер блока.

! ! !

А всё-таки, с вашим талантом разказчика не откажитесь от моего предложения написать пост “Сказки о Рыжем Лисе”.

По моему скромному ИМХО – это уравновесит “систему”. Стереотипы – тормоза развития. В вост. философии умеренность и Гармония это благо. Как говорил Кундзы: – “мера – мера всех вещей”. Браузерный “экстремизм” – разрушителен. То, что браузеры разные – только создает возможность каждому проявить свои таланты и способность к гибкому и нестандартному мышлению.
Естественно, не для обеднённых умом, воображением и не для ленивых.

Юрий, прошу – напишите постик!

P.S.
Я не против (и, даже наоборот – хочу), если вы удалите этот “НЕкомментарий”, к-рый, действительно не уместен здесь.
Рада с вами общаться.

akella | 11. 2 June, 2008

С Вашего позволения удалять не буду, ибо даже этот ваш комментарий еще один шаг к равновесию.

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

Вобщем надеюсь вы понимаете мои причины пока не писать этот пост =). Хотя в целом идея мне нравится.

А вот вам Tutta не хватает блога, на находите? :-P

Tutta | 12. 2 June, 2008

Чем и привлекателен ваш блог, так это тем что в нём, действительно, нет той грубой напористости в затаптывании чужого мнения. Спасибо “модератору”, к-рый держит “светский” стиль общения под контролем. Чувствуется нечто из восточных школ совладания с духом – ни одной грубой эмоции и мягко-спокойное спускание пара у эмоционального коментатора.

Речь шла об аутодафе еретиков совершенно на другом блоге.

akella | 13. 2 June, 2008

Вы, право, льстите. Стремиться я б к гармонии хотел.

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

Забавно, Tutta, у нас с Вами один провайдер =), У вас тоже днем тормозило сегодня? )

Tutta | 14. 3 June, 2008

Дело, собственно, не в браузере[ах]. Или не столько в браузерах, а в принципе.

Не приемлем лозунг: – “Загоним железной рукой тупое человечество к счастью пользования лучшим из стандартных средств и-нет серфинга!”

Я против насилия в отн. серфера и разработчика в ЛЮБОЙ форме.

За Свободу серфера выбирать любое ПО!!

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

Какой есть – такой есть.
В принципе, стандарт с одной стороны – великое благо, а с другой в нек. роде тормоз для новых идей в разработке. Большинство стандартов в гипертексе и стилях были приняты, как постфакт существующих до момента принятия стандарта свойств “тогодашних” браузеров.

Нетскейп внедрил свой нестандартный Layer – теперь это мертвый тег, как и урод NN4. Но появилось понятие слоя и лавина каскадных таблиц 2-го уровня. То же с JS коллекцией ALL ИЕ5.

Новаторство – это нарушение стандартов. Всегда. И к этому “злу” надо относится спокойно. Ибо, как говорил Лао Дзы – нет зла и добра. Есть РАЗНОЕ. Инь и Янь. Зло – это когда нарушается равновесие между ними т.е. между “разным”.

Диалектика, однако!

А заставить всех и вся перейти на единственное “любимое” ПО – это разрушение. Запрет развития.

А првайдер наш – паразит и монополист.

akella | 15. 4 June, 2008

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

Про провайдера, метко! Зато можно оплачивать вебманями =)

Tutta | 16. 7 June, 2008

Уважаемый Akella (сразу вспоминается старый чудесный мультик о Маугли), а есть ли у вас в ресурсе “раздел вопросов”, где можно задать вам вопрос на тему CSS, HTML, JS …?
Во-первых, на форумах вопрос на 3-4 посте вырождается в нечто чуждое изначальному. Редкий мЭтр веба снисходит до общения с лузерами или находит время и т.п. И часто вопрошающий остается ни с чем.
Во-вторых, ответ желательно получить компетентный.
Вы же Гуру. И всё знаете. Мудры и бщительны. Лучшего O’Cен-сея я бы не нашла.

akella | 17. 30 August, 2008

Был бы счастлив ответить на ваши вопросы. Это еще актуально?

AMBA | 18. 1 January, 2009

Не совсе согласен с мнением что наличие множества нестандартных браузеров, это проблемы исключительно верстальщика. Если свёрстанный ресурс популярен и очень полезен, а конечные пользователи некоторых браузеров лишены ряда возможностей и удобств из-за неподогнанной под их браузер вёрстки, то это уже становится проблемами пользователя, и он начинает искать в каком же браузере нужный ему сайт будет работать так, как нужно.
Или допустим завтра у гугла появятся уникальные, меганезаменимые фичи в хтмл/цсс не работающие нигде кроме хрома, и параллельно уникальные возможности для пользователей хрома, и начнётся глобальный передел рынка, тогда это будут проблемы производителей софта, сделать модные фичи работающими и у них.
Tutta – предположим топовых браузера было бы не 3-5, а 30-50 с одинаковой долей популярности, и все со своими особенностями, частично исключающими взаимное использование, и у вас на подгонку среднего сайта под все, уходило бы в среднем пол года, вы бы так же спокойно говорили о том что это проблема верстальщика?
Комплекснее надо смотреть и шире, стандартизация нужна, иначе без неё будет хаос невыгодный никому.

AMBA | 19. 1 January, 2009

P.S. нехороший монополист это воля? А они принимают оплату вебманями?

Samter | 20. 6 September, 2009

Полностью согласен с AMBA. и вот уже ютуб собирается отказаться от поддержки ИЕ6. И чья теперь это проблема недоступности ресурса?

STIL | 21. 6 April, 2010

Спасибо! а от IE6 давно пора отказаться, тот же хабр игнорирует его существование в своей верстке

Оставить комментарий