Client-Side Performance Optimization…

intermediateTested on Xanadu

The Client-Side Performance Optimization Pattern focuses on reducing initial page load times and improving user experience by strategically managing when and how client-side operations execute. This pattern addresses common performance bottlenecks where forms load slowly due to heavy onLoad processing, synchronous GlideAjax calls, and eager loading of related data that users may never access.

The pattern works by deferring non-critical operations until after the initial form render, using asynchronous patterns to prevent blocking, and implementing lazy loading for expensive data operations. It combines several techniques including conditional script execution, intelligent caching, and progressive data loading to minimize time-to-interactive for users while maintaining full functionality.

Chrome Extension

Sourdough: ServiceNow Monitoring and Analytics

A Chrome extension for ServiceNow Admins and Developers with essential tools, analytics, graphs and monitoring features.

Instance HealthGraphs & ChartsAPI HealthDeveloper ToolsQuick SearchInstance Switcher

Add to Chrome

Free to install. Pro $5/month after a 14-day no-card trial.
Pro requires the ServiceNow admin role. Upgrade inside the extension.

Overview

Tasks

CMDB

API

Metrics

Monitor

Internals

Instance:sourdoughdev·Version:Yokohama

Instance StateONLINE

System StatusFully Operational

Session Timeout90 minutes

Logged-In Sessions2 (20 active)

Build Nameyokohama-12-18-2024_p1

IP Address10.159.128.43

Instance HealthHealth Score: 90%

🔥 5dSourdough (Chrome Plugin)Dark Mode

Use This When

Use this pattern when forms or lists are experiencing slow load times, when you have multiple onLoad client scripts executing expensive operations, or when users report sluggish interface performance. This is especially valuable for high-traffic forms with complex business logic or forms that load large amounts of related data that users don't always need.

Avoid When

Avoid this pattern for simple forms with minimal client scripts or when the deferred operations are truly required for immediate user interaction. Don't over-optimize forms that are already performing well, as the added complexity may introduce bugs without meaningful performance gains.

Implementation

Server-side

var PerformanceOptimizedAjax = Class.create();
PerformanceOptimizedAjax.prototype = Object.extendsObject(AbstractAjaxProcessor, {

    // Cache to store expensive lookups with TTL
    _cache: {},
    _cacheTimeout: 5 * 60 * 1000, // 5 minutes

    getRelatedData: function() {
        var recordId = this.getParameter('sysparm_record_id');
        var dataType = this.getParameter('sysparm_data_type');
        
        if (!recordId || !dataType) {
            return this._returnError('Missing required parameters');
        }

        // Check cache first
        var cacheKey = dataType + '_' + recordId;
        if (this._isCacheValid(cacheKey)) {
            gs.info('Returning cached data for: ' + cacheKey);
            return this._cache[cacheKey].data;
        }

        var result = {};
        
        try {
            switch(dataType) {
                case 'approval_history':
                    result = this._getApprovalHistory(recordId);
                    break;
                case 'related_incidents':
                    result = this._getRelatedIncidents(recordId);
                    break;
                case 'attachment_count':
                    result = this._getAttachmentCount(recordId);
                    break;
                default:
                    return this._returnError('Invalid data type requested');
            }
            
            // Cache the result
            this._cache[cacheKey] = {
                data: new JSON().encode(result),
                timestamp: new GlideDateTime().getNumericValue()
            };
            
            return new JSON().encode(result);
            
        } catch(e) {
            gs.error('Error in getRelatedData: ' + e.message);
            return this._returnError('Server error occurred');
        }
    },

    _getApprovalHistory: function(recordId) {
        var approvals = [];
        var gr = new GlideRecord('sysapproval_approver');
        gr.addQuery('sysapproval', recordId);
        gr.orderByDesc('sys_created_on');
        gr.setLimit(10); // Limit to recent approvals
        gr.query();
        
        while(gr.next()) {
            approvals.push({
                approver: gr.getDisplayValue('approver'),
                state: gr.getDisplayValue('state'),
                comments: gr.getValue('comments') || '',
                date: gr.getDisplayValue('sys_created_on')
            });
        }
        
        return { approvals: approvals, count: approvals.length };
    },

    _getRelatedIncidents: function(recordId) {
        var incidents = [];
        var gr = new GlideRecord('incident');
        gr.addQuery('caller_id', recordId);
        gr.addQuery('active', true);
        gr.setLimit(5);
        gr.query();
        
        while(gr.next()) {
            incidents.push({
                number: gr.getDisplayValue('number'),
                short_description: gr.getValue('short_description'),
                state: gr.getDisplayValue('state')
            });
        }
        
        return { incidents: incidents, count: incidents.length };
    },

    _getAttachmentCount: function(recordId) {
        var gr = new GlideRecord('sys_attachment');
        gr.addQuery('table_sys_id', recordId);
        gr.query();
        return { count: gr.getRowCount() };
    },

    _isCacheValid: function(cacheKey) {
        if (!this._cache[cacheKey]) return false;
        var now = new GlideDateTime().getNumericValue();
        return (now - this._cache[cacheKey].timestamp) < this._cacheTimeout;
    },

    _returnError: function(message) {
        return new JSON().encode({ error: true, message: message });
    },

    type: 'PerformanceOptimizedAjax'
});

