When tabs and splitting are not allowed, make the child views render only when they become visible or needed. Three techniques that combine well:
1. Visibility-driven rendering - child coach views (or the sections that contain them) start Hidden (the coach framework does not build hidden views); the parent flips them to visible in stages - for example after the first paint, or when the user scrolls to them:
// parent coach view - load handler: render the heavy children one at a time after the first paint
var _this = this, heavy = ["Documents", "History", "Charts"]; // control ids of child sections/views, all with visibility Hidden
var i = 0;
function next() { if (i >= heavy.length) return; _this.ui.get(heavy[i++]).setVisible(true); setTimeout(next, 50); }
setTimeout(next, 0);// or: render when scrolled into view (IntersectionObserver on the placeholder element of each hidden section)
heavy.forEach(function (id) {
var v = _this.ui.get(id), ph = v.context.element; // the hidden view's element still exists as a placeholder
new IntersectionObserver(function (e, obs) { if (e[0].isIntersecting) { v.setVisible(true); obs.disconnect(); } }).observe(ph);
});2. Data on demand - a child that shows a big list gets an empty binding at load and a Service Call that runs when the section becomes visible (the visible event / the flip above), so neither the DOM nor the data is paid for up front.
3. Cheaper children - inside the children replace input controls used for display by Output Text (an Output Text is a fraction of an input control), page tables (10-15 rows), remove formulas that reference whole lists, and avoid nesting layouts five levels deep (every Horizontal / Vertical Layout is a view).
Measure with the browser's Performance profiler: the coach framework logs each view's load; the slowest 10% of views usually account for most of the time. Also see question 2527 and question 2439 for the toolkit's own lazy options.
References