Как можно оптимизировать такой jquery-код?

Question

[vedernikov]

Таких блоков имеется около 8 штук. Страница подгружается несколько секунд, что очень плохо. Можно как-нибудь оптимизировать и ускорить такой код?

$('.main').click(function() {
	$('.container').hide();
	$('.main-page').fadeIn();
return false;
});

$('.about').click(function() {
	$('.container').hide();
	$('.about-page').fadeIn();
return false;
});

$('.do').click(function() {
	$('.container').hide();
	$('.do-page').fadeIn();
 return false;
});

<ul>
    <li><a href="#" class="main">1</a></li>
    <li><a href="#" class="about">2</a></li>
    <li><a href="#" class="do">3</a></li>
</ul>

<div class="container main-page" style="display:block">
11111
</div>
<div class="container about-page" style="display:none">
22222
</div>
<div class="container do-page" style="display:none">
33333
</div>

Comments

[vgbege]

Не вижу, чтобы этот код как-то влиял на скорость загрузки. Для начала откройте в браузере developer tools и во вкладке network гляньте, что там грузится, сколько времени занимает.

Answer 1

[Александр Таратин]

Не нужно грузить все разом.
https://github.com/devote/HTML5-History-API + ajax

Answer 2

[amiksam]

Как связано время загрузки страницы и выполнение JavaScript в браузере?
Если дерево DOM страницы ну уж очень большое, то элементы $('.container') и др. можно закешировать. Но сомневаюсь, что проблема в этом куске кода.