Pull to refresh

Простой способ немного разгрузить инициализацию javascript на странице

Reading time 1 min
Views 2.3K

Возможно, кому-то будет полезной такая мысль.


У вас есть большой многостраничный сайт. На разных страницах у вас разные сложные яваскриптовые штуки: красивые галереи, аяксовые листалки, где-то вообще чуть ли не приложение сделано. Все это крутится на каком-нибудь 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", то парсер пройдет мимо и не будет пытаться найти на странице все, что вызывается относительно приложения.

Мелочь, а приятно
Tags:
Hubs:
-2
Comments 58
Comments Comments 58

Articles