Пол Хаммонд (Paul Hammond) написал большую статью под названием «Ускорь свой сайт с применением отложенной загрузки контента» (Speed Up Your Site with Delayed Content). В своем материале он изложил технику для погрузки части содержимого, такого как изображения аватаров профилей пользователя в комментариях, после первоначальной загрузки страницы, что дает хороший прирост производительности при загрузке страницы.

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

Проблема размещения непрерывного контента произвольного объёма в экран, или окно, фиксированных размеров, существует несколько десятков лет. Примерно столько же существует и лучшее решение этой проблемы: элемент графического интерфейса — скроллбар.

Под катом можно узнать, как в ближайшее время будет работать скролл в 2ГИС Онлайн.

Ссылка на стандарт: www.w3.org/TR/2013/WD-shadow-dom-20130514

Итак, что же такое shadow DOM:
Shadow DOM (или теневая модель документа) — часть документа, реализующая инкапсуляцию в DOM дереве. Она (теневая модель) является частью документа и встраивается непосредственно внутрь страницы.
Для упрощения отладки shadow DOM, в хроме можно включить отображение в веб-инспекторе (Settings — General — Show shadow DOM).

Надо заметить, что в стандарте реализуемая инкапсуляция называется функциональной, поскольку shadow DOM встраивается в документ и является одной из многих его частей, работающих «независимо» (более-менее независимо) друг от друга. Соответственно, при проектировании реализации, нужно было установить функциональные границы в дереве документа, чтобы как-то оперировать с множеством таких «независимых» фрагментов. Для решения проблемы инкапсуляции, и была введена новая абстракция — shadow DOM, позволяющая создавать несколько DOM деревьев в пределах одного родительского дерева и был разработан документ, описывающий ее.

Все мы слышали про ajax и node.js. Они прочно обосновались уже не просто в словарном запасе, но и в наборе инструментов веб-разработчика. Ajax — асинхронное подтягивание данных с сервера на страницу, node — фреймворк с асинхронным IO. Но как в таком однопоточном языке, как Javascript, реализуется та самая асинхронность?

Вы, наверное, уже догадались из заголовка, речь пойдет об основном цикле («main loop»).

Просматривая одно из обучающих видео "Школы разработки интерфейсов" Яндекса, наткнулся на ссылку на офигенный труд израильской веб-программистки Тали Гарсиэль (Tali Garsiel) "How browsers work" (Как работают браузеры).

Она в течение нескольких лет отслеживала всю издаваемую информацию о внутреннем устройстве браузеров, изучала исходный код WebKit и Gecko и, в конце концов, собрала все воедино. Вот что пишет сама Тали:

Когда на 90% компьютеров был установлен IE, приходилось мириться с тем, что это загадочный «черный ящик», однако теперь, когда более половины пользователей выбирает браузеры с открытым исходным кодом, пришло время разобраться, что скрывается у них внутри, в миллионах строк программного кода на C++...

Пролистав, я был поражен — отличная работа. Внутреннее устройство браузеров, алгоритмы разбора — все хорошо иллюстрировано, доступно и понятно. И без излишних подробностей, страниц на 30-40. Как раз то, что нужно. Решил — это надо обязательно перевести. Покопался еще немного — оказалось перевод уже как 1,5 года есть!

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

Под катом содержание перевода, чтобы решить стоит ли читать.

Три года назад, когда я работал веб-разработчиком на YouTube, один из старших инженеров начал разглагольствовать о слишком большом весе видеостраницы. Страница была раздута до 1,2MB и содержала десятки запросов. Этот инженер так и заявил: если целые клоны Quake пишутся с объемом до 100KB, у нас просто нет оправданий! Я согласился с ним и был в восторге от нового проекта, решив сделать страницу просмотра YouTube с весом ниже 100 КВ. В этот вечер, в автобусе, едущем из Сан-Бруно, я написал код прототипа. Я решил ограничить функциональность базовым минимумом: видеоплеер, пять похожих видео, кнопка «Поделиться», инструмент разметки и десять комментариев, загружаемых с помощью AJAX. Я назвал проект “Feather” (англ. — перышко).

Даже при таком ограниченном наборе функций страница весила около 250 КБ. Я углубился в изучение кода и понял, что наше средство оптимизации (т.е. Closure compilation) не способно исключить код, который никогда реально не используется на самой странице (чего и следовало ожидать от любого инструмента в сложившихся обстоятельствах). Единственным способом дополнительно сократить код было вручную оптимизировать спрайты CSS, Javascript и изображения. Три дня стараний — и я получил гораздо более удачное решение. И все равно это было не 100 КБ. Я совсем недавно закончил написание кода видеоплеера HTML5, и поэтому решил включить его вместо гораздо более увесистого Flash player. Бамс! 98KB, и всего 14 запросов. Я снабдил код некоторыми базовыми возможностями мониторинга и запустил его исполнение в части нашего трафика.