Оптимизация JavaScript и jQuery из-под HTML и CSS при разработке сайта

Доброго времени суток, Хабражители. Хочу поделиться неким опытом (советами) при работе с JavaScript + jQuery (по сути, вместо jQuery можете подставить любой другой JS фреймворк). Статья будет интересна новичкам JS и jQuery, но и ~~динозаврам~~ опытным проходить мимо не стоит, в ней вполне можно найти полезную информацию. В основном, в статье я привожу не однозначные случаи, но и место для «стоТыщРазПовтор» я счёл уместным.

Инициализация

Сплошь и рядом встречаю загрузку 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 )

Как это относится к HTML или CSS?

Всё предельно просто, ведь селекторы из 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]

ссылка на оригинал статьи http://habrahabr.ru/post/196580/