Модельге негізделген бағдарламалардағы өнімділіктің дизайн пішіндері

Мақала
03/14/2023

Тапсырмаларды тез және тиімді орындауға болатын тәжірибелерді жасау пайдаланушылардың қанағаттануы үшін өте маңызды. Пайдаланушылардың қажеттіліктерін қанағаттандыратын тәжірибе жасау үшін модельге негізделген бағдарламаларды жоғары деңгейде теңшеуге болады, бірақ пайдаланушы күнделікті тапсырмалармен жұмыс жасау кезінде бағдарламаны ашып және шарлағанда жылдам жүктелетін модельге негізделген бағдарламаларды тиімді кодтауды, құрастыруды және іске қосуды білу маңызды. Бағдарлама өнімділікке оңтайландырылмаған кезде өнімділіктің қанағаттанбаудың негізгі драйвері екені анықталды.

Интеллектуалды теңшеулер мен өнімді пішіндер тиімділігі жоғары және өнімді пішіндерді құрудың маңызды аспектілері болып табылады. Тиімділігі жоғары пішіндерді пайдаланушы интерфейсінің дизайны мен орналасуының үздік тәжірибесімен құрғаныңызға көз жеткізу де маңызды. Тиімділік пен өнімділіктің пішіндерін жобалау туралы ақпаратты Модельге негізделген бағдарламаларды өнімді негізгі пішіндерді жобалау бөлімінен қараңыз.

Сондай-ақ пайдаланушылардың ұсынылған және қолдау көрсетілетін құрылғыларда болуын және ең аз талап етілетін сипаттамаларды қамтамасыз ету маңызды. Қосымша ақпарат: Қолдау көрсетілетін веб‑браузерлер мен мобильді құрылғылар

Деректермен және қойыншалармен жұмыс істеу

Бұл бөлімде деректер мен қойыншаларды көрсететін басқару элементтері пішіннің өнімділігіне қалай әсер ететіні қарастырылады.

Әдепкі қойыншаның маңыздылығы

Әдепкі қойынша — бұл пішіндегі бірінші кеңейтілген қойынша. Ол пішін бетін жүктеуде ерекше рөл атқарады. Жобалау бойынша жазбаны ашу кезінде әдепкі қойыншаның басқару элементтері әрқашан көрсетіледі. Атап айтқанда, деректерді шығару сияқты басқару элементін баптау логикасы қойыншадағы әрбір басқару элементі үшін шақырылады.

Керісінше, қосалқы қойынша пішін бастапқыда жүктелген кезде оның басқару элементтерінде бұл баптауды орындамайды. Оның орнына, басқару элементін баптау қосалқы қойынша пайдаланушының әрекеті немесе setFocus клиентінің API әдісін шақыру арқылы ашылған кезде пайда болады. Бұл белгілі бір басқару элементтерін әдепкі қойынша орнына қосалқы қойыншаларға орналастыру арқылы бақылаудың қайта өңделуінен бастапқы пішін жүктемесін сақтауға мүмкіндік береді. Осылайша, басқару элементін орналастыру стратегиясы бастапқы пішін жүктемесінің жауаптылығына айтарлықтай әсер етуі мүмкін. Қосымша әдепкі қойынша маңызды өрістерді өзгертуге, пәрмен жолағымен әрекеттесуге және басқа қойыншалар мен бөлімдерді зерттеуге арналған жалпы тәжірибені қамтамасыз етеді.

Жиі қолданылатын басқару элементтерін әрқашан әдепкі қойыншаның жоғарғы жағына орналастырыңыз. Орналасу мен ақпараттық архитектура өнімділік үшін ғана емес, сонымен қатар пайдаланушылар пішіндегі деректермен өзара әрекеттескенде өнімділікті жақсарту үшін де маңызды. Қосымша ақпарат: Модельге негізделген бағдарламаларды өнімді негізгі пішіндерді жобалау

Деректерге негізделген басқару элементтері

Бастапқы жазбадан тыс қосымша деректерді қажет ететін басқару элементтері пішіннің жауаптылығы мен жүктелу жылдамдығына үлкен жүктеме береді. Бұл басқару элементтері деректерді желі арқылы алады және көбінесе күту кезеңін қамтиды (прогресс индикаторы ретінде қарастырылады), себебі деректерді беру үшін уақыт қажет болуы мүмкін.

