Возможно, кому-то будет полезной такая мысль.
У вас есть большой многостраничный сайт. На разных страницах у вас разные сложные яваскриптовые штуки: красивые галереи, аяксовые листалки, где-то вообще чуть ли не приложение сделано. Все это крутится на каком-нибудь jQuery/Prototype/Mootools/etc., на каждую такую штуку вызывается кипа функций, сложные селекторы айди и классов и т.д. и т.п.
И все эти скрипты вы, как заботящийся о производительности девелопер, аккуратно засунули в один JS-файл и упаковали.
Но есть неприятность: при открытии каждой страницы ваш скрипт будет шерстить DOM, в попытках найти и выбрать все узлы, которые задействованы во всех вышеописанных «штуках». Т.е. сколько у вас в скрипте селекторов вроде
$('.myclass')
, getElementById
и т.п., столько раз после загрузки DOM он будет сканироваться в поисках этих элементов.А если у вас скрипт на 1.5 тысячи строк и таких селекторов у вас «over 9000»? Это будет тормозить загрузку страницы. Конечно, потери не столь большие, чтоб как-то сильно заморачиваться, но можно очень просто и легко от этого избавиться: заворачивать наборы функций, описывающие работу JS-приложений в проверку наличия этих самых приложений.
Т.е., если у вас есть какое-то приложение на странице, то оно сидит в каком-нибудь
<div id="my_app">...</div>
.Заверните все функции, которые описывают работу этого приложения в такую конструкцию:
if (document.getElementById('my_app')){ // code here }
и, если на странице нет узла с
id="my_app"
, то парсер пройдет мимо и не будет пытаться найти на странице все, что вызывается относительно приложения.Мелочь, а приятно