252  /  380
Справочник

Типовые ошибки и советы

Просмотров: 32533
Дата последнего изменения: 01.02.2023
Роберт Басыров
Сложность урока:
3 уровень - средняя сложность. Необходимо внимание и немного подумать.
1
2
3
4
5
Недоступно в лицензиях:
Ограничений нет

Небольшой список типовых ошибок и советов по работе с JS-библиотекой.

  • Не используйте старые библиотеки utils.js, ajax.js и chttprequest.js.
  • Избегайте использования BX.findChild и BX.findChildren. Функции эти не страшные, но из-за неправильного использования и большого DOM'а, количество итераций возрастает до нескольких тысяч. Лучше используйте выборки по ID или по firstChild, parentNode, nextSibling, previousSibling.
  • Избегайте BX.loadScript и BX.loadCSS. Они плохи тем, что:
    • Не работает сжатие JS и CSS
    • loadScript повторно выполняет скрипт. В этом примере
      BX.loadScript("script.js"); BX.loadScript("script.js");
      первый вызов скачает и выполнит скрипт, второй вызов выполнит скрипт повторно.
    • loadScript грузит скрипты последовательно (скрипты, подключенные через тег script, грузятся параллельно), делая задержки в 50 мс между загрузками. Если вы грузите 5 файлов, то в лучшем случае это займет 200мс.
    • Загрузка CSS вызывает пересчет стилей
    • Практически везде, где используется loadScript, разработчики не добавляют timestamp после названия файла (my_script.js?12345678). Из-за этого происходит двойное скачивание и выполнение скрипта. Плюс при изменении файла, у клиентов не сбросится кеш.
    Выход: использовать методы AddHeadScript и SetAdditionalCSS.

    Еще один момент, который может показаться очевидным. Браузер гарантирует подключение и выполнение скриптов в той последовательности, в которой они идут на странице. Скрипты с атрибутами async и defer не подчиняются этому правилу, но в Bitrix Framework таких нет. Не нужно проверять объект на существование перед использованием и уж тем более не стоит его загружать через loadScript.

  • Не рекомендуется Inline CSS (имеется в виду теги link и style, выводимые в body).
  • Не делайте больших inlinе скриптов. Основной код желательно выносить во внешние файлы. Данные из PHP - вносить JSON'ом. Хороший вариант, когда на странице только вызов конструктора или Init'а c передачей данных в JSON'е.
  • Внимательно используйте setTimeout. Достаточно часто таймауты используются необоснованно. Например, если не работает код в браузере, то часто прибегают к установке таймаута "на глаз". Это происходит из-за недопонимая событийной модели.

    Бесконечных таймеров необходимо избегать вообще. Если все таки это нужно, то рассмотрите вариант использования core_timer.js. Это синглтон для таймеров.

  • Используйте "ленивую" инициализацию (загрузку). Создавайте объекты, верстку, окна и прочее только тогда, когда это действительно нужно. Например, нет смысла заранее создавать BX.PopupWindow (а он вставляет в DOM новые узлы) до того момента, когда это действительно нужно (нажатие на ссылку или кнопку). Если интерфейс используется редко и некритично показать/не показать процесс загрузки, то лучше сделать ajax'ую подзагрузку.
  • Глобальные переменные используйте минимально, локальные переменные используйте с var.
  • С осторожностью относитесь к глобальным обработчикам (window, document, document.body). Этот код вызывается на каждый клик, на каждое движение мыши, на каждое изменение скроллинга. И не забывайте делать unbind.
  • Делайте один appendChild вместо нескольких в цикле. Еще посмотрите что такое DocumentFragment.
  • Объединяйте и разделяйте CSS/JS. Здесь нужно руководствоваться здравым смыслом. Есть компоненты, которые содержат множество мелких скриптов и CSS-файлов. Имеет смысл их объединить в один файл.
    Есть и обратные примеры. Например, в создаваемом вами модуле есть большой CSS-файл, который содержит почти все стили для своего отображения. И это лучше, чем множество мелких (отдельно на таблицу, тулбар, попапы и фильтры). Но вот появилась новая задача - добавить в живую ленту небольшой блок из вашего модуля. В этом случае не нужно тащить в живую ленту весь файл CSS из модуля, лучше сделать небольшой отдельный файл.
  • Создайте защиту от двойного подключения на странице, так как компонент может быть подключен на странице несколько раз.
  • Для замера производительности запускайте профилировщики Chrome и Internet Explorer'а.
  • Проверяйте свой код в PhpStorm'е или аналогичных инструментах.
33
Курсы разработаны в компании «1С-Битрикс»

Если вы нашли неточность в тексте, непонятное объяснение, пожалуйста, сообщите нам об этом в комментариях.
Развернуть комментарии