Share via

Model temelli uygulamalarda performans için formları tasarlama

  • Makale

Görevlerin hızlı ve verimli bir şekilde tamamlanabileceği deneyimler oluşturmak, kullanıcı memnuniyeti için çok önemlidir. Model temelli uygulamalar, kullanıcılarınızın gereksinimlerini karşılayan deneyimler oluşturmak için yüksek düzeyde özelleştirilebilir; ancak, bir kullanıcı günlük görevler üzerinde çalışırken uygulamanızda uygulamasını açtığında ve uygulamasında gezindiği zaman hızlı bir şekilde yüklenen model temelli uygulamaları nasıl etkin şekilde kodlayıp çalıştıracağınızı bilmek önemlidir. Optimizasyonu yapılmamış uygulamaların, müşteri memnuniyetini tersine çeviren en önemli faktör olduğu görülmüştür.

Akıllı özelleştirmeler ve performanslı formlar, çok verimli ve etkili formlar oluşturmak için önemli yönlerdir. Kullanıcı arabirimi tasarımında ve düzeninde en iyi uygulamalarla çok verimli formlar oluşturduğunuzdan emin olmak da önemlidir. Verimlilik ve üretkenlik için form tasarlama hakkında daha fazla bilgi için bkz. Model temelli uygulamalarda tasarım açısından verimli temel formlar.

Kullanıcıların önerilen ve desteklenen cihazlarda ve en az gerekli belirtimlerde olmasını sağlamak da önemlidir. Daha fazla bilgi: Desteklenen web tarayıcıları ve mobil cihazlar

Verilerle ve sekmelerle çalışma

Bu bölümde, verileri ve sekmeleri görüntüleyen denetimlerin, form performansını etkileme biçimi yer almaktadır.

Varsayılan sekmenin önemi

Varsayılan sekme, bir formdaki ilk genişletilen sekmedir. Bir form sayfasının yüklenmesinde özel bir rol oynar. Tasarım olarak, bir kayıt açılırken varsayılan sekmenin denetimleri her zaman işlenir. Özellikle, veri alımı gibi denetim başlatma mantığı, sekmedeki her denetim için çağrılır.

Bunun tersine, ikincil sekme ise form ilk yüklendiğinde bu başlatma denetimlerini gerçekleştirmez. Bunun yerine, denetimin başlatılması, ikincil sekmenin kullanıcı etkileşimi aracılığıyla ya da setFocus istemci API yöntemi çağrılarak açıldığı zaman oluşur. Bu, belirli denetimleri varsayılan sekme yerine ikincil sekmelerde yerleştirerek, daha fazla denetim işleminin ilk form yükünün ayrılmasını sağlar. Bu nedenle, denetim yerleşim stratejisinin ilk form yükü için yanıt verme performansı üzerinde belirgin bir etkisi olabilir. Daha hızlı yanıt veren bir varsayılan sekme, önemli alanların değiştirilmesi, komut çubuğuyla etkileşim kurma ve diğer sekmelerin ve bölümlerin keşfedilmesine yönelik daha iyi bir genel deneyim sunar.

Her zaman varsayılan sekmesinin en üstüne kullanılan denetimleri yerleştirin. Düzen ve bilgi mimarisi performans için önemli olmakla kalmaz aynı zamanda kullanıcılar formdaki verilerle etkileşim kurdukları üretkenliği de artırır. Daha fazla bilgi: Model temelli uygulamalarda tasarım açısından verimli temel formlar

Veri temelli denetimler

Birincil kaydın ötesinde fazla veri gerektiren denetimler, form yanıt verme hızı ve yükleme hızına en fazla yükü bindiren faktörlerdir. Bu denetimler verileri ağ üzerinden alır ve verilerin iletilmesi zaman alabileceğinden genellikle bekleme süresi (ilerleme göstergeleri olarak görünür) vardır.

Veri temelli denetimlerden bazıları şunlardır:

Varsayılan sekmede bu denetimlerden yalnızca en sık kullanılanları tutun. Varsayılan sekmenin hızlı bir şekilde yüklenmesine izin vermek için, geri kalan veri temelli denetimler ikincil sekmelere dağıtılmalıdır. Ayrıca, bu düzen stratejisi, kullanılmayan verileri getirme olasılığını azaltır.

