Это проблема, когда вы создаете страницу с довольно большим набором добавленных элементов. Чаще всего это НЕ проблема, но ВСЕ, что необходимо проанализировать и обработать как часть загрузки вашей страницы. Начните с исправления «базовых» вещей, посмотрите, как это происходит, и перейдите к следующему набору «вещей», которые негативно влияют на производительность нагрузки.
Давайте начнем с некоторых конкретных проблем, продемонстрированных здесь, а затем перейдем к некоторым общим.
НИКОГДА НИКОГДА не ставьте такие теги, как СКРИПТ или что-либо еще вне HTML-документа - вы заставляете браузеры вставлять / перемещать его внутри тела при этом. Большинство браузеров что-то делают с этим НЕВЕРНЫМ HTML, но почему бы не создать правильный HTML для начала.
Поместить CSS ДО тегов сценария
Сначала поместите CSS, упорядоченный «библиотекой» - вы включили библиотеку по причине, не важна каскадная последовательность - выполнение этого может даже сделать ваш СОБСТВЕННЫЙ CSS проще из-за этого «каскада» - воспринимайте это как склон вниз с вашими вещами у подножия холма. (jQuery, затем bootstrap, затем plugins, затем ваш и т. Д.)
Поместите код библиотеки JavaScript перед ВАШИМ кодом - попробуйте поместить его ВСЕ в конец страницы, если это возможно, особенно ВАШ код.
Общие комментарии:
- КАЖДЫЙ раз, когда вы делаете что-то вроде
drpSubServices.children(someselector').hide();, когда вы нажимаете на DOM, это, вероятно, только ЧАСТЬ проблемы, но она определенно внесет свой вклад.
- Как правило, библиотеки JavaScript имеют способы создания «консолидированных» комплектов для вещей, которые идут вместе - попробуйте включить их как один элемент вместо нескольких файлов .js
- Удалите закомментированный код в JavaScript - вот для чего нужен контроль исходного кода, не заставляйте браузер анализировать мусор во время процесса рендеринга. Пустые строки для меня тоже попадают в эту категорию.
- Рассмотрите возможность создания минимизированных версий кода JavaScript во время процесса сборки или ДО этого.
- "Модульная форма" вашего кода - похоже, вы используете MVC, поэтому создавайте частичные представления вещей и включайте их только тогда, когда / если вам это нужно. Размещение ВСЕХ CSS и JavaScript на каждой странице добавляет негативное влияние на страницы, где они НЕ используются. (см. примечание
.min в этом случае - даже БОЛЬШЕ важного для повторно используемого контента)
- Форматируйте лучше - вам действительно нужны 6 пустых строк в HTML? NO. - вряд ли это огромная проблема, но ПОЧЕМУ? (браузер вынужден анализировать ненужные вещи)
- ЕСЛИ это поможет ВАМ включить пустые строки, возможно, создать частичное представление? (модульный код?) (больше, чтобы помочь вам, а не браузер здесь)
- не используйте комментарии, такие как
<!-- -->, которые анализируются с учетом «не визуализированных» комментариев, например, если вы здесь используете MVC, вместо этого используйте эти комментарии MVC Как написать комментарий в представлении Razor?
КАК консолидировать попадания DOM: (может не быть специфичным для загрузки, но ЕСЛИ событие вызывает это)
Хит DOM один раз, не много раз:
Кэшируйте элемент: здесь вы ДЕЙСТВИТЕЛЬНО, но, если вы перевернете эти строки, НЕ дважды нажмите DOM:
$("#SubServices").show();
var drpSubServices = $('#SubServices');
новый:
var drpSubServices = $('#SubServices');
drpSubServices.show();
DO STUFF ONCE, не кратный
drpSubServices.children('option[class=HSE]').hide();
drpSubServices.children('option[class=AIMS]').hide();
drpSubServices.children('option[class=EngineeringServices]').hide();
... more code like that
Лучше: (не все, просто нажми ОДИН раз), пара способов сделать это
drpSubServices.children('option[class=HSE]').hide();// NOT a fast selector
drpSubServices.children('.HSE').hide();//faster selector but...still
Хит DOM ONE раз:
let options = drpSubServices.children('option');
options
.filter('.HSE,.AIMS,.EngineeringServices,.TPIs,.IIS,.NDTCM')
.hide();
options.filter('.SoftwareServices').show();
//OR better, just hide all and show the one
let options = drpSubServices.children('option');
options.hide();
options.filter('.SoftwareServices').show();
НЕ продолжайте воссоздание объекта:
if (ValueSelected == "m-SS") {
$("#SubServices").show();
var drpSubServices = $('#SubServices');
Сделай это один раз
let drpSubServices = $('#SubServices');
//NOW all the conditionals
if (ValueSelected == "m-SS") {
drpSubServices.show();
Разоблачение LAST
let drpSubServices = $('#SubServices');
if (ValueSelected == "m-SS") {
let options =
//... (see above for that)
// THEN show it
drpSubServices.show();
Другой пример:
$("#divDescription")
.add("#divSubServices")
.hide();
ИЛИ рассмотрим класс типа ".hidden {display: none;} on an element initially
Я не показываю`
Затем, когда вам это нужно, переключите этот класс
$("#divDescription").toggleClass('hidden',conditional);
//or
$("#divDescription").toggleClass('hidden',false);
//or
$("#divDescription").removeClass('hidden');