12.07.2015 Views

Реактивные веб-сайты Николай Мациевский Евгений ...

Реактивные веб-сайты Николай Мациевский Евгений ...

Реактивные веб-сайты Николай Мациевский Евгений ...

SHOW MORE
SHOW LESS

Create successful ePaper yourself

Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.

Оптимизация структуры веб-страниц171Также стоит отметить, что по результатам тестирования Виталия Харисова(http://clubs.ya.ru/yacf/replies.xml?item_no=338) неиспользуемыеCSS-правила добавляют некоторую задержку в отображении страницы(до 10% от времени отрисовки), поэтому их тоже стоит избегать.Для средней HTML-страницы время ее отображения (размер DOM-дерева— 1000 элементов, CSS-правил — порядка 500, каждое из них в среднемприменяется к 40% элементов) составит порядка 100 мс. Простой оптимизациейможно уменьшить этот показатель вдвое (например, сузив область воздействиясамих селекторов, если DOM-дерево уменьшить не получается).5.4. ëÚ˚ÍÛÂÏ ‡ÒËÌıappleÓÌÌ˚Â ÒÍappleËÔÚ˚Этот раздел написан под впечатлением от статьи Steve Souders (авторазнаменитых советов Yahoo! касательно клиентской производительности)«Coupling Async Scripts» (http://www.stevesouders.com/blog/2008/12/27/coupling-async-scripts/). Steve проанализировал поведениеJavaScript-файлов при загрузке и предложил несколько путей для обходаих «блокирующих» свойств.Если скрипты загружаются в обычном порядке (),то они блокируют загрузку всех остальных компонентов страницы (в последнихверсиях Firefox и в Safari это не так, но речь идет в основном про 70%пользователей с IE) и блокируют отрисовку всей той части страницы, котораярасположена ниже вызова скриптов по HTML-коду. Асинхронная загрузкаскриптов (например, при помощи динамического создания объектов послесрабатывания комбинированного события window.onload) предотвращаеттакое поведение браузера, что ускоряет загрузку страницы.Единственная проблема с асинхронной загрузкой скриптов заключаетсяв их взаимодействии с внутренними скриптами страницы (а также с другимивнешними скриптами), которые используют переменные, определенные вовнешнем скрипте. Если внешний скрипт загружается асинхронно безо всяко-

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!