Veri temelli denetimlerden daha az etkin olan ancak en iyi performansı elde etmek için yukarıdaki düzen stratejisine katılabilecek başka denetimler de vardır. Bu denetimler aşağıdakileri içerir:

Web tarayıcısı

Bu bölümde, web tarayıcılarıyla kullanmak için iyi uygulamalar yer almaktadır.

Yeni pencereler açmayın

openForm istemci API'si yöntemi, bir parametre seçeneğinin formu yeni bir pencerede görüntülemesine izin verir. Bu parametreyi kullanmayın veya yanlış değerine ayarlayın. Yanlış değerine ayarlanması, openForm yöntemin mevcut pencereyi kullanarak formu görüntüleme davranışını varsayılan olarak gerçekleştirdiğinden emin olur. window.open JavaScript işlevini özel bir komut dosyasından veya başka bir uygulamadan doğrudan çağırmanız da mümkündür; ancak bu yöntem de tercih edilmemelidir. Yeni bir pencere açmak, sayfanın daha önce yüklenen bir form ile yeni bir pencerede form arasında veri önbelleklemesi özelliklerini kullanamayacağı için tüm sayfa kaynaklarının baştan alınması ve açılması gerektiği anlamına gelir. Yeni pencereler açmanın bir alternatifi olarak, istemci önbelleklemesi performansını en üst düzeye çıkarmak için kayıtların birden çok sekmede açılmasına izin veren çoklu oturum deneyimini kullanmayı düşünebilirsiniz.

Modern tarayıcılar kullanın

Model temelli bir uygulamanın mümkün olduğunca hızlı çalışmasını sağlamak için en güncel web tarayıcısını kullanmak önemlidir. Bunun nedeni, çoğu performans iyileştirmelerinden yalnızca yeni modern tarayıcılarda kullanılabilir olmasıdır.

Örneğin, kuruluşunuzda daha eski Firefox, Chromium tabanlı olmayan tarayıcı sürümleri varsa, model temelli bir uygulamada yerleşik olarak bulunan performans kazançlarının çoğu eski tarayıcı sürümlerinde kullanılamaz, çünkü uygulamanın hızlı ve sorunsuz çalışmak için bağlı olduğu özellikleri desteklemezler.

Çoğu durumda, Microsoft Edge'e geçerek, eski bir sürümden en son geçerli tarayıcı sürümüne güncelleştirerek ya da modern Chromium tabanlı tarayıcıya geçerek sayfa yüklemede gelişim görebilirsiniz.

JavaScript özelleştirmesi

Bu bölümde, bir model temelli uygulamada performanslı formlar ve sayfalar oluşturmanıza yardımcı olan JavaScript kullandığınızda, akıllı özelleştirmelerin nasıl yapılacağı ele alınmaktadır.

Formlarla JavaScript kullanma

Formların JavaScript tarafından özelleştirilme yeteneği, profesyonel geliştiricilere bir formun nasıl görünebileceği ve davranacağı konusunda büyük esneklik sağlar. Bu esnekliğin yanlış kullanımı, form performansını olumsuz etkileyebilir. Geliştiriciler, JavaScript özelleştirmelerini uygularken form performansını en üst düzeye çıkarmak için aşağıdaki stratejileri kullanmalıdır.

Veri isterken zaman uyumsuz ağ istekleri kullanma

Özelleştirmeler için ek veriler gerekli olduğunda, verileri zaman uyumlu olarak değil zaman uyumsuz olarak isteme. Form OnLoad ve form OnSave olayları gibi zaman uyumsuz kodu beklemeyi destekleyen olaylar için, olay işleyicilerinin, Promise kapatılana kadar platformun beklemesi amacıyla bir Promise olayı dönmesi gerekir. Kullanıcı olayın tamamlanmasını beklerken, platform uygun bir kullanıcı arabirimi gösterir.