Деректерге негізделген кейбір басқару элементтері мыналарды қамтиды:

Жедел қарау пішіні
Ішкі тор
Кесте
Көмекші (Dynamics 365 Sales Insights бағдарламасын қажет)

Әдепкі қойыншада осы басқару элементтерінің ең жиі пайдаланылатынын ғана сақтаңыз. Қалған деректерге негізделген басқару элементтерін қосымша қойыншаларға бөлу керек, бұл әдепкі қойыншаның тез жүктелуіне мүмкіндік береді. Сонымен қатар бұл орналасу стратегиясы пайдаланылмайтын деректерді алу мүмкіндігін азайтады.

Деректерге негізделген басқару элементтеріне қарағанда әсері төмен басқа да басқару элементтері бар, бірақ олар жоғары өнімділікке жету үшін жоғарыдағы орналасу стратегиясына қатыса алады. Бұл басқару элементтеріне мыналар жатады:

Веб-шолғыш

Бұл бөлім веб-браузерлермен жұмыс жасаудың жақсы тәжірибесін қамтиды.

Жаңа терезелерді ашпау

openForm клиентінің API әдісі параметр опциясына пішінді жаңа терезеде көрсетуге мүмкіндік береді. Бұл параметрді пайдаланбаңыз немесе оны жалған мәніне қоймаңыз. Оны жалған мәніне орнату openForm әдісінің бұрыннан бар терезені пайдалану арқылы пішінді көрсетудің әдепкі әрекетін орындауын қамтамасыз етеді. Сонымен қатар window.open JavaScript функциясын теңшелетін сценарийден немесе басқа бағдарламадан тікелей шақыруға болады; дегенмен, бұған да жол бермеу керек. Жаңа терезенің ашылуы беттің барлық ресурстарын жаңадан шығаруды және жүктеуді білдіреді, себебі бет бұрын жүктелген пішін мен жаңа терезедегі пішін арасындағы жадтағы деректерді кэштеу мүмкіндіктерін пайдалана алмайды. Жаңа терезелерді ашудың баламасы ретінде, клиенттерді кэштеудің өнімділігін арттыра отырып, жазбаларды бірнеше қойыншада ашуға мүмкіндік беретін көп сеансты тәжірибені пайдалануды қарастырыңыз.

Заманауи браузерлерді пайдалану

Ең жаңа веб-браузерді пайдалану модельге негізделген бағдарламаның мүмкіндігінше жылдам жұмыс істеуін қамтамасыз етеді. Мұның себебі өнімділікті жақсартудың көпшілігін тек жаңа заманауи браузерлерде қолдануға болады.

Мысалы, егер сіздің ұйымыңызда Firefox браузерінің ескі нұсқалары, Chromium браузеріне негізделмеген браузерлер және т.б. болса, модельге негізделген бағдарламада орнатылған өнімділіктің көптеген жетістіктері браузердің ескі нұсқаларында қолжетімді болмайды, себебі олар бағдарламаның жылдам жұмыс істеуіне әсер ететін функцияларға қолдау көрсетпейді.

Көп жағдайда сіз беттің жүктелуін Microsoft Edge браузеріне жай ғана ауысу, ескі нұсқадан браузердің соңғы ағымдағы нұсқасына жаңарту немесе Chromium негізіндегі заманауи браузерге көшу арқылы көруге болады.

JavaScript теңшелімі

Бұл бөлімде модельге негізделген бағдарламада өнімді пішіндер мен беттерді құруға көмектесетін JavaScript функциясын қолданған кезде интеллектуалды теңшелімдерді жасау жолы қарастырылады.

Пішіндері бар JavaScript функциясын қолдану

JavaScript функциясы арқылы пішіндерді баптау мүмкіндігі кәсіби әзірлеушілерге пішіннің қалай көрінетіні мен әрекет етуіне үлкен икемділік береді. Бұл икемділікті дұрыс пайдаланбау пішіннің өнімділігіне теріс әсер етуі мүмкін. Әзірлеушілер JavaScript теңшелімдерін енгізу кезінде пішіннің өнімділігін арттыру үшін келесі стратегияларды қолдануы керек.

Деректерді сұрау кезінде асинхронды желі сұрауларын пайдалану

