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

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

Использование средства диагностики страниц SharePoint для анализа настраиваемых расширений

Средство "Диагностика страницы" для SharePoint — это расширение браузера для браузеров Microsoft Edge и Chrome, которое анализирует SharePoint на современном портале Microsoft 365 и классических страницах сайта публикации. Это средство предоставляет отчет о каждой проанализированной странице, показывающий, как она работает при заданных критериях производительности. Чтобы установить средство диагностики страниц для SharePoint и узнать о ней, см . раздел Использование средства диагностики страниц для SharePoint.

Примечание.

Средство диагностики страниц работает только для SharePoint в Microsoft 365 и не может использоваться на системной странице SharePoint.

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

Возможные результаты:

• Внимание (красный цвет) — любое настраиваемое расширение, требующее более одной секунды на загрузку. Общее время загрузки распределяется в результатах теста в зависимости от времени, потраченного на загрузку модулей и инициализацию. Кроме того, если на странице слишком много расширений, они могут влиять на время загрузки страницы, что будет выделено, если на странице используется семь и более расширений.
• Возможности улучшения (желтый цвет). Если используется пять или более расширений, они будут выделены в этом разделе как предупреждение, пока не будет использовано семь или более расширений, которые будут выделены как обязательные для внимания.
• Действия не требуются (зеленый цвет) — загрузка любого расширения занимает не больше одной секунды.

Если расширение влияет на время загрузки страницы или на странице слишком много расширений, результат отображается в разделе Обязательное внимание результатов. Выберите результат, чтобы просмотреть сведения о том, какое расширение загружается медленно или выделено слишком много расширений. Будущие обновления средства диагностики страниц для SharePoint могут включать обновления правил анализа, поэтому убедитесь, что у вас всегда установлена последняя версия средства.

Результаты содержат следующие данные:

• Имя и идентификатор — идентификационные данные, необходимые при поиске расширения на странице

• Общее время загрузки и инициализации модуля расширением. Это общее относительное время, затраченное расширению на выполнение на странице, от начала до конца.

• Загрузка модуля показывает время, затраченного на скачивание, оценку и загрузку расширений JavaScript и CSS-файлов. Затем запускается процесс инициализации.

• Init показывает время, затрачено на инициализацию данных расширением.

  Это асинхронный вызов, а время инициализации — это вычисление времени для функции onInit при разрешении возвращенного обещания.

Эта информация предназначена для того, чтобы помочь проектировщикам и разработчикам устранять проблемы. С ней следует ознакомить команду по проектированию и разработке.

Обзор расширений

С помощью расширений SharePoint Framework (SPFx) можно сделать SharePoint удобнее для пользователей. Используя расширения SharePoint Framework, можно настроить области уведомлений, панели инструментов, представления данных списков и другие аспекты SharePoint.

Расширения могут негативно влиять на производительность страницы SharePoint, так как она также использует ресурсы ЦП и сети для выполнения необходимых действий.

Существует четыре типа расширений:

• Настройщики приложений позволяют добавлять скрипты на страницу и получать доступ к заполнителям известных элементов HTML и дополнять их с использованием специальной отрисовки.
• Настройщики полей предоставляют измененные представления данных для полей списка.
• Наборы команд позволяют добавлять новые действия для команд SharePoint, а также предоставляют клиентский код, с помощью которого можно реализовать определенное поведение.
• Модификатор поискового запроса (только предварительная версия) вызывается непосредственно перед выполнением поискового запроса.

Устранение проблем производительности расширений

Чтобы определить и устранить проблемы с производительностью расширений, указанных в окне Влияние расширений на время загрузки страниц, используйте инструкции, приведенные в этом разделе.

Примечание.

Настройщики приложений можно выполнять на раннем этапе жизненного цикла страницы, и это может влиять на производительность других расширений на странице.

Результаты аудита в средстве диагностики страниц содержат два этапа выполнения расширения, чтобы определить потенциальное влияние на производительность.

• Загрузка модуля — это время, затраченное на загрузку расширения, на которое влияет размер расширения, поэтому рекомендуется объединить в расширение только необходимые библиотеки, а также выбрать более легкие библиотеки.
• Инициализация — это время инициализации расширения. Разработчики расширений должны учитывать, выполняет ли расширение ненужные действия или слишком много команд на этапе инициализации.

Авторы страниц также могут использовать результаты аудита, чтобы определить, содержит ли страница слишком много расширений, так как слишком большое количество расширений будет негативно влиять на производительность страницы.

• Размер расширения и зависимости
  • Для оптимальной статической загрузки ресурсов следует использовать сеть доставки содержимого (CDN) Office 365. Открытые источники CDN предпочтительнее использовать для файлов JS и CSS. Дополнительные сведения об использовании Office 365 CDN см. в статье Использование сети доставки содержимого Office 365 (CDN) с SharePoint.
  • Повторно используйте такие платформы, как React и Fabric imports, которые входят в состав SharePoint Framework (SPFx). Дополнительные сведения см. в статье Обзор SharePoint Framework.
  • Убедитесь, что вы используете последнюю версию SharePoint Framework, и обновите их до новых версий по мере их доступности.
• Извлечение или кэширование данных
  • Если расширение использует дополнительные вызовы сервера, чтобы извлечь данные для отображения, убедитесь, что эти серверные API достаточно быстры и (или) выполняют кэширование на стороне клиента (например, с использованием localStorage или IndexDB для более крупных наборов).
  • Если для отображения важных данных требуется несколько вызовов, воспользуйтесь пакетной обработкой на сервере или другими методами объединения запросов в один вызов.
  • Кроме того, если для некоторых элементов данных требуется более медленный API, но они не являются критически важными для первоначальной отрисовки, разделите их на отдельный вызов, который выполняется после отрисовки критически важных данных.
  • Когда одни и те же данные повторяются в разных частях, используйте один уровень данных, чтобы избежать повторения вызовов.
• Время отображения
  • Любые мультимедийные источники, такие как изображения и видеоролики, следует уменьшать до размера контейнера, устройства и (или) сети во избежание загрузки ненужных больших активов. Дополнительные сведения о зависимостях содержимого см. в статье Использование Office 365 сети доставки содержимого (CDN) с SharePoint.
  • Избегайте вызовов API, которые вызывают повторное воспроизведение, сложные правила CSS или сложные анимации. Дополнительные сведения см. в статье Минимизация перегруппировки браузера.
  • Избегайте выполнения длительных цепных задач. Разбивайте такие задачи на отдельные очереди. Дополнительные сведения см. в статье Оптимизация выполнения JavaScript.
  • Резервируйте соответствующее место для асинхронного отображения визуальных элементов или элементов мультимедиа, чтобы избежать пропуска кадров и перебоев, известных какподвисания.
  • Если какой-либо из браузеров не поддерживает функцию, используемую для отображения, загрузите полизаполнение или исключите выполнение зависимого кода. Если эта функция не является критической, удалите ресурсы, такие как обработчики событий, чтобы избежать утечек памяти.

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

Примечание.

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

Статьи по теме

Настройка производительности SharePoint

Производительность в современном интерфейсе SharePoint

Сети доставки содержимого

Использование сети доставки содержимого Office 365 (CDN) с SharePoint