Form OnChange olayında olduğu gibi, zaman uyumsuz kod beklemeyi desteklemeyen olaylar için, showProgressIndicator kullanarak, kod zaman uyumsuz bir istek yaparken bir formla etkileşimi durdurabilirsiniz. Bu, zaman uyumlu olmayan istekleri kullanmaktan daha iyidir çünkü kullanıcılar, ilerleme göstergesi görüntülenirken uygulamanın diğer bölümleriyle etkileşim kurabilir.

İşte zaman uyumlu uzantı noktalarında kullanılan zaman uyumsuz koda bir örnek.

//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);

Zaman uyumsuz kod beklemeyi desteklemeyen bir olay işleyicisinde zaman uyumsuz kod kullanırken dikkatli olmalısınız. Bu, özellikle bir eylemin zaman uyumsuz kod çözünürlüğünde işlenmesi için gerçekleştirilmesi gereken bir kod için geçerlidir. Çözüm işleyicisi, uygulama bağlamının zaman uyumsuz kod başladığında olduğu gibi kalmasını beklediğinde, zaman uyumsuz kod sorunlara neden olabilir. Kodunuz her zaman uyumsuz devam noktasından sonra kullanıcının aynı içerikte olduğunu denetmelidir.

Örneğin, bir ağ isteği oluşturmak ve yanıt verilerine dayalı olarak bir denetimi devre dışı bırakacak şekilde olay işleyicisinde kod olabilir. İstekten gelen yanıt alınmadan önce, kullanıcı denetimle etkileşim kurmuş olabilir veya farklı bir sayfaya gitmiş olabilir. Kullanıcı farklı bir sayfada olduğu için, form bağlamı kullanılabilir olmayabilir, bu da hatalara neden olabilir veya başka istenmeyen davranışlar olabilir.

Form OnLoad ve form OnSave olaylarında asenkron desteği

Form OnLoad ve OnSave olayları, bu taahhütleri döndüren işleyicileri destekler. Olaylar bir zaman aşımı süresine kadar bir işleyicinin döndürdüğü tüm taahhütler için bekler. Bu destek, uygulama ayarları aracılığıyla etkinleştirilebilir.

Daha fazla bilgi:

Form yükü sırasında istenen veri miktarını sınırlama

Yalnızca form üzerinde iş mantığı gerçekleştirmek için gereken en az veri miktarını isteyin. Özellikle değişmeyen veya yeni olması gerekmeyen veriler için olabildiğince çok istenen verileri önbelleğe alınır. Örneğin, ayar tablosundaki verileri isteyen bir form olduğunu varsayalım. Ayar tablosundaki verileri temel alan form, formun bir bölümünü gizlemeyi seçebilir. Bu durumda, JavaScript, sessionStorage'daki verileri önbelleğe alabilir ve böylece veriler her oturum için (onLoad1) yalnızca bir kez istenir. JavaScript, verileri sessionStorage'dan kullanırken sonraki forma (onLoad2) gidiş için verileri istediği bir yeniden onaylanırken eski stratejisi de kullanılabilir. Son olarak, bir işleyicinin bir satır (onLoad3) içinde birden çok kez çağrılmaması durumunda bir yinelenenleri kaldırma stratejisi kullanılabilir.

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   
    }
}

İstek yapmak yerine istemci API'sinde bulunan bilgileri kullanın. Örneğin, bir kullanıcının form yükü üzerinde güvenlik rollerini istemektense, getglobalcontext.userSettings.Roles'u kullanabilirsiniz.

Kodu yalnızca gerekli olduğunda yükle

Belirli bir formdaki olaylar için gerektiği kadar kod yükleyin. Yalnızca form A ve form B için olan kodunuz varsa bu kod, form C için yüklenen bir kitaplığa dahil edilmelidir. Bu, kendi kitaplığında olmalıdır.

Yalnızca OnChange veya OnSave olayları için kullanılıyorsa, OnLoad olayındaki kitaplıkları yüklemeden kaçının. Bunun yerine bunları bu olaylarda yükleyin. Böylece platform, bunları yüklemeyi form yüklendikten sonrasına erteleyebilir. Daha fazla bilgi: Form performansını en iyi duruma getirme