Теңшелімдер үшін қосымша деректер қажет болғанда деректерді синхронды емес, асинхронды түрде сұраңыз. Пішіннің OnLoad және пішіннің OnSave оқиғалары сияқты асинхронды кодты күтуге қолдау көрсететін оқиғалар үшін, оқиға өңдегіштері платформаның Promise орнатылуын күтуі үшін Promise сипатын қайтаруы керек. Пайдаланушы оқиғаның аяқталуын күту кезінде платформа тиісті пайдаланушы интерфейсін көрсетеді.

Пішіннің OnChange оқиғасы сияқты асинхронды кодты күтуге қолдау көрсетпейтін оқиғалар үшін, код асинхронды сұрауды showProgressIndicator орындау кезінде пішінмен әрекеттесуді тоқтату үшін уақытша шешімді қолдануға болады. Бұл синхронды сұрауларды пайдаланудан гөрі жақсы, себебі пайдаланушылар прогресс индикаторы көрсетілгенде, бағдарламаның басқа бөліктерімен жұмыс жасай алады.

Асинхронды коды синхронды кеңейту нүктелерінде пайдаланудың мысалы.

//Only do this if an extension point does not yet support asynchronous code
try {
    await Xrm.WebApi.retrieveRecord("settings_entity", "7333e80e-9b0f-49b5-92c8-9b48d621c37c");
    //do other logic with data here
} catch (error) {
    //do other logic with error here
} finally {
    Xrm.Utility.closeProgressIndicator();
}

// Or using .then/.finally
Xrm.Utility.showProgressIndicator("Checking settings...");
Xrm.WebApi.retrieveRecord("settings_entity", "7333e80e-9b0f-49b5-92c8-9b48d621c37c")
    .then(
        (data) => {
            //do other logic with data here
        },
        (error) => {
            //do other logic with error here
        }
    )
    .finally(Xrm.Utility.closeProgressIndicator);

Асинхронды кодты күтуге қолдау көрсетпейтін оқиға өңдегішінде асинхронды кодты пайдаланғанда абай болу керек. Бұл әсіресе асинхронды кодтың ажыратымдылығы бойынша әрекет етуді немесе өңдеуді қажет ететін кодқа қатысты болып табылады. Егер ажыратымдылық өңдегіші бағдарлама контекстінің асинхронды код басталған кездегі күйінде қалады деп күтсе, асинхронды код мәселелер тудыруы мүмкін. Сіздің кодыңыз әр асинхронды жалғастыру нүктесінен кейін пайдаланушының сол контекстте екенін тексеруі керек.

Мысалы, оқиға өңдегішінде желілік сұрауды жасауға және жауап деректерінің негізінде өшірілуі керек басқару элементін өзгертуге арналған код болуы мүмкін. Сұраудан жауап келмес бұрын, пайдаланушы басқару элементімен әрекеттескен немесе басқа бетке өткен болуы мүмкін. Пайдаланушы басқа бетте болғандықтан, пішін мәнмәтіні қолжетімді болмауы мүмкін, бұл қателерге әкелуі мүмкін немесе басқа қажетсіз әрекеттер болуы мүмкін.

Пішіннің OnLoad және пішіннің OnSave оқиғаларындағы асинхронды қолдау

Пішіннің OnLoad және OnSave оқиғалары уәделерді қайтаратын өңдегіштерге қолдау көрсетеді. Оқиғалар уақыт аяқталғанша шешуге арналған өңдегіш қайтаратын кез келген уәделерді күтеді. Бұл қолдауды бағдарлама параметрлері арқылы қосуға болады.

Қосымша ақпарат:

Пішінді жүктеу кезінде сұралатын деректер көлемін шектеу

Пішінде бизнес логиканы орындау үшін қажетті деректердің ең аз мөлшерін сұраңыз. Мүмкіндігінше сұралатын деректерді кэштеңіз, әсіресе жиі өзгермейтін немесе жаңартуды қажет етпейтін деректер үшін. Мысалы, параметр кестесінен деректерді сұрайтын пішінді елестетіңіз. Параметрлер кестесіндегі деректерге сүйене отырып, пішін пішіннің бір бөлігін жасыруды таңдауы мүмкін. Бұл жағдайда JavaScript функциясы sessionStorage бөліміндегі деректерді кэштей алады, сондықтан бір сеансқа бір рет қана деректер сұралады (onLoad1). Қайта растау стратегиясы JavaScript функциясы пішінде келесі шарлау үшін деректерді сұрау кезінде sessionStorage бөліміндегі деректерді пайдаланған кезде пайдаланылуы мүмкін (onLoad2). Ақырында, өңдегіш қатарда бірнеше рет шақырылған жағдайда, қайталау стратегиясын қолдануға болады (onLoad3).

