Main Content

Improve App Startup Time

There are multiple techniques that you can use to improve the performance and responsiveness of apps that you create. For an overview of these techniques, see Create Responsive Apps.

To improve the startup time of your app, one technique is to initialize and perform calculations for only the parts of your app that are visible at startup. You can then use callbacks to initialize and update other portions of the app when the app user needs to see them. Two common scenarios in which this technique can have a significant benefit are when your app contains multiple tabs and when your app contains a tree with many nodes.

Improve Startup Time in Apps with Multiple Tabs

In apps with multiple tabs, only the content in a single tab is visible when the app first starts up. You can improve the startup time of your app by creating only the content in the visible tab at startup and then populating the content in other tabs when the app user switches to them.

For example, create an app with three tabs that displays a different plot in each tab. Create a file named tabPlotApp.m in your current folder and define a function named tabPlotApp. Within the function, perform these steps:

  1. Create a figure window with a tab group.

  2. Assign a handle to a function named plotData to the SelectionChangedFcn callback property of the tab group. This function executes when the app user navigates to a new tab.

  3. Add three tabs to the tab group. Tag each tab to keep track of it, and use the UserData property to store whether the tab content has been loaded.

  4. Plot some data in the tab that is visible when the app starts up.

function tabPlotApp
fig = uifigure;
tg = uitabgroup(fig,"Position",[10 10 450 400]);
tg.SelectionChangedFcn = @plotData;

t1 = uitab(tg,"Title","Data 1","Tag","1","UserData","loaded");
t2 = uitab(tg,"Title","Data 2","Tag","2","UserData","unloaded");
t3 = uitab(tg,"Title","Data 3","Tag","3","UserData","unloaded");

ax = uiaxes(t1);
plot(ax,1:10,"b");
end

In the same file, define the plotData callback function. In the function, access the tab that the app user switched to. If the tab content has not yet been loaded, plot some data in the tab, and then update the UserData property of the tab to indicate that the content has been loaded.

function plotData(src,event)
t = event.NewValue;
if t.UserData == "unloaded"
    switch t.Tag      
        case "2"
            ax = uiaxes(t);
            plot(ax,1:10,"r");
        case "3"
            ax = uiaxes(t);
            plot(ax,1:10,"g");
    end
    t.UserData = "loaded";
end
end

Run the tabPlotApp function and switch between tabs to see the loading behavior.

Figure window with three tabs. The first tab is selected and contains a plot with a blue line.

Improve Startup Time in Apps with Large Trees

When you create a tree UI component with many nodes, you can provide a more responsive experience for the app user by creating child nodes only after a parent node is expanded. Do this by writing a NodeExpandedFcn callback for the tree, and create the nodes in the callback function.

For example, create an app that displays patient names and hospitals in a tree. Create a file named patientTreeApp.m in your current folder and define a function named patientTreeApp. Within the function, perform these steps:

  1. Read in the sample patient data and store it in a table variable named T.

  2. Create a figure window, and then create a tree in the figure.

  3. Populate the tree with two top-level nodes. These nodes will have child nodes with hospital names and patient names from the data. Use the NodeData property to store whether the node has been expanded by a user.

  4. For each of the top-level nodes, create one child node with the text "Loading...". This placeholder child node allows the top-level node to be expanded by the app user. It also provides the app user with immediate feedback when they first expand a node.

  5. Assign the createNodes function to the NodeExpandedFcn callback property of the tree. Pass the patient table data as an input to the function. MATLAB® executes the createNodes function whenever the app user expands a node of the tree.

function patientTreeApp
T = readtable("patients");

fig = uifigure;
tr = uitree(fig,"Position",[20 20 300 300]);
hospitalnode = uitreenode(tr,"Text","Hospitals","NodeData",false);
namenode = uitreenode(tr,"Text","Patient Names","NodeData",false);
for k = 1:length(tr.Children)
    node = tr.Children(k);
    uitreenode(node,"Text","Loading...");
end

tr.NodeExpandedFcn = {@createNodes,T};
end

In the same file, define the createNodes callback function. The function input arguments are the callback source component and event data that MATLAB passes to callback functions and the patient data. Within the function, store the node that was expanded in a variable named parent. If this is the first time a user has expanded the node, perform these steps:

  1. Delete the placeholder child node.

  2. Depending on which node was expanded, store either the hospital names or the patient names in a variable named children.

  3. For each of the names stored in children, create a tree node whose text is that name, and then parent it to the expanded node.

  4. Update the NodeData property to indicate that the node has been expanded.

function createNodes(src,event,T)
parent = event.Node;
if ~parent.NodeData
    delete(parent.Children)
    
    switch parent.Text
        case "Hospitals"
            children = categories(categorical(T.Location));
        case "Patient Names"
            children = categories(categorical(T.LastName));
    end

    for k = 1:length(children)
      text = children{k};
      uitreenode(parent,"Text",text);
    end

    parent.NodeData = true;
end
end

Call the patientTreeApp function from the command line to run the app.

patientTreeApp

Expand the Hospitals and Patient Names nodes to generate and display their children.

UI figure window with a tree UI component. There are two expanded top-level nodes: "Hospitals" and "Patient Names". Each top-level node has children listing the relevant names.

Related Topics