Поскольку вы пометили jQuery, я предполагаю, что вы используете его.
Прежде всего, вы должны максимально оптимизировать свой код, особенно код jQuery.
jQuery - это библиотека, которая использует базовые функции JavaScript, чтобы позволить вам писать меньше кода. Но меньшее количество кода не означает более быстрый код. Фактически, многие из задач, которые вы обычно выполняете с помощью jQuery, могут быть выполнены с помощью простого простого JavaScript, просто написав немного больше строк кода, но с более производительными сценариями.
Кроме того, помните, что не следует использовать слишком много слушателей событий. По умолчанию события всплывают по отношению к родительским элементам, поэтому вы можете прикрепить один родительский прослушиватель к событию, и все дочерние элементы смогут перехватить это событие через родительский прослушиватель, используя event.target
.
Если вы используете JavaScript для создания вещей, которые вы можете делать только с CSS и HTML, делайте это без JS, это быстрее.
Это всего лишь несколько советов по оптимизации кода, но я предлагаю вам поискать некоторые лучшие практики JavaScript и jQuery и вещи, которых следует избегать.
Здесь вы можете многое узнать о лучших практиках JavaScript, например.
EDIT
Поскольку кажется, что вы начинаете разработку веб-интерфейса, я добавлю кое-что, чего вы действительно хотите избежать при использовании jQuery.
Храните ссылки на элементы, которые вы искали, вместо того, чтобы искать их много раз.
// THIS IS BAD!
$('#foo').doSomething();
$('#foo').doSomethingElse();
$('#foo').doOtherThings();
// Better approach
var $foo = $('#foo');
$foo.doSomething();
$foo.doSomethingElse();
$foo.doOtherThings();
// You can also chain
$foo.doSomething().doSomethingElse.doOtherthings();
О слушателе событий, скажем, у вас есть много элементов внутри другого элемента
<div id="foo">
<p></p>
<p></p>
<p></p>
</div>
И вы хотите что-то с ними делать каждый раз, когда пользователь нажимает на теги <p>
.
// THIS IS BAD!!
$('#foo p').click( function() {
// do something...
});
// Better to use only one event listener attached to the container, and refer to the target element who originated the event
$('#foo').click( function( event ) {
// event.target is now the real element being clicked
});