Задумывались ли вы когда-нибудь о том, сколько клиентов теряется за счет медленной работы сайта? Здесь идет речь не только о размерах файлов, но и о самом времени для обработки сайта.
Добавление сниппетов кода является очень эффективным методом, потому что оно экономит драгоценные секунды, когда браузеры пытаются обработать код.
В этой статье, вы получите несколько советов о том, как повысить эффективность работы сайта:
1. Не повторяйтесь
Вы должны использовать каскад и избегать повторения кода. Здесь нужно больше, чем просто помощь обычных классов, вы можете эффективно использовать наследства, например, некоторые свойства, которые могут быть установлены в родителе, должны там оставаться. Вы также можете использовать тот же набор свойств для нескольких элементов (разделение нескольких селекторов запятой).
Кроме того, при эффективном использовании объектов, функций и плагинов в JS , вам не нужно будет повторяться с кодом.
2. Пишите справа налево
В отличие от нас, браузеры обрабатывают jQuery и CSS селекторы справа налево. Вы можете подумать, что это не повлияет на ваш код, но правда в том, что это меняет все. Селектор, как в примере, действительно очень плох:
$(“body #container div a”)
Мы под впечатлением, что написали это: “Эй браузер, найди тег ‘body‘, затем внутри него найди #container. Там ты найдешь ‘div‘ и пару ‘a‘ элементов, так что выбери их“. Но браузер, на самом деле, читает всю страницу в поисках ‘a‘ тегов, затем для каждого найденого тега, он проверяет наличие div как родителя, затем проверяет если у div есть элемент с #container id, а потом смотрит есть ли наличие body тега под ними.
Всё слишком запутано. В JS у нас есть элегантное решение, такое как функция find, так что ваш код будет читаться так, как вам хотелось бы. Нечто подобное было бы написано таким образом:
$(“#container”).find(“div”).find(“a”)
3. ID’s всегда быстрее
Всякий раз, когда есть возможность, стоит использовать ID, они быстрее и в CSS и JS. При использовании JS у вас есть возможность применения альтернатив, нежели в jQuery для выбора тэгов, такие как document.body или даже прохождение всего дерева DOM в виде массива (если вы знаете точное расположение элемента).
4. Селекторы должны быть короткими
Имейте в виду, что иногда дополнительный пункт в селекторе, может просто испортить код. Например, если у вас есть “ul li a ” селектор, вы можете просто использовать “ul a”, и все будет прекрасно.
Лучший совет по JS, это “не использовать его”. В большинстве случаев, вам он просто не нужно, а если будете использовать, то вам это дорого обойдется в производительности, времени разработки, совместимости с браузерами и техническом обслуживании.
Вы можете заменить множество анимаций на CSS анимации, и вы также могли бы использовать библиотеку как yepnope или Modernizr, для условной загрузки fallbacks для браузеров.
5. Вы не обязаны объявлять переменные (vars), но стоит!
Многие просто пропускают шаг var декларации. Это нормально, но вы создадите много глобальных переменных, которые могут нарушить работу других функционалов, а также когда браузер должен их восстановить, он будет искать от местных до глобальных масштабов.
Даже если вы будете использовать глобальные var, вы можете переопределить их локально, таким образом вы сэкономите время. Например, вместо того, чтобы делать это:
var e1= document.getElementById('ID1'),
e2= document.getElementById('ID2');Сделайте это:
var doc= document,
e1= doc.getElementById('ID1'),
e2= doc.getElementById('ID2');Таким образом, вы будете локально сохранять документ var
6. Считайте так, как бы считали в уме
Мы склонны думать, что языки программирования занимаются какой-то черной магией и дают нам результаты сложных операций. Но правда в том, что каждая операция имеет свою стоимость обработки. Например, вместо того, чтобы делать 2 * 15 , намного легче сделать 15 +15.
Лучший совет здесь, это чем больше использовать родной JS код, и избегать опору на jQuery или другие плагины.
7. Удалите одно изображение из исходного кода
“На одно JPG движение меньше“ это лучше, когда говорят о том, что удаление одного изображения из исходника позволит сэкономить вам гораздо больше кусков, чем там, где вы сэкономите, беспокоясь о JS (и CSS). Но правда в том, что вы должны сделать оба.
Высоких конверсий!
Источник фото – Fotolia.ru