Üretim kodundaki konsol API'lerinin kullanımını kaldır

Üretim kodunda, console.log gibi konsol API yöntemlerini kullanmayın. Konsola veri kaydetmek, bellek talebini önemli ölçüde artırabilir ve verilerin bellekte temizlenmesi engellenebilir. Bu, uygulamanın zaman içinde yavaş kalmasına ve sonunda kilitlenen duruma gelmesine yol açabilir.

Bellek sızıntılarından kaçının

Kodunuzdaki bellek sızıntıları, zaman içinde daha yavaş performansa yol açabilir ve sonuçta uygulamanızın kilitlenmesine neden olabilir. Daha fazla gerekmediğinde uygulama belleği serbest bırakamadığında bellek sızıntıları oluşur. Formunuzdaki tüm özelleştirmeler ve kod bileşenleri ile aşağıdakileri yapmanız gerekir:

  • Nesnelerin yaşam döngüsünü yönetmekten sorumlu sınıflar gibi belleği temizleme işleminden sorumlu öğeler için senaryoları ayrıntılı şekilde düşünüp test edin.
  • window nesnesindeyse tüm olay dinleyicileri ve abonelikleri temizleyin.
  • setInterval gibi tüm zamanlayıcıları temizleyin.
  • Genel veya statik nesnelere başvurulardan kaçının, bunları sınırlayın ve temizleyin.

Özel denetim bileşenleri için temizleme, imha etme yönteminde gerçekleştirilebilir.

Bellek sorunlarını giderme hakkında daha fazla bilgi için bu Edge geliştirici belgelerine gidin.

Uygulamaların iyi performans göstermesine yardımcı olmak için kullanabileceğiniz araçlar

Bu bölümde, performans sorunlarını anlamanıza yardımcı olacak araçlar ve böylece, model temelli uygulamalardaki özelleştirmelerinizi en iyi duruma getirme hakkında öneriler sunulur.

Performans içgörüleri

Performans öngörüleri, çalışma zamanı telemetrisi verilerini çözümleyen ve model temelli uygulamaların performansını artırmaya yönelik bir dizi önerinin öncelikli listesini sağlayan, kurumsal uygulama oluşturucuları için bir self servis aracıdır. Bu özellik, günlük olarak Dynamics 365 Sales veya Dynamics 365 Service gibi bir Power Apps model temelli uygulamasının veya müşteri etkileşimi uygulamasının performansına ilişkin bir dizi analitik içgörünün yanı sıra öneriler ve eyleme geçirilebilir maddeler sunar. Kurumsal uygulama oluşturucuları, Power Apps'te uygulama düzeyindeki ayrıntılı performans görüşlerini görüntüleyebilir. Daha fazla bilgi: Performans öngörüleri (önizleme) nedir?

Çözüm denetleyici

Çözüm denetçisi, performans veya güvenilirlik sorunları için istemci ve sunucu özelleştirmelerini çözümleyen güçlü bir araçtır. İstemci tarafı JavaScript, form XML ve .NET sunucu tarafı eklentilerini ayrıştırılabilir ve son kullanıcıları yavaşlatabilecek hedeflenmiş öngörüler sağlayabilir. Bir geliştirme ortamında değişiklikleri her yayımladığınızda çözüm denetleyicisini çalıştırmanızı öneririz. Böylece, son kullanıcılara erişmeden önce tüm performans sorunları görüntülenir. Daha fazla bilgi: Power Apps'te model temelli uygulamalarınızı doğrulamak için çözüm denetleyicisini kullanma

Çözüm denetleyicisi ile performansla ilgili sorunlara örnek olarak yer verilmektedir:

Nesne denetleyici

Nesne denetçisi, çözümünüz içinde bileşen nesnelerinde gerçek zamanlı tanılamayı çalıştırır. Sorunlar algılanırsa, sorunun nasıl giderileceğini açıklayan bir öneri döndürülür. Daha fazla bilgi: Bir çözüm bileşenini tanılamak için nesne denetleyicisini (önizleme) kullanma

Sonraki adımlar

Model temelli uygulamalarda üretken ana formlar tasarlayın