Client-side

// Optimized onLoad client script with deferred loading
function onLoad() {
    // Only execute critical path operations immediately
    if (g_form.isNewRecord()) {
        setDefaultValues();
        return;
    }
    
    // Defer non-critical operations until after form render
    setTimeout(function() {
        loadDeferredData();
    }, 100);
}

function setDefaultValues() {
    // Immediate operations only
    g_form.setValue('state', '1');
    g_form.setValue('priority', '3');
}

function loadDeferredData() {
    var recordId = g_form.getUniqueValue();
    if (!recordId) return;
    
    // Show loading indicators
    showLoadingIndicator('approval_section');
    showLoadingIndicator('related_section');
    
    // Load data asynchronously with error handling
    loadDataAsync('approval_history', recordId, function(response) {
        hideLoadingIndicator('approval_section');
        if (response && !response.error) {
            updateApprovalSection(response.approvals);
        }
    });
    
    // Only load related incidents if section is visible
    if (isElementVisible('related_incidents_section')) {
        loadDataAsync('related_incidents', recordId, function(response) {
            hideLoadingIndicator('related_section');
            if (response && !response.error) {
                updateRelatedSection(response.incidents);
            }
        });
    }
}

function loadDataAsync(dataType, recordId, callback) {
    var ajax = new GlideAjax('PerformanceOptimizedAjax');
    ajax.addParam('sysparm_name', 'getRelatedData');
    ajax.addParam('sysparm_record_id', recordId);
    ajax.addParam('sysparm_data_type', dataType);
    
    ajax.getXMLAnswer(function(response) {
        try {
            var data = JSON.parse(response);
            callback(data);
        } catch(e) {
            console.error('Error parsing response for ' + dataType + ':', e);
            callback({ error: true, message: 'Parse error' });
        }
    });
}

function showLoadingIndicator(sectionId) {
    var element = gel(sectionId + '_loading');
    if (element) element.style.display = 'block';
}

function hideLoadingIndicator(sectionId) {
    var element = gel(sectionId + '_loading');
    if (element) element.style.display = 'none';
}

function isElementVisible(elementId) {
    var element = gel(elementId);
    return element && element.offsetParent !== null;
}

// Lazy load related lists only when tabs are clicked
function onTabActivated(tabName) {
    if (tabName === 'related_lists' && !g_form.hasAttribute('related_loaded')) {
        loadRelatedListData();
        g_form.setAttribute('related_loaded', 'true');
    }
}

The server-side code implements a cached AJAX processor that handles expensive data lookups with built-in caching to avoid repeated database queries. The client-side code demonstrates deferred loading by separating critical onLoad operations from non-essential data fetching, using setTimeout to prevent blocking the initial form render. Key techniques include asynchronous callbacks, loading indicators for user feedback, and conditional loading based on UI visibility to minimize unnecessary processing.

Alternatives

Server-side UI Policy with Conditions

Moves logic to server-side UI policies with complex conditions to control when scripts execute. Reduces client-side complexity but may require more server round-trips and is less flexible for dynamic conditions.

Custom Widget with Progressive Enhancement

Build custom Service Portal widgets or UI16 components that load data progressively. Provides more control over rendering and performance but requires more development effort and may not work well with standard forms.

Background Processing with Notifications

Use scheduled jobs or business rules to pre-compute expensive data and store results, then notify clients when ready. Eliminates real-time delays but adds complexity for data freshness and may not work for dynamic calculations.

Test Your Knowledge

Quick 3-question quiz — see how your ServiceNow skills stack up.

Question 1 of 3Performance

A list view on a table with millions of records is slow. Best fix?

Select an answer to continue