- PVSM.RU - https://www.pvsm.ru -
Доброго времени суток, читатели. Хочу поделиться неким опытом (советами) при работе с JavaScript + jQuery (по сути, вместо jQuery можете подставить любой другой JS фреймворк). Статья будет интересна новичкам JS и jQuery, но и динозаврам опытным проходить мимо не стоит, в ней вполне можно найти полезную информацию. В основном, в статье я привожу не однозначные случаи, но и место для «стоТыщРазПовтор» я счёл уместным.
Сплошь и рядом встречаю загрузку JS файлов в теге <head>
. В большинстве случаев — это не корректно! Почему? В этом случае JS начинает загружаться до загрузки HTML, и как следствие клиент дольше ждёт загрузки информации за которой он пришёл. Размещение скриптов в <head>
оправдано только в тех случаях, когда JS используется в качестве контроллера (к примеру, всё содержимое на странице мы достаём поблочно через AJAX запросы, в зависимости от URL или Hash). Если не используем, то гораздо лучше вставлять скрипты перед зыкрытием тэга </body>
. JS начнёт загружаться только после того, как посетитель увидит страницу.
Размещение инициализации скриптов непосредственно перед закрытием тега </body>
практически не влияет на «начало» работы скриптов. В большинстве случаев используют jQuery( document ).ready( function () { ... }
, что в свою очередь всё равно запускает скрипты только после загрузки HTML. Это как закупаться бензином до того, как купили автомобиль.
Это ужасно!
callback()
).Тема стара как мир, первым результатом в поисковике на запрос об оптимизации выдаст статью про селекторы. И тем не менее, из раза в раз, на это просто забивают. Как говориться, повторение — мать учения.
Селекторы сильно сказываются на производительности сраницы. К примеру из моей недавной практики, всего из-за одного селектора коллеги в тонне скриптов, сайт буквально висел 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 )
Думаю уместным здесь будет упомянуть про очереди анимаций и одновременной анимации нескольких элементов — так как, это приоритарная оптимизация, но копипастить вдаваться в подробности не стану, ибо поисковик выдаст всю нужную информацию по этим пунктам (в футере приведу ссылочки).
Маргин (margin
— CSS свойство) — вот первый враг анимаций.
Как-то приходилось мне разрабатывать проект с дикой анимацией и своеобразным UI (Блочный сайт, где каждый блок может быть увеличенным или приближенным. Т.е. приближение заменяет переход по ссылке, а уменьшенный вид, это что-то вроде полноэкранной навигации. Плюс размытие элементов в уменьшенном виде, плюс тач ивенты на переходы, навигация на клавиатуре, слайды, карусели, плавное появление всплывающих окон и т.д.). В кратце, ну просто всё движется одновременно.
Плавное передвижение огромных и при этом отзумленых уменьшенных изображений — это уже не всегда просто. А если таких изображений 13, и все нужно анимировать одновременно (эффект размытия)? Это полноценный вывих margin
. Поскольку элементы распологались лесенкой (с разными отступами), то было необходимо использовать либо margin
, либо padding
, либо left
. Методом тыка и множественных переборов, в моём случае отказ от margin
поднял FPS с ~20 до ~35 (Opera, Firefox, IE 7,8. Chrome и так показывал 100).
Как однозначное правило выносить это не стану, только как совет, на что можно обратить внимание.
Спасибо за внимание и потраченное время, на этом всё.
Узнать больше о jQuery Очередях [ENG] [2]
Узнать больше о jQuery анимации нескольких элементов [ENG] [3]
Автор: andrewiWD
Источник [4]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/45115
Ссылки в тексте:
[1] мозга: http://www.braintools.ru
[2] jQuery Очередях [ENG]: http://dyn.com/blog/why-jquery-queue-should-be-your-new-best-friend/
[3] jQuery анимации нескольких элементов [ENG]: http://www.benknowscode.com/2012/09/animating-multiple-elements_1805.html
[4] Источник: http://habrahabr.ru/post/196580/
Нажмите здесь для печати.