Содержание
Хочу поделиться неким опытом (советами) при работе с 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?
Анимация
Думаю уместным здесь будет упомянуть про очереди анимаций и одновременной анимации нескольких элементов — так как, это приоритарная оптимизация, но копипастить вдаваться в подробности не стану, ибо поисковик выдаст всю нужную информацию по этим пунктам (в футере приведу ссылочки).
Маргин (margin — CSS свойство) — вот первый враг анимаций.
Как-то приходилось мне разрабатывать проект с дикой анимацией и своеобразным UI (Блочный сайт, где каждый блок может быть увеличенным или приближенным. Т.е. приближение заменяет переход по ссылке, а уменьшенный вид, это что-то вроде полноэкранной навигации. Плюс размытие элементов в уменьшенном виде, плюс тач ивенты на переходы, навигация на клавиатуре, слайды, карусели, плавное появление всплывающих окон и т.д.). В кратце, ну просто всё движется одновременно.
Плавное передвижение огромных и при этом отзумленых уменьшенных изображений — это уже не всегда просто. А если таких изображений 13, и все нужно анимировать одновременно (эффект размытия)? Это полноценный вывих мозга. Тут, собственно, и был найден самый злостный враг — margin. Поскольку элементы распологались лесенкой (с разными отступами), то было необходимо использовать либо margin, либо padding, либо left. Методом тыка и множественных переборов, в моём случае отказ от margin поднял FPS с ~20 до ~35 (Opera, Firefox, IE 7,8. Chrome и так показывал 100).
Как однозначное правило выносить это не стану, только как совет, на что можно обратить внимание.
Спасибо за внимание и потраченное время, на этом всё.
Подвал
Узнать больше о jQuery Очередях [ENG]
Узнать больше о jQuery анимации нескольких элементов [ENG]
