Инициализация
Сплошь и рядом встречаю загрузку JS файлов в теге
<head>. В большинстве случаев — это не корректно! Почему? В этом случае JS начинает загружаться до загрузки HTML, и как следствие клиент дольше ждёт загрузки информации за которой он пришёл. Размещение скриптов в <head> оправдано только в тех случаях, когда JS используется в качестве контроллера (к примеру, всё содержимое на странице мы достаём поблочно через AJAX запросы, в зависимости от URL или Hash). Если не используем, то гораздо лучше вставлять скрипты перед зыкрытием тэга </body>. JS начнёт загружаться только после того, как посетитель увидит страницу. Размещение инициализации скриптов непосредственно перед закрытием тега </body> практически не влияет на «начало» работы скриптов. В большинстве случаев используют jQuery( document ).ready( function () { ... }, что в свою очередь всё равно запускает скрипты только после загрузки HTML. Это как закупаться бензином до того, как купили автомобиль.
Inline JavaScript в HTML коде
Это ужасно!
- Во-первых, это некрасиво, неуклюже и со старта похоже на костыль.
- Во-вторых, инлаин скриптинг плохо контролируется через JS контроллеры (сюда я отношу как редактирование кода, так и функциональность по типу
callback()). - И наконец, эти скрипты не могут быть автоматически минифицированы и сжаты (gzip), что скажется на производительности продакшн сервера.
Селекторы
Тема стара как мир, первым результатом в поисковике на запрос об оптимизации выдаст статью про селекторы. И тем не менее, из раза в раз, на это просто забивают. Как говориться, повторение — мать учения.
Селекторы сильно сказываются на производительности сраницы. К примеру из моей недавной практики, всего из-за одного селектора коллеги в тонне скриптов, сайт буквально висел 8-10 секунд. Для выбора инпута формы, использовался jQuery( 'input[name="some-specific-name"]' ) и это на странице с ~ 10 формами и ~ 300 полями… Замена этого селектора на ID — и, вуаля, висяк response time упал до 60-90 мс.
Буду краток: всегда используйте ID в селекторе. Если нет такой возможности, используйте ID родительского элемента, а только затем другой (класс, тег или атрибут).
jQuery( '#element-id' ); // Это супер
jQuery( '#parent-element-id .needed-class-name' ); // Это хорошо
jQuery( '#parent-element-id a' ); // Можно конечно и так
Используйте .filter(), чтобы отфильтровать элементы, вместо перебора .each()
Для выбора первых, последних или определённых элементов используйте .first(), .last(), .eq( index )
Всё предельно просто, ведь селекторы из JavaScript или jQuery напрямую зависят от разметки страницы. Как быть в случае, когда в вёрстке нет ни единого класса и идентификатора (мистика, конечно, но как понятный пример должен сойти).
Анимация
Думаю уместным здесь будет упомянуть про очереди анимаций и одновременной анимации нескольких элементов — так как, это приоритарная оптимизация, но копипастить вдаваться в подробности не стану, ибо поисковик выдаст всю нужную информацию по этим пунктам (в футере приведу ссылочки).
Маргин (margin — CSS свойство) — вот первый враг анимаций.
Как-то приходилось мне разрабатывать проект с дикой анимацией и своеобразным UI (Блочный сайт, где каждый блок может быть увеличенным или приближенным. Т.е. приближение заменяет переход по ссылке, а уменьшенный вид, это что-то вроде полноэкранной навигации. Плюс размытие элементов в уменьшенном виде, плюс тач ивенты на переходы, навигация на клавиатуре, слайды, карусели, плавное появление всплывающих окон и т.д.). В кратце, ну просто всё движется одновременно.
Плавное передвижение огромных и при этом отзумленых уменьшенных изображений — это уже не всегда просто. А если таких изображений 13, и все нужно анимировать одновременно (эффект размытия)? Это полноценный вывих мозга. Тут, собственно, и был найден самый злостный враг — margin. Поскольку элементы распологались лесенкой (с разными отступами), то было необходимо использовать либо margin, либо padding, либо left. Методом тыка и множественных переборов, в моём случае отказ от margin поднял FPS с ~20 до ~35 (Opera, Firefox, IE 7,8. Chrome и так показывал 100).
Как однозначное правило выносить это не стану, только как совет, на что можно обратить внимание.
Спасибо за внимание и потраченное время, на этом всё.
Подвал
Узнать больше о jQuery Очередях [ENG]
Узнать больше о jQuery анимации нескольких элементов [ENG]
This entry passed through the Full-Text RSS service — if this is your content and you're reading it on someone else's site, please read the FAQ at fivefilters.org/content-only/faq.php#publishers. Five Filters recommends:
- Massacres That Matter - Part 1 - 'Responsibility To Protect' In Egypt, Libya And Syria
- Massacres That Matter - Part 2 - The Media Response On Egypt, Libya And Syria
- National demonstration: No attack on Syria - Saturday 31 August, 12 noon, Temple Place, London, UK
Комментариев нет:
Отправить комментарий