Лучшая практика для селекторов jQuery/javascript sitewide?

Какова наилучшая практика для jquery/javascript на сайте. У меня есть несколько страниц в моем приложении, где javascript относится к этой странице. Лучше ли писать все это в один файл js и кэшировать его, или каждая страница имеет свой собственный js-файл. Я в основном беспокоюсь о производительности. Если у меня есть 2000+ селекторов и на данной странице применяются только 3 или 4, будет ли это мешать производительности, если все они находятся в одном файле js?Лучшая практика для селекторов jQuery/javascript sitewide?

источник

2013-12-13 KingKongFrog

Что вы имеете в виду 2000+ селекторов?Селектор должен быть строкой. Вы не выполняете 2000 + DOM-поиски? – jfriend00

Я выполняю 2000+ DOM-поиска в совокупности. – KingKongFrog

Поместите весь код в одном файле (держать их отдельно для развития, но имеет встроенный шаг, который сочетает в себе их), но только вызове код отношения к данной странице, так что вы не делаете много вызовов, которые ищут элементы, которых нет.

Таким образом, вы можете использовать кеш-заголовки, чтобы ваш код был кеширован на стороне клиента, когда пользователь перемещается между страницами, без каких-либо проблем с 200+ селекторами, из которых применяются только 3 или 4, что вызывает проблемы с производительностью.

источник

2013-12-13 19:06:16

Есть ли конкретный шаблон кодирования, который называется? – KingKongFrog

@KingKongFrog: Я так не думаю. –

По соображениям производительности вы НЕ хотите выполнять тысячи запросов DOM на каждой странице, если только 3 или 4 применяются к какой-либо конкретной странице.

Существует множество способов предотвратить выполнение множества бесплодных поисков DOM на каждой странице, некоторые - организацией кода (какой код присутствует на каких страницах), а некоторые - с помощью кодирования smarts (проверяя, какой тип страницы он есть и только выполняя поиск DOM, которые необходимы для этого типа страницы).

Есть практические преимущества для хранения большей части вашего кода в одном файле, который может быть эффективно кэширован браузером и не перезагружается при каждом переходе на новую страницу на сайте. В то же время вы действительно не хотите просто слепо запускать 2000+ DOM-поисков, когда только немногие могут найти то, что они ищут.

Вы ничего не рассказывали о структуре своего сайта или страниц, поэтому я могу только предлагать вещи в целом здесь, но то, что я сделал бы, это разбить ваши страницы на несколько категорий типов страниц. Место уникального маркера в каждой категории страницы - один общий маркер будет именем класса в теге <body>, который указывает, какова категория страницы. Затем, основываясь на категории страницы, вы выполняете только DOM-запросы, которые подходят для данной категории страниц, и вы избегаете выполнения большинства бесплодных поисков DOM. Опять же, это трудно быть конкретным здесь, но если у вас есть функция hasClass(), что бы увидеть, если элемент имеет определенное имя класса, то вы могли бы сделать что-то вроде этого:

if (hasClass(document.body, "main")) { 
    // execute only DOM searches appropriate for the "main" category of pages 
} else if (hasClass(document.body, "cart")) { 
    // execute only DOM searches appropriate for the "cart" category of pages 
} else if (hasClass(document.body, "index")) { 
    // execute only DOM searches appropriate for the "index" category of pages 
} else if (hasClass(document.body, "search")) { 
    // execute only DOM searches appropriate for the "search" category of pages 
}

Я также хотел бы бросить вызов почему вам требуется 2000+ отдельных запросов DOM при инициализации ваших страниц. Большинство запросов DOM не нужно выполнять во время инициализации страницы, но могут быть выполнены во время необходимости в ответ на какое-либо событие пользователя. Один заданный DOM-поиск редко бывает медленным (в пользовательское время), поэтому редко требуется выполнить проверку всех запросов DOM, которые вам когда-либо понадобились.

Все, что сказал, иногда имеет смысл разбить ваши JS в пару единиц и включают только некоторые единицы на некоторых страницах. Если «пара единиц» по-прежнему остается небольшим числом, он все равно может быть эффективно кэширован браузером. Все это зависит от специфики ваших страниц и вашего кода. Например, довольно часто сайт имеет один набор javascript для основного сайта и другой набор javascript для работы с корзиной покупок, и поскольку эти два не нужны на тех же страницах, сайт включает только тот или иной ,

источник

2013-12-13 19:18:58 jfriend00

Спасибо @ jfriend00 Если я добавляю класс в тело, разве я не делаю 2000+ поисков? Однако теперь единственная разница - теперь я добавляю новый аргумент поиска с классом body. Дайте мне знать, если я неправильно понял. – KingKongFrog

@KingKongFrog - Наверное, я недостаточно прояснился. Я добавил пример кода в свой ответ. Идея состоит в том, что вы будете тестировать класс body ONCE, и это сообщит вам, какой набор DOM-запросов выполняет или пропускает. Итак, если у вас было четыре типа страниц, с четырьмя тестами класса на теге тела, вы могли бы пропустить 1500 запросов DOM. – jfriend00

ahh, что намного яснее .... спасибо – KingKongFrog

Лучшая практика для селекторов jQuery/javascript sitewide?

ответ

Смежные вопросы