const SETTING_ENTITY_NAME = "settings_entity";
const SETTING_FIELD_NAME = "settingField1";
const SETTING_VALUE_SESSION_STORAGE_KEY = `${SETTING_ENTITY_NAME}_${SETTING_FIELD_NAME}`;

// Retrieve setting value once per session
async function onLoad1(executionContext) {
    let settingValue = sessionStorage.getItem(SETTING_VALUE_SESSION_STORAGE_KEY);

    // Ensure there is a stored setting value to use
    if (settingValue === null || settingValue === undefined) {
        settingValue = await requestSettingValue();
    }

    // Do logic with setting value here
}

// Retrieve setting value with stale-while-revalidate strategy
async function onLoad2(executionContext) {
    let settingValue = sessionStorage.getItem(SETTING_VALUE_SESSION_STORAGE_KEY);

    // Revalidate, but only await if session storage value is not present
    const requestPromise = requestSettingValue();

    // Ensure there is a stored setting value to use the first time in a session
    if (settingValue === null || settingValue === undefined) {
        settingValue = await requestPromise;
    }
    
    // Do logic with setting value here
}

// Retrieve setting value with stale-while-revalidate and deduplication strategy
let requestPromise;
async function onLoad3(executionContext) {
    let settingValue = sessionStorage.getItem(SETTING_VALUE_SESSION_STORAGE_KEY);

    // Request setting value again but don't wait on it
    // In case this handler fires twice, don’t make the same request again if it is already in flight
    // Additional logic can be added so that this is done less than once per page
    if (!requestPromise) {
        requestPromise = requestSettingValue().finally(() => {
            requestPromise = undefined;
        });
    }

    // Ensure there is a stored setting value to use the first time in a session
    if (settingValue === null || settingValue === undefined) {
        settingValue = await requestPromise;
    }
    
    // Do logic with setting value here
}

async function requestSettingValue() {
    try {
        const data = await Xrm.WebApi.retrieveRecord(
            SETTING_ENTITY_NAME,
            "7333e80e-9b0f-49b5-92c8-9b48d621c37c",
            `?$select=${SETTING_FIELD_NAME}`);
        try {
            sessionStorage.setItem(SETTING_VALUE_SESSION_STORAGE_KEY, data[SETTING_FIELD_NAME]);
        } catch (error) {
            // Handle sessionStorage error
        } finally {
            return data[SETTING_FIELD_NAME];
        }
    } catch (error) {
        // Handle retrieveRecord error   
    }
}

Сұраулар жасаудан гөрі API клиентінде бар ақпаратты пайдаланыңыз. Мысалы, пішін жүктеуде пайдаланушының қауіпсіздік рөлдерін сұраудың орнына, getGlobalContext.userSettings.roles пайдалануға болады.

Кодты қажет болғанда ғана жүктеу

Белгілі бір пішінге арналған оқиғалар үшін коды қажетінше жүктеңіз. Егер сізде тек А пішіні және В пішіні үшін код болса, ол С пішіні үшін жүктелген кітапханаға қосылмауы керек. Ол өзінің жеке кітапханасында болуы керек.

OnLoad оқиғасында кітапханаларды жүктеуді олар тек OnChange немесе OnSave оқиғалары үшін ғана пайдаланылса болдырмаңыз. Оның орнына оларды сол оқиғаларда жүктеңіз. Осылайша, платформа пішін жүктелгенше оларды жүктеуді кейінге қалдыра алады. Қосымша ақпарат: Пішіннің өнімділігін оңтайландыру

Өндіріс кодындағы консоль API интерфейстерін пайдалануды алып тастау

Өндірістік кодтағы console.log сияқты консольдің API әдістерін қолданбаңыз. Деректерді консольге тіркеу жад сұранысын айтарлықтай арттыруы мүмкін және деректердің жадта тазалануын болдырмауы мүмкін. Бұл бағдарламаның уақыт өте баяулауына және ақырында істен шығуына әкелуі мүмкін.

Жадтың жылыстауына жол бермеңіз

Кодыңыздағы жадтың жылыстауы уақыт өте келе өнімділіктің төмендеуіне әкелуі және сайып келгенде бағдарламаңыздың бұзылуына әкелуі мүмкін. Жадтың жылыстауы бағдарлама қажет болмаған кезде жадты босатпаған кезде орын алады. Пішініңіздегі барлық теңшеулер мен код құрамдастарының көмегімен мына әрекеттерді орындауыңыз қажет:

Нысандардың өмірлік циклін басқаруға жауапты сыныптар сияқты жадты тазалауға жауапты кез келген нәрсе үшін сценарийлерді мұқият қарастырыңыз және тексеріңіз.
Барлық оқиға тыңдаушылары мен жазылымдарын тазалаңыз, әсіресе ол window нысанында болса.
setInterval сияқты барлық таймерлерді тазалаңыз.
Глобалдық немесе статикалық нысандарға сілтемелерді қолданбаңыз, шектеңіз және тазалаңыз.

Теңшелетін басқару құрамдастары үшін тазалауды жою әдісімен жасауға болады.

Жад ақаулықтарын түзету туралы қосымша ақпарат алу үшін осы Edge әзірлеушісінің құжаттамасы бөліміне өтіңіз.

Бағдарламаларды тиімді етуге көмектесетін құралдар

Бұл бөлім өнімділік мәселелерін түсінуге көмектесетін құралдарды сипаттайды және модельге негізделген бағдарламаларда баптауды оңтайландыру бойынша ұсыныстар береді.

Өнімділік мәліметтері

Өнімділік туралы түсінік — бұл жұмыс уақытындағы телеметриялық деректерді талдайтын және модельге негізделген бағдарламалардың өнімділігін жақсартуға көмектесетін ұсыныстардың басым тізімін беретін кәсіпорын бағдарламалары жасаушыларына арналған өзіне-өзі қызмет көрсету құралы. Бұл мүмкіндік модельге негізделген Power Apps бағдарламасының немесе Dynamics 365 Sales немесе Dynamics 365 Service сияқты customer engagement бағдарламасының жұмысына байланысты күнделікті аналитикалық мәліметтер жиынтығын ұсынады. Кәсіпорын бағдарламаларын жасаушылар Power Apps бағдарламасында толық өнімділік туралы түсініктерді бағдарлама деңгейінде көре алады. Қосымша ақпарат: Өнімділік туралы түсініктер дегеніміз не? (алдын ала қарау нұсқасы)

Шешім тексергіш

Шешімді тексеру құралы — бұл клиент пен сервер теңшелімдерін өнімділігі мен сенімділігі бойынша талдай алатын қуатты құрал. Ол клиент тарапындағы JavaScript, пішіннің XML және .NET сервер тарапындағы қосылатын модульдерін талдайды және соңғы пайдаланушыларды баяулатуы мүмкін нәрселер туралы мақсатты түсінік береді. Әзірлеу ортасында өзгерістерді жариялаған сайын шешімді тексеру құралын іске қосуды ұсынамыз, осылайша кез келген өнімділікке қатысты мәселелер соңғы пайдаланушыларға жетпес бұрын пайда болады. Қосымша ақпарат: Power Apps жүйесіндегі үлгі негізіндегі бағдарламаларды тексеру үшін шешім тексеру құралын пайдалану

Шешімді тексеру құралы арқылы табылған өнімділікке қатысты мәселелердің кейбір мысалдары:

il-specify-column. Dataverse сұрау API интерфейстері арқылы барлық бағандарды таңдауға болмайды.
web-use-async. HTTP және HTTPS ресурстарын бейсинхронды жолмен байланыстырыңыз.
web-avoid-ui-refreshribbon. refreshRibbon сипатын пішіннің OnLoad және EnableRule оқиғаларында пайдаланбаңыз.

Нысан тексергіш

Нысанды тексеру құралы шешімдегі құрамдас нысандарында нақты уақыттағы диагностиканы іске қосады. Егер ақаулар анықталса, мәселені шешу жолын сипаттайтын ұсыныс қайтарылады. Қосымша ақпарат: Шешім құрамдасын диагностикалау үшін нысан тексеру құралын пайдалану (алдын ала қарау нұсқасы)

Келесі қадамдар

Модельге негізделген бағдарламаларда өнімді негізгі пішіндерді құрастыру

Share via