levis/help365
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
koziavin
2025-05-26 16:15:30 +04:00
commit a6b05d6789
6059 changed files with 495628 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

301
platform/devtools-report.html Normal file
View File

@ -0,0 +1,301 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Отладка виджетов в отчёте «Инструменты разработчика»</title>
<meta name="generator" content="Help+Manual" />
<meta name="keywords" content="" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Этот отчёт позволяет проводить диагностику выполнения скриптов пользовательских виджетов, форм и страниц с точки зрения их быстродействия. Вы можете найти причину, почему..." />
<meta name="picture" content="" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Cправка по Low-code платформе ELMA365" />
<meta property="og:url" content="https://elma365.com/ru/help" />
<meta property="og:image" content="" />
<meta property="og:site_name" content="ELMA365" />
<link rel="icon" href="favicon.png" type="image/png" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="./jquery-ui.min.css" />
<link rel="stylesheet" href="default.css" />
<link rel="stylesheet" href="./search-yandex.css" />
<link rel="stylesheet" href="./article.css" />
<link rel="stylesheet" href="./glossary.css" />
<link rel="stylesheet" href="./theme.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="helpman_settings.js"></script>
<script type="text/javascript" src="helpman_topicinit.js"></script>
<script type="text/javascript" src="highlight.js"></script>
<script type="text/javascript">
$(document).ready(function(){highlight();});
</script>
</head>
<body>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-M6ETBEC1R9"></script><script>window.dataLayer=window.dataLayer || []; function gtag(){dataLayer.push(arguments);}gtag('js', new Date()); gtag('config', 'G-M6ETBEC1R9');</script>
<script>!function(e,t,c,n,r,a,m){e.ym=e.ym||function(){(e.ym.a=e.ym.a||[]).push(arguments)},e.ym.l=1*new Date;for(var s=0;s<document.scripts.length;s++)if(document.scripts[s].src===n)return;a=t.createElement(c),m=t.getElementsByTagName(c)[0],a.async=1,a.src=n,m.parentNode.insertBefore(a,m)}(window,document,"script","https://mc.yandex.ru/metrika/tag.js"),ym(83179930,"init",{clickmap:!0,trackLinks:!0,accurateTrackBounce:!0,webvisor:!0})</script><noscript><div><img alt=""src=https://mc.yandex.ru/watch/83179930 style=position:absolute;left:-9999px></div></noscript>
<header class="header elma-365">
<div class="container">
<a class="header__logo" href="https://elma365.com/ru/help">
<img src="./logo.svg" alt="header logo">
</a>
<!-- <div class="hero__search-form" id="search-panel">
<form class="search-form" onsubmit="ym(83179930,'reachGoal','poisk')">
<label class="search-form__label">
<span id="reset-search" class="search__icon"></span>
<input class="search-form__input" type="text">
</label>
<input class="search-form__submit" type="submit" value="Submit">
</form>
</div> -->
<div class="hero__search-form" id="search-panel"> <form class="search-form"> <label class="search-form__label"> <span id="reset-search" class="search__icon"></span> <input class="search-form__input" type="text"> </label> <input class="search-form__submit" type="submit" value="Submit"> </form> </div>
<div class="hero__search">
<a href="#" id="search-icon" class="hero__search-icon">
<img src="search-icon-white.svg" alt="search string">
</a>
<a href="#" id="side-menu-icon" class="hero__side-icon">
<img src="side_menu.svg" alt="side menu">
</a>
</div>
<div class="header__navi">
<ul class="header__list"><li><span class="solution-select"><span class="solution-select__selected"></span><svg width="7" height="4" viewBox="0 0 7 4" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L3.5 3.5L6 1" stroke="white" stroke-linecap="round" stroke-linejoin="round"/></svg><ul class="solution-select__list"><li><a class="project-link" href="https://elma365.com/ru/help/platform/get-trial.html">Платформа</a></li><li><a class="project-link" href="https://elma365.com/ru/help/ecm/ecm-functions.html">ECM</a></li><li><a class="project-link" href="https://elma365.com/ru/help/crm/crm_overview.html">CRM</a></li><li><a class="project-link" href="https://elma365.com/ru/help/service/service-functions.html">Service</a></li><li><a class="project-link" href="https://elma365.com/ru/help/projects/projects-functions.html">Проекты</a></li><li><a class="project-link" href="https://elma365.com/ru/help/business_solutions/-elma365-store.html">Бизнес-решения</a></li></ul></span></li><li><a href="https://api.elma365.com/ru/"target="_blank">API</a></li><li><a href="https://tssdk.elma365.com/"target="_blank">SDK</a></li><li><a href="https://community.elma365.com/" target="_blank">Community</a></li><li><a href="https://elma-academy.com/ru/" target="_blank">Академия</a></li><li><a href="https://elma365.com/ru/" target="_blank">Сайт ELMA365</a></li></ul>
</div>
</div>
</header>
<main class="main container">
<aside class="sidebar" id="sidebar">
<div class="sidebar__header">
<a class="header__logo" href="https://elma365.com/ru/help">
<img src="./logo-light.svg">
</a>
<span class="sidebar__close elma-365-close" id="close"></span>
</div>
<div class="sidebar__wrapper" id="side-menu">
</div>
</aside>
<article class="article" id="article">
<div class="article-inner">
<div class="content">
<header class="article__header">
<div class="article__bread" style="display:flex; gap:10px;">
<span id="subcategory" class="search-res__item-category search-res__item-category_subcategory subcategory article__badge"></span>
<div class="topic__breadcrumbs">
<p>Администрирование системы&nbsp; &gt; <a href="devtools.html">Инструменты разработчика</a> / Отладка виджетов в отчёте «Инструменты разработчика»</p>
</div>
</div>
<div class="topic__title"><h1 class="p_Heading1"><span class="f_Heading1">Отладка виджетов в отчёте «Инструменты разработчика»</span></h1>
</div>
</header>
<section class="article__content">
<div class="scroll-top-inner">
<a href="#h1-article" class="scroll-top"></a>
</div>
<!-- Placeholder for topic body. -->
<p class="p_Normal">Этот отчёт позволяет проводить диагностику выполнения скриптов пользовательских виджетов, форм и страниц с точки зрения их быстродействия. Вы можете найти причину, почему зависает страница, или долго открывается карточка приложения.</p>
<p class="p_Normal">Используйте отчёт как в <a href="interface-debug.html" class="topiclink">режиме отладки</a> создаваемых элементов интерфейса, так и после их публикации.</p>
<p class="p_Normal">Работать с отчётом могут пользователи, которым выданы права доступа на странице <a href="devtools.html" class="topiclink">Администрирование &gt; Инструменты разработчика</a>. Для этого выберите пользователей в блоке <span style="font-weight: bold;">Отладка виджетов</span>.</p>
<p class="p_Normal">Если есть доступ, вы можете перейти к отчёту на любой странице системы, открытой в браузере. Для этого в правом нижнем углу страницы нажмите кнопку <img alt="devtools-report-1" width="33" height="28" style="margin:0;width:33px;height:28px;border:none" src="devtools-report-1.png"/> и выберите <span style="font-weight: bold;">Инструменты разработчика</span>. Для удобства кнопку можно переместить выше.</p>
<p class="p_Normal"><img alt="devtools-report-2" width="833" height="474" style="margin:0;width:833px;height:474px;border:none" src="devtools-report-2.png"/></p>
<p class="p_Normal">Обратите внимание, если у вас есть доступ к отчёту, все действия и события на текущей странице фиксируются с момента перехода на неё или с момента обновления страницы. Если доступа нет, события не записываются.</p>
<h2 class="p_Heading2"><a id="steps" class="hmanchor"></a><span class="f_Heading2">Порядок работы с отчётом «Инструменты разработчика»</span></h2>
<p class="p_Normal">Администратор системы может проверить выполнение скриптов пользовательских виджетов, форм и страниц с точки зрения их быстродействия. Для этого:</p>
<ol style="list-style-type:decimal">
<li value="1" class="p_Normal">Откройте страницу, задачу или карточку приложения, действие на которой нужно проанализировать.</li><li value="2" class="p_Normal">Перезагрузите текущую страницу, чтобы очистить историю о предыдущих действиях и событиях.</li><li value="3" class="p_Normal">Выполните действие, диагностику которого вы хотите провести. Например, на странице приложения откройте его карточку, если это действие долго выполняется.</li><li value="4" class="p_Normal">Нажмите <img alt="devtools-report-1" width="33" height="28" style="margin:0;width:33px;height:28px;border:none" src="devtools-report-1.png"/> и выберите опцию <span style="font-weight: bold;">Инструменты разработчика</span>. Откроется соответствующий отчёт.</li><li value="5" class="p_Normal">Проанализируйте <a href="devtools-report.html#report-content" class="topiclink">данные отчёта</a>. </li><li value="6" class="p_Normal">Повторите шаги 2-5, чтобы исключить такие факторы, как загрузка сервера или сети, нагрузка на процессор ПК пользователя и т. п.</li><li value="7" class="p_Normal">Если повторно по одному элементу интерфейса вы видите большое время загрузки и выполнения определённых событий, это является основанием для оптимизации кода. В дизайнере интерфейсов перейдите к настройкам виджета, проанализируйте скрипты и внесите в них изменения.</li></ol>
<p class="p_Normal">Если вы получили от пользователя текстовый <a href="download-logs.html" class="topiclink">лог-файл</a> для анализа проблемы быстродействия на его странице системы, загрузите его в отчёт. Для этого на странице отчёта нажмите <span style="font-weight: bold;">Загрузить логи</span> и затем приложите полученный лог-файл. Содержание файла отобразится в отчёте.</p>
<p class="p_Normal">Также можно загрузить лог-файл из отчёта на свой ПК, нажав <span style="font-weight: bold;">Скачать логи</span> на странице отчёта.</p>
<h2 class="p_Heading2"><a id="report-content" class="hmanchor"></a><span class="f_Heading2">Содержание отчёта «Инструменты разработчика»</span></h2>
<p class="p_Normal">Отчёт включает в себя данные о событиях, которые произошли с момента обновления страницы в браузере или перехода на эту страницу до момента, когда вы открыли отчёт. О том, как перейти к отчёту и какие предварительные действия выполнить, чтобы получить нужные для анализа, читайте в разделе <a href="devtools-report.html#steps" class="topiclink">«Порядок работы с отчётом „Инструменты разработчика“»</a>.</p>
<p class="p_Normal">В левой колонке отображается список пользовательских виджетов, которые загружались при отображении страницы, формы приложения или карточки задачи. Системные виджеты в отчёте не отображаются. Если навести курсор на название элемента интерфейса, можно просмотреть его полное системное имя.</p>
<p class="p_Normal"><img alt="devtools-report-3" width="254" height="57" style="margin:0;width:254px;height:57px;border:none" src="devtools-report-3.png"/></p>
<p class="p_Normal">Также отчёт содержит следующую информацию:</p>
<p class="p_Normal"><img alt="devtools-report-4" width="679" height="419" style="margin:0;width:679px;height:419px;border:none" src="devtools-report-4.png"/></p>
<ol style="list-style-type:upper-roman">
<li value="1" class="p_Normal" style="margin-top: 0; margin-right: 0; margin-bottom: 0;"><span style="font-weight: bold;">Временная шкала</span> — позволяет определить длительность событий в миллисекундах или секундах. Вы можете изменять масштаб шкалы, а также переходить к просмотру более ранних или поздних событий. Жёлтой заливкой обозначен период с момента вызова действия до момента отображения его результата. Например, если пользователь нажал на элемент приложения и его карточка отобразилась через одну секунду, это период и будет отмечен заливкой. В левой колонке отчёта вы увидите все виджеты, которые загружались для отображения на странице.</li><li value="2" class="p_Normal" style="margin-top: 0; margin-right: 0; margin-bottom: 0;"><a id="tracing" class="hmanchor"></a><span style="font-weight: bold;">События</span> — соответствуют определённому элементу интерфейса и размещены справа от него в виде отрезков вдоль временной шкалы. Чем длиннее отрезок, тем дольше длилось событие. Нажмите на отрезок, чтобы на боковой панели отчёта отобразить подробную информацию о событии. Обратите внимание на показатель <span style="font-weight: bold;">duration</span>, значение которого соответствует длительности события в миллисекундах.</li></ol>
<p style="line-height: 1.28; margin: 0 0 11px 34px;"><span style="font-size: 15px; font-family: Inter;">Если по компоненту, к которому относится событие, включена трассировка в разделе </span><span style="font-size: 15px; font-family: Inter; font-weight: bold;">Администрирование &gt; Инструменты разработчика</span><span style="font-size: 15px; font-family: 'Times New Roman',Times,Georgia,serif;">,</span><span style="font-size: 15px; font-family: Inter;"> можно проанализировать выполнение входящих в него серверных скриптов. Это позволяет оценить скорость исполнения отдельных функций для оптимизации скрипта и выявить причины ошибок. Выберите на шкале отрезок с серверным скриптом и нажмите на боковой панели </span><span style="font-size: 15px; font-family: Inter; font-weight: bold;">Перейти в трейс</span><span style="font-size: 15px; font-family: Inter;">. Подробнее о настройке трассировки и содержании карточки трейса читайте в статье </span><span style="font-size: 15px; font-family: Inter; color: #0563c1;"><a href="server-script-tracing.html" class="topiclink">«Трассировка серверных скриптов»</a></span><span style="font-size: 15px; font-family: 'Times New Roman',Times,Georgia,serif;">.</span></p>
<ol style="list-style-type:upper-roman">
<li value="3" class="p_Normal" style="margin-top: 0; margin-right: 0; margin-bottom: 0;"><span style="font-weight: bold;">Группы событий</span> — раскрыв строку с элементом интерфейса, можно просмотреть три группы событий, которые произошли при загрузке этого элемента: </li></ol>
<ul style="list-style-type:disc"><ul style="list-style-type:circle">
<li class="p_Normal"><span style="font-weight: bold;">render</span> — события на стороне пользователя, на его странице в браузере;</li><li class="p_Normal"><span style="font-weight: bold;">backend</span> — отправка запросов на сервер. Включает запросы через TS SDK и вызов серверных скриптов;</li><li class="p_Normal"><span style="font-weight: bold;">system</span> — события, связанные с отображением системных виджетов. На скорость таких событий пользователь повлиять не может. Эта информация является справочной.</li></ul></li></ul>
<h3 class="p_Heading3"><span class="f_Heading3">Render</span></h3>
<p class="p_Normal">Примеры отображения событий группы <span style="font-weight: bold;">render</span> в отчёте:</p>
<ul style="list-style-type:disc">
<li class="p_Normal">выполнение функции <a href="widget_functions.html#onlnit" class="topiclink">onInit</a>. Чаще всего найти проблему быстродействия можно, проанализировав логику получения данных в этом событии;</li></ul>
<p class="p_Normal"><img alt="devtools-report-5" width="533" height="302" style="margin:0;width:533px;height:302px;border:none" src="devtools-report-5.png"/></p>
<ul style="list-style-type:disc">
<li class="p_Normal">выполнение функции <a href="widget_functions.html#canrender" class="topiclink">canRender</a>. Обращения к серверу чаще всего в ней не используются, но могут и быть;</li></ul>
<p class="p_Normal"><img alt="devtools-report-6" width="518" height="269" style="margin:0;width:518px;height:269px;border:none" src="devtools-report-6.png"/></p>
<ul style="list-style-type:disc">
<li class="p_Normal">рендер виджета типа <span style="font-weight: bold;">Код</span> с названием <span style="font-weight: bold;">getData</span>;</li></ul>
<p class="p_Normal"><img alt="devtools-report-7" width="516" height="236" style="margin:0;width:516px;height:236px;border:none" src="devtools-report-7.png"/></p>
<ul style="list-style-type:disc">
<li class="p_Normal">события, которые не имеют продолжительности и обозначены в отчёте точкой, например обновление контекстной переменной при выполнении скрипта:</li></ul>
<p class="p_CodeExample" style="page-break-inside: avoid;"><span class="f_CodeExample" style="font-size: 16px;">Context.data.phones.push({&nbsp;tel: '+78031234567',&nbsp;type:&nbsp;PhoneType.Main&nbsp;});</span></p>
<p class="p_Normal"><img alt="devtools-report-8" width="597" height="304" style="margin:0;width:597px;height:304px;border:none" src="devtools-report-8.png"/></p>
<h3 class="p_Heading3"><span class="f_Heading3">Backend</span></h3>
<p class="p_Normal">Для события группы <span style="font-weight: bold;">backend</span> на боковой панели отчёта отображается как показатель <span style="font-weight: bold;">duration</span>, так и URL‑адрес, на который отправлен запрос, а также методы и ключи запроса. Примеры событий:</p>
<ul style="list-style-type:disc">
<li class="p_Normal">запрос на сервер через TS SDK;</li></ul>
<p class="p_CodeExample" style="white-space: normal; page-break-inside: auto; page-break-after: avoid;"><span class="f_CodeExample" style="font-size: 16px; font-weight: bold;">const</span><span class="f_CodeExample" style="font-size: 16px; color: #ffffff;"> </span><span class="f_CodeExample" style="font-size: 16px;">roles</span><span class="f_CodeExample" style="font-size: 16px; color: #ffffff;"> </span><span class="f_CodeExample" style="font-size: 16px;">=</span><span class="f_CodeExample" style="font-size: 16px; color: #ffffff;"> </span><span class="f_CodeExample" style="font-size: 16px;">await</span><span class="f_CodeExample" style="font-size: 16px; color: #ffffff;"> </span><span class="f_CodeExample" style="font-size: 16px;">System.userGroups.search()</span><br />
<span class="f_CodeExample" style="font-size: 16px;"> </span><span class="f_CodeExample" style="font-size: 16px; color: #ffffff;"> &nbsp; </span><span class="f_CodeExample" style="font-size: 16px;">.where((f,</span><span class="f_CodeExample" style="font-size: 16px; color: #ffffff;"> </span><span class="f_CodeExample" style="font-size: 16px;">g)</span><span class="f_CodeExample" style="font-size: 16px; color: #ffffff;"> </span><span class="f_CodeExample" style="font-size: 16px;">=&gt;</span><span class="f_CodeExample" style="font-size: 16px; color: #ffffff;"> </span><span class="f_CodeExample" style="font-size: 16px;">g.and(</span><br />
<span class="f_CodeExample" style="font-size: 16px;"> </span><span class="f_CodeExample" style="font-size: 16px; color: #ffffff;"> &nbsp; &nbsp; &nbsp; </span><span class="f_CodeExample" style="font-size: 16px;">f.__deletedAt.eq(</span><span class="f_CodeExample" style="font-size: 16px; font-weight: bold;">null</span><span class="f_CodeExample" style="font-size: 16px;">),</span><br />
<span class="f_CodeExample" style="font-size: 16px;"> </span><span class="f_CodeExample" style="font-size: 16px; color: #ffffff;"> &nbsp; &nbsp; &nbsp; </span><span class="f_CodeExample" style="font-size: 16px;">f.isRole.eq(</span><span class="f_CodeExample" style="font-size: 16px; font-weight: bold;">true</span><span class="f_CodeExample" style="font-size: 16px;">)</span><br />
<span class="f_CodeExample" style="font-size: 16px;"> </span><span class="f_CodeExample" style="font-size: 16px; color: #ffffff;"> &nbsp; </span><span class="f_CodeExample" style="font-size: 16px;">))</span><br />
<span class="f_CodeExample" style="font-size: 16px;"> </span><span class="f_CodeExample" style="font-size: 16px; color: #ffffff;"> &nbsp; </span><span class="f_CodeExample" style="font-size: 16px;">.size(1000)</span><br />
<span class="f_CodeExample" style="font-size: 16px;"> </span><span class="f_CodeExample" style="font-size: 16px; color: #ffffff;"> &nbsp; </span><span class="f_CodeExample" style="font-size: 16px;">.all();</span></p>
<p class="p_Normal"><img alt="devtools-report-9" width="623" height="288" style="margin:0;width:623px;height:288px;border:none" src="devtools-report-9.png"/></p>
<ul style="list-style-type:disc">
<li class="p_Normal">выполнение серверного скрипта <code><b> await Server.rpc.LoadSkills()</b></code>;</li></ul>
<p class="p_Normal"><img alt="devtools-report-10" width="564" height="233" style="margin:0;width:564px;height:233px;border:none" src="devtools-report-10.png"/></p>
<h3 class="p_Heading3"><span class="f_Heading3">System</span></h3>
<p class="p_Normal">Системные виджеты, например, <span style="font-weight: bold;">Кнопка</span>,<span style="font-weight: bold;"> Колонка</span>, <span style="font-weight: bold;">Модальное окно</span>, имеют следующий вид в отчёте:</p>
<p class="p_Normal"><img alt="devtools-report-11" width="576" height="274" style="margin:0;width:576px;height:274px;border:none" src="devtools-report-11.png"/></p>
<h2 class="p_Heading2"><span class="f_Heading2">Пример работы с отчётом «Инструменты разработчика»</span></h2>
<p class="p_Normal">Проанализируем события, которые произойдут, если открыть карточку приложения <span style="font-weight: bold;">Отпуск</span>:</p>
<ol style="list-style-type:upper-roman">
<li value="1" class="p_Normal">Перейдём на страницу приложения и обновим её, чтобы сбросить историю предыдущих действий. Затем откроем карточку приложения.</li></ol>
<p class="p_Normal"><img alt="devtools-report-2" width="1041" height="593" style="margin:0;width:1041px;height:593px;border:none" src="devtools-report-2.png"/></p>
<ol style="list-style-type:upper-roman">
<li value="2" class="p_Normal">В правом нижнем углу страницы нажмём <img alt="devtools-report-1" width="33" height="28" style="margin:0;width:33px;height:28px;border:none" src="devtools-report-1.png"/> и откроем отчёт <span style="font-weight: bold;">Инструменты разработчика</span>. Кнопка перехода к отчёту доступна, если вам выданы права на странице <span style="font-weight: bold;">Администрирование &gt; Инструменты разработчика</span> в блоке <span style="font-weight: bold;">Отладка виджетов</span>.</li></ol>
<p class="p_Normal"><img alt="devtools-report-13" width="857" height="369" style="margin:0;width:857px;height:369px;border:none" src="devtools-report-13.png"/></p>
<ol style="list-style-type:upper-roman">
<li value="3" class="p_Normal">Раскроем строку с виджетом <span style="font-weight: bold;">days_count</span> и посмотрим, какие события выполнялись во время его загрузки.</li><li value="4" class="p_Normal">В группе <span style="font-weight: bold;">backend</span> выполнился один запрос к серверу. Нажмём на это событие, чтобы на правой панели отобразить подробную информацию:</li></ol>
<ul style="list-style-type:disc"><ul style="list-style-type:circle">
<li class="p_Normal">в поле <span style="font-weight: bold;">duration</span> указано значение <span style="font-weight: bold;">163.7</span> мс. Это достаточно быстро, если учитывать, что на форме приложения нет сложных виджетов;</li><li class="p_Normal">в поле <span style="font-weight: bold;">args.stackTree</span> указано, что соответствующий метод вызван из метода <code><b> calcWorkHours()</b></code>, который вызван при инициализации виджета, в функции <code><b>onInit()</b></code>.</li></ul></li></ul>
<p class="p_Normal">Запрос к серверу — самое длительное событие в отчёте. Попробуем оптимизировать метод, который используется для этого запроса.</p>
<p class="p_Normal"><img alt="devtools-report-14" width="856" height="437" style="margin:0;width:856px;height:437px;border:none" src="devtools-report-14.png"/></p>
<ol style="list-style-type:upper-roman">
<li value="5" class="p_Normal">Чтобы учесть погрешность измерений, откроем карточку приложения несколько раз и сравним результаты. Если операция каждый раз занимает много времени, перейдём к улучшению скрипта.</li><li value="6" class="p_Normal">Если в виджете <span style="font-weight: bold;">days_count</span> использован ключевой параметр <code><b>await</b></code>, карточка отобразится только после вычисления рабочих часов. ​​Для оптимизации загрузки перейдём к исходному коду виджета и удалим параметр <code><b>await</b></code> из метода <code><b>calcWorkHours()</b></code>:</li></ol>
<p class="p_CodeExample" style="white-space: normal; page-break-inside: auto; page-break-after: avoid;"><span class="f_CodeExample" style="font-size: 16px;">​​async</span><span class="f_CodeExample" style="font-size: 16px; color: #ffffff;"> </span><span class="f_CodeExample" style="font-size: 16px;">function</span><span class="f_CodeExample" style="font-size: 16px; color: #ffffff;"> </span><span class="f_CodeExample" style="font-size: 16px;">onInit():</span><span class="f_CodeExample" style="font-size: 16px; color: #ffffff;"> </span><span class="f_CodeExample" style="font-size: 16px;">Promise&lt;</span><span class="f_CodeExample" style="font-size: 16px; font-weight: bold;">void</span><span class="f_CodeExample" style="font-size: 16px;">&gt;</span><span class="f_CodeExample" style="font-size: 16px; color: #ffffff;"> </span><span class="f_CodeExample" style="font-size: 16px;">{</span><br />
<span class="f_CodeExample" style="font-size: 16px;">​​</span><span class="f_CodeExample" style="font-size: 16px; color: #ffffff;"> &nbsp; </span><span class="f_CodeExample" style="font-size: 16px;">...</span><br />
<span class="f_CodeExample" style="font-size: 16px;">​​</span><span class="f_CodeExample" style="font-size: 16px; color: #ffffff;"> &nbsp; </span><span class="f_CodeExample" style="font-size: 16px;">calcWorkHours();</span><br />
<span class="f_CodeExample" style="font-size: 16px;">​​}</span>​​</p>
<ol style="list-style-type:upper-roman">
<li value="7" class="p_Normal">Теперь форма будет загружаться до окончания работы метода, но без данных. Как только метод выполнится и обновит контекст, изменения автоматически отобразятся в виджете.</li><li value="8" class="p_Normal">Опубликуем виджет и заново выполним пп. 1-2.</li></ol>
<p class="p_Normal"><img alt="devtools-report-15" width="832" height="467" style="margin:0;width:832px;height:467px;border:none" src="devtools-report-15.png"/></p>
<p class="p_Normal">Теперь событие запроса на сервер выходит за границы периода загрузки формы. Это означает, что метод выполнился без ожидания и форма начала загружаться до того, как завершилось выполнение метода <code><b>calcWorkHours()</b></code>.</p>
<p class="p_Normal">В отчёте также отображаются виджеты <span style="font-weight: bold;">worklog_report_button</span>, <span style="font-weight: bold;">online_timer</span> и <span style="font-weight: bold;">button</span>. Это виджеты типа <a href="toolbar-extention-zone.html" class="topiclink">Зона расширения тулбара</a>. Они загружаются асинхронно и не влияют на время отображения карточки.</p>
<h3 class="p_Heading3"><span class="f_Heading3">Примеры ситуаций для оптимизации</span></h3>
<p class="p_Normal">Перечислим кратко другие варианты отображения данных в отчёте <span style="font-weight: bold;">Инструменты разработчика</span>, когда возможна оптимизация загрузки элементов интерфейса.</p>
<ul style="list-style-type:disc">
<li class="p_Normal">большая длительность события <span style="font-weight: bold;">render:onlnit</span>;</li><li class="p_Normal">много запросов в группе <span style="font-weight: bold;">backend</span>, получение большого количества данных;</li><li class="p_Normal">фильтрация данных на стороне пользователя;</li><li class="p_Normal">дополучение данных в цикле;</li><li class="p_Normal">двойные запросы.</li></ul>
<p class="p_Normal"><img alt="devtools-report-16" width="1011" height="676" style="margin:0;width:1011px;height:676px;border:none" src="devtools-report-16.png"/></p>
<div class="bottom-nav">
<a id="prev-link" class="topic__navi_prev" href="devtools.html">
<span class="bottom-nav__arrow bottom-nav__arrow--prev"></span> <span
class="bottom-nav__link">devtools.html</span>
</a>
<a id="next-link" class="topic__navi_next" href="download-logs.html">
<span class="bottom-nav__link">download-logs.html</span> <span
class="bottom-nav__arrow bottom-nav__arrow--next"></span>
</a>
</div>
<!-- добавляет на страницу строку блок Была ли статья полезной? -->
<div class="feedback-wrap"><div class="feedback" id="feedback"><span><b>Была ли статья полезной?</b></span><form action="" method="POST" class="feedback-form" id="feedback-form"><div class="feedback__popup feedback__popup-response" id="feedback__popup_thx">Спасибо за ваш отзыв!</div><div id="feedback-success-popup"><div class="wrap"><button type="button" class="feedback-popup-close">×</button><svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_212_2187)"><path d="M22 0.6875C10.2294 0.6875 0.6875 10.2294 0.6875 22C0.6875 33.7706 10.2294 43.3125 22 43.3125C33.7706 43.3125 43.3125 33.7706 43.3125 22C43.3125 10.2294 33.7706 0.6875 22 0.6875ZM22 40.5625C11.8023 40.5625 3.4375 32.3078 3.4375 22C3.4375 11.8024 11.6922 3.4375 22 3.4375C32.1977 3.4375 40.5625 11.6922 40.5625 22C40.5625 32.1976 32.3078 40.5625 22 40.5625ZM34.1713 16.933L18.6613 32.3186C18.257 32.7197 17.604 32.7171 17.203 32.3128L9.82283 24.873C9.42176 24.4686 9.42434 23.8157 9.82867 23.4146L10.5609 22.6884C10.9652 22.2873 11.6181 22.2899 12.0192 22.6942L17.9468 28.6697L31.9926 14.7366C32.3969 14.3356 33.0498 14.3382 33.4509 14.7425L34.1772 15.4747C34.5783 15.879 34.5757 16.532 34.1713 16.933Z" fill="#27AE60"></path></g><defs><clipPath id="clip0_212_2187"><rect width="44" height="44" fill="white"></rect></clipPath></defs></svg><p>Ваш отзыв успешно отправлен!</p><span>Спасибо за обратную связь.</span></div></div><div class="feedback__popup" id="feedback__popup_why"><button type="button" class="feedback-popup-close">×</button><div class="feedback__popup-header">Уточните, почему:</div><input type="radio" name="category" id="bad_recommendation" value="bad_recommendation"><label for="bad_recommendation">Рекомендации не помогли</label><input type="radio" name="category" id="difficult_text" value="difficult_text"><label for="difficult_text">Текст трудно понять</label><input type="radio" name="category" id="no_answer" value="no_answer"><label for="no_answer">Нет ответа на мой вопрос</label><input type="radio" name="category" id="bad_header" value="bad_header"><label for="bad_header">Содержание статьи не соответствует заголовку</label><input type="radio" name="category" id="other_reason" value="other_reason"><label for="other_reason">Другая причина</label></div><div class="feedback__popup" id="feedback__popup-other"><button type="button" class="feedback-popup-close">×</button> <div class="feedback__popup-header">Расскажите, что вам не понравилось в статье:</div><textarea class="feedback__textarea" name="other" id=""></textarea><input type="submit" class="feedback__other-btn" value="Отправить"></div><div class="feedback-form__btn-group"><input type="radio" name="useful" id="feedback__useful_yes" value="true"><label for="feedback__useful_yes"><img src="like.svg"/><span class="feedback-form__btn-group_yes-btn">Да</span></label><input type="radio" name="useful" id="feedback__useful_no" value="false"><label for="feedback__useful_no"><img src="dislike.svg"/><span class="feedback-form__btn-group_no-btn">Нет</span></label></div><select name="category"><option disabled>Выберите вариант</option><option value="bad_recommendation" selected>Рекомендации не помогли</option><option value="difficult_text">Текст трудно понять</option><option value="no_answer">Нет ответа на мой вопрос</option><option value="bad_header">Содержание статьи не соответствует заголовку</option><option value="other_reason">Другая причина</option></select><input type="submit"></form></div></div>
</section>
</div>
<aside class="article__sidebar" style="display:none">
<input type="checkbox" />
<div class="article__arrow"></div>
<div class="table-of-contents elma365-right" id="toc2Content">
<h3 class="h3-toc">В этой статье</h3>
<nav id="toc2"></nav>
</div>
</aside>
</div>
</article>
</main>
<footer class="footer">
<div class="footer-container">
<div class="footer-mobile">
<ul class="footer-mobile__list"><li><a href="https://api.elma365.com/ru/" target="_blank">API</a></li><li><a href="https://tssdk.elma365.com/" target="_blank">TS SDK</a></li><li><a href="https://community.elma365.com/" target="_blank">Community</a></li><li><a href="https://elma-academy.com/ru/elma365" target="_blank">Академия</a></li></ul><ul class="footer-mobile__list"><li><a href="https://elma365.com/ru/help/platform/get-trial.html">Платформа</a></li><li><a href="https://elma365.com/ru/help/ecm/ecm-functions.html">ECM</a></li><li><a href="https://elma365.com/ru/help/service/service-functions.html">Service</a></li><li><a href="https://elma365.com/ru/help/projects/projects-functions.html">Проекты</a></li></ul>
</div>
<div class="container">
<div class="footer-wrap">
<div><span class="mobile-question-popup">Отправить фидбэк</span><form method="POST" action class="question__popup question-xs" id="question__popup"><div class="question-wrap"><span class="close"></span><span class="title">Задать вопрос</span><label for="help_question" style="display: none;"></label><textarea name="help_question" id="help_question"></textarea><input type="submit" value="Отправить"></div></form><div class="hidden fade-in question-success-xs">Ваш фидбэк отправлен.</div></div>
<div class="footer-flex-b">
<div class="footer-top">
<span class="footer-copy">&copy; 2025
ELMA365
</span>
<a href="https://navigator.sk.ru/orn/1122971" target="_blank">
<img src="sk-resident.svg" alt="sk icon" class="footer-img" width="117" height="34">
</a>
</div>
<div class="footer-line">
<div class="footer-line-copy">
<span class="footer-copy">&copy; 2025
ELMA365
</span>
</div>
<ul class="footer-list">
<li class="footer-item"><a href="https://elma365.com/ru/" target="_blank" class="footer-link" style="color: #0D4A75;"><img src="browse.svg" alt="browse icon" class="footer-img">elma365.com</a></li><li class="footer-item"><a href="https://www.youtube.com/user/ELMABPM" target="_blank" class="footer-link"><img src="yt.svg" alt="youtube icon" class="footer-img"></a></li><li class="footer-item"><a href="https://vk.com/elma_bpm" target="_blank" class="footer-link"><img src="vk.svg" alt="vk icon" class="footer-img"></a></li><li class="footer-item"><a href="https://t.me/elmaday" target="_blank" class="footer-link"><img src="tg.svg" alt="telegram icon" class="footer-img"></a></li><li class="footer-item"><a href="https://dzen.ru/elma" target="_blank" class="footer-link"><img src="dzen.svg" alt="dzen icon" class="footer-img"></a></li>
<li class="footer-item">
<a href="https://navigator.sk.ru/orn/1122971" target="_blank">
<img src="sk-resident.svg" alt="sk icon" class="footer-img" width="117" height="34">
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<a href="#" class="arrow-top"></a>
</div>
</footer>
<!-- <script type="text/javascript" src="jquery1.min.js"></script>-->
<iframe name="hmnavigation" style="display:none!important"></iframe>
<!--<script src="./jquery-ui.js"></script> -->
<script src="./jquery-ui.min.js"></script>
<!--script src="//cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script-->
<script src="./jquery.tocify.min.js"></script>
<script src="./TypoReporter.min.js"></script>
<script src="./google-search.js"></script>
<script src="./main.js"></script>
</body>
</html>