Шесть рекомендаций jQuery для повышения производительности

JQuery является одним из самые популярные библиотеки JavaScript сегодня. Его API очень прост в использовании, что приводит к не очень крутой кривой обучения. Многие проекты используют код jQuery вместо непосредственного использования vanilla JavaScript для добавления динамических функций..

Но у jQuery есть и свои недостатки. Это может привести к некоторым проблемам с производительностью при неосторожном использовании точно так же как язык, на котором это основано. В этом посте будут перечислены некоторые из лучших практик использования jQuery, которые помогут нам избежать проблем с производительностью.

1. Ленивая загрузка скриптов при необходимости

Браузеры запускают JavaScript перед созданием дерева DOM и рисованием пикселей на экране, поскольку сценарии могут добавлять новые элементы на страницу или изменять макет или стиль некоторых узлов DOM. Итак, по предоставление браузеру меньше скриптов для выполнения во время загрузки страницы, мы можем сократить время, необходимое для окончательного создания дерева DOM и рисования, после чего пользователь будет возможность увидеть страницу.

Одним из способов сделать это в jQuery является использование $ .getScript загружать любой файл скрипта во время его необходимости, а не во время загрузки страницы.

$ .getScript ("scripts / gallery.js", обратный вызов); 

Это ajax-функция, которая будет получать один файл сценария, когда вы этого захотите, но обратите внимание, что извлеченный файл не кэшируется. Чтобы включить кэширование для getScript Вы должны будете включить то же самое для всех запросов ajax. Вы можете сделать это, используя код ниже:

$ .ajaxSetup (cache: true); 

2. Избегайте $ (window) .load () если вашему скрипту не нужны никакие субресурсы страницы

$ (документ) .ready () эквивалентно DOMContentLoaded (где DOMContentLoaded доступно) и $ (window) .load () в нагрузка. Первый запускается при загрузке собственного DOM страницы, но не внешних ресурсов, таких как изображения и таблицы стилей. Второй срабатывает, когда загружается все, из чего состоит страница, включая ее собственный контент и его подресурсы..

Итак, если вы пишете скрипт, который опирается на подресурсы страницы, например, изменение цвета фона ДИВ это стиль внешней таблицы стилей, лучше всего использовать $ (window) .load ().

Но, если это не так, лучше придерживаться $ (документ) .ready () потому что JQuery вызывает его готовы обработчик событий, используете ли вы $ (документ) .ready () или нет, так что используйте его, когда можете.

3. Используйте отрывать удалить из DOM элементы, которые нужно было изменить.

“оплавления” это термин, который относится к изменениям макета на веб-странице, это когда браузер переупорядочивает элементы страницы, чтобы разместить новый элемент, приспосабливаться к структурным изменениям элемента, заполнять пробел, оставленный удаленным элементом, или некоторым другим действием, которое требует изменение макета на странице. оплавление является дорого процесс браузера.

Мы можем уменьшить нет. оплавлений, вызванных структурными изменениями элемента, путем выполнения изменений на нем после вынимая это из потока страниц а также положить его обратно, когда это будет сделано. Если вы добавляете несколько строк в таблицу одна за другой, это вызовет много повторений. Так что лучше возьмите таблицу из дерева DOM, добавьте в нее строки и верните ее в DOM; это уменьшит оплавления.

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

4. Используйте CSS () установить высоту или ширину вместо рост() а также ширина ()

Если вы устанавливаете высоту или ширину элемента в jQuery, я предлагаю вам использовать CSS () функция, потому что установка этих значений с помощью рост() а также ширина () вызовет дополнительные перекомпоновки из-за доступа к некоторым свойствам макета в функции computeStyleTests в jQuery (протестировано в последней версии).

Для кода p.height ( "300px"); вот оплавления.

За p.css ("height": "300px");

computeStyleTests используется для выполнения некоторых тестов поддержки. Это также называется время получение высота и ширина, используя и то и другое CSS () а также высота ширина() , но для установка это только для высота ширина() которые могут не понадобиться, поэтому используйте CSS () вместо.

5. Не обращайтесь к свойствам макета без необходимости

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

Так ли вы используете JQuery или ванильный JavaScript, Остерегайтесь ненужного доступа к свойствам макета особенно в цикле или, следовательно, после внесения изменений в стиль.

6. Используйте кэширование, где вы можете

Некоторые функции jQuery поставляются с механизмами кэширования, которые могут быть использованы с пользой. Ajax-запросы кешируют ресурсы, но они недоступны для скрипт а также JSONP, так что если вы хотите кэшировать все ваши AJAX-запросы, вы можете установить глобально как ниже.

Также обратите внимание, что если вы выбираете ресурсы, используя сообщение он не будет кэшироваться, даже если вы включите кэширование с помощью вышеуказанной настройки.

Как я уже говорил ранее, отсоединить () кэширует данные, связанные с удаляемым элементом, в отличие Удалить();скрывать() кэширует исходный CSS дисплей значение элемента, прежде чем скрыть его, чтобы потом можно было его восстановить без потери данных.

Заключение

Один из способов убедиться, что вы используете наиболее эффективный код jQuery для своей потребности, - подождать, пока вы действительно запустите свой код, и заметить, есть ли какие-либо проблемы с производительностью или нет. Если есть, используйте инструменты производительности и отладчика, чтобы определить корень проблемы.

Поскольку jQuery подобен кокону для JavaScript с дополнительными функциями совместимости и функций браузера, диагностировать проблемы без этих инструментов может быть сложно.