Как быстро начать работу с VUE3.0: приступайте к обучению
Я искал советы по оптимизации производительности jQuery, чтобы облегчить мое раздутое динамическое веб-приложение. Изучив множество статей, я решил перечислить некоторые из лучших и наиболее часто используемых предложений по оптимизации производительности. [Рекомендуемое обучение: видеоурок по jQuery]
1. Рекомендации по оптимизации производительности селектора
1. Всегда наследовать от селектора #id
Это золотое правило для селекторов jQuery. Самый быстрый способ выбрать элемент в jQuery — выбрать его по идентификатору.
2. Используйте тег перед классом.
Второй по скорости селектор в jQuery — это селектор тегов (например, $('head')), поскольку он происходит непосредственно из собственного метода Javascript getElementByTagName(). Поэтому лучше всегда использовать теги для изменения классов (и не забывать ближайший идентификатор).
Селектор классов в jQuery самый медленный, поскольку он будет проходить через все узлы DOM в браузере IE. Старайтесь избегать использования селекторов классов. Не используйте теги для изменения идентификаторов.
3. Используйте подзапросы
для кэширования родительских объектов для будущего использования.
4. Оптимизируйте селекторы для адаптации к модели Sizzle «справа налево».
Начиная с версии 1.3, jQuery использует библиотеку Sizzle, которая аналогична механизму селектора предыдущих версий. выражения очень разные. Он заменяет модель «справа налево» моделью «слева направо».
5.
Действительно, быстрее использовать find() вместо использования контекста для поиска функции find(). Но если на странице много узлов DOM, поиск туда и обратно может занять больше времени:
6. Используйте мощные цепные операции. Использование
цепных операций jQuery более эффективно, чем кэширование селекторов.
7. Напишите свой собственный селектор,
если вы часто используете селекторы. ваш код, поэтому расширьте объект $.expr[':'] jQuery, чтобы написать свои собственные селекторы.
2. Рекомендации по оптимизации операций с DOM
. 8. Кэшируйте объекты jQuery и
элементы, которые вы часто используете.
9. При вставке в DOM инкапсулируйте все элементы в один элемент.
Основная идея здесь — создать в памяти то, что вам действительно нужно. затем обновите DOM. Это не лучший метод jQuery, но он необходим для корректных операций JavaScript. Операции Direct DOM очень медленны. Операции Direct DOM очень медленны. Изменяйте структуру HTML как можно меньше.
10. Хотя jQuery не генерирует исключений, разработчикам также следует проверять объекты.
Хотя jQuery не генерирует большое количество исключений для пользователей, разработчикам не следует на это полагаться. jQuery обычно выполняет кучу бесполезных функций, прежде чем определить, существует ли объект. Поэтому, прежде чем делать серию ссылок на объект, вам следует сначала проверить, существует ли этот объект.
11. Используйте прямые функции вместо эквивалентных функций.
Для повышения производительности следует использовать прямые функции, такие как .ajax() вместо .ajax() вместо .ajax(). Не используйте .get(),.getJSON(), .getJSON(),.getJSON(),.post(), потому что последние будут вызывать $.ajax().
12. Кэшируйте результаты jQuery для дальнейшего использования.
Часто вы получаете объект приложения JavaScript — вы можете использовать App для сохранения объектов, которые вы часто выбираете для будущего использования.
13.Используйте
внутреннюю функцию jQuery() для хранения состояния.
забудьте использовать функцию .data() для хранения информации.
14. Используйте служебную функцию jQuery
. Не забывайте о простой и практичной служебной функции jQuery. Мои любимые — $.isFunction(), isA rray(), isArray(), isArray() и .each().
15. Добавьте класс «JS» в блок HTML
. После загрузки jQuery сначала добавьте класс «JS» в HTML $('HTML').addClass('JS'); Вы можете добавить стили CSS.
3. Предложения по оптимизации производительности событий
16. В зависимости от (window). Load
иногда использует (window).load. Иногда используется (window).load(), а не $(document).ready. .() быстрее, поскольку последний не ждет, пока будут загружены все элементы DOM. Вы должны протестировать его перед использованием.
17. Используйте делегирование событий.
Если у вас много узлов в контейнере и вы хотите привязать событие ко всем узлам, делегирование очень подходит для таких сценариев применения. Используя делегирование, нам нужно только связать событие с родительским узлом, а затем посмотреть, какой дочерний узел (целевой узел) инициировал событие. Это становится очень удобно, когда у вас есть таблица с большим количеством данных и вы хотите установить события на узле td.
18. Используйте сокращение события готовности.
Если вы хотите сжать плагин js и сохранить каждый байт, вам следует избегать использования $(document).onready()
4. Тест jQuery
19. Модульный тест jQuery
Лучший способ тестирования. Код JavaScript предназначен для использования людьми. Приходите и тестируйте. Но вы можете использовать некоторые автоматизированные инструменты, такие как Selenium, Funcunit, QUit, QMock, для тестирования вашего кода (особенно плагинов). Я хочу обсудить эту тему в другой теме, потому что есть что сказать.
20. Стандартизируйте свой код jQuery.
Чаще стандартизируйте свой код, смотрите, какой запрос работает медленнее, и заменяйте его. Вы можете использовать консоль Firebug. Вы также можете использовать сочетания клавиш jQuery, чтобы упростить тестирование.
5. Другие распространенные рекомендации по оптимизации производительности jQuery.
21. Используйте последнюю версию jQuery.
Последняя версия часто является лучшей. После смены версий не забудьте протестировать свой код. Иногда это не полностью обратно совместимо.
22. Использование HMTL5
Новый стандарт HTML5 упрощает структуру DOM. Более легкая структура означает, что при использовании jQuery требуется меньше обходов и повышается производительность загрузки. Поэтому, пожалуйста, используйте HTML5, если это возможно.
23. Если вы хотите добавить стили более чем к 15 элементам,
лучший способ добавить теги стиля непосредственно к элементам DOM — использовать функцию jQuey css() для стилизации нескольких элементов. Однако при добавлении стилей к более чем 15 элементам более эффективно добавлять теги стиля непосредственно в DOM. Этот метод позволяет избежать использования жесткого кода в коде.
24. Избегайте загрузки избыточного кода.
Рекомендуется размещать код Javascript в разных файлах и загружать их только при необходимости. Таким образом вы не будете загружать ненужный код и селекторы. Также легко управлять кодом.
25. Сжимайте в один основной JS-файл, чтобы свести к минимуму количество загрузок.
Определив, какие файлы следует загружать, упакуйте их в один файл. Используйте некоторые инструменты с открытым исходным кодом, чтобы сделать это автоматически, например, с помощью Minify (интегрированного с вашим серверным кодом) или с помощью онлайн-инструментов, таких как JCompressor, YUI Compressor или упаковщик Dean Edwards JS, для сжатия файлов за вас. Мой любимый — JCompressor.
26. При необходимости использовать собственный Javascript — это здорово.
Использование jQuery — это здорово, но не забывайте, что это также платформа для Javascript. Таким образом, при необходимости вы можете использовать встроенные функции Javascript в коде jQuery, что может повысить производительность.
27. Загрузите фреймворк jQuery из Google.
Когда ваше приложение будет официально запущено, загрузите jQuery из Google CDN, потому что пользователи могут получить код из ближайшего места. Таким образом, вы можете уменьшить количество запросов к серверу, и если пользователь просматривает другой веб-сайт, который также использует jQuery Google CDN, браузер немедленно вызовет код jQuery из кеша.
28. Медленная загрузка контента может не только повысить скорость загрузки, но и улучшить SEO-оптимизацию. Используйте Ajax для загрузки вашего веб-сайта, что может сэкономить время загрузки на стороне сервера. Вы можете начать с обычного виджета боковой панели.
[Рекомендуемое обучение: видео по jQuery, разработка веб-интерфейса]
Вышеупомянутое о том, как оптимизировать производительность jQuery? Для получения подробной информации о методах оптимизации обратите внимание на другие соответствующие статьи на китайском веб-сайте PHP для получения дополнительной информации!
