[Benchmarks] Load charts lazily (#18729)

This shall improve web page load time

Author: PatKamin

devops/scripts/benchmarks/html/scripts.js

@@ -11,10 +11,35 @@ let timeseriesData, barChartsData, allRunNames;
 let activeTags = new Set();
 let layerComparisonsData;
 let latestRunsLookup = new Map();
+let pendingCharts = new Map(); // Store chart data for lazy loading
+let chartObserver; // Intersection observer for lazy loading charts
 
 // DOM Elements
 let runSelect, selectedRunsDiv, suiteFiltersContainer, tagFiltersContainer;
 
+// Observer for lazy loading charts
+function initChartObserver() {
+    if (chartObserver) return;
+    
+    chartObserver = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                const containerId = entry.target.querySelector('canvas').id;
+                if (pendingCharts.has(containerId)) {
+                    const { data, type } = pendingCharts.get(containerId);
+                    createChart(data, containerId, type);
+                    pendingCharts.delete(containerId);
+                    chartObserver.unobserve(entry.target);
+                }
+            }
+        });
+    }, {
+        root: null, // viewport (current view)
+        rootMargin: '100px', // Load charts a bit before they enter the viewport
+        threshold: 0.1 // Start loading when 10% of the chart is within the rootMargin
+    });
+}
+
 const colorPalette = [
     'rgb(255, 50, 80)',
     'rgb(255, 145, 15)',
@@ -230,29 +255,35 @@ function drawCharts(filteredTimeseriesData, filteredBarChartsData, filteredLayer
     document.querySelectorAll('.charts').forEach(container => container.innerHTML = '');
     chartInstances.forEach(chart => chart.destroy());
     chartInstances.clear();
+    pendingCharts.clear();
+    
+    initChartObserver(); // For lazy loading charts
 
     // Create timeseries charts
     filteredTimeseriesData.forEach((data, index) => {
         const containerId = `timeseries-${index}`;
         const container = createChartContainer(data, containerId, 'benchmark');
         document.querySelector('.timeseries .charts').appendChild(container);
-        createChart(data, containerId, 'time');
+        pendingCharts.set(containerId, { data, type: 'time' });
+        chartObserver.observe(container);
     });
 
     // Create layer comparison charts
     filteredLayerComparisonsData.forEach((data, index) => {
         const containerId = `layer-comparison-${index}`;
         const container = createChartContainer(data, containerId, 'group');
         document.querySelector('.layer-comparisons .charts').appendChild(container);
-        createChart(data, containerId, 'time');
+        pendingCharts.set(containerId, { data, type: 'time' });
+        chartObserver.observe(container);
     });
 
     // Create bar charts
     filteredBarChartsData.forEach((data, index) => {
         const containerId = `barchart-${index}`;
         const container = createChartContainer(data, containerId, 'group');
         document.querySelector('.bar-charts .charts').appendChild(container);
-        createChart(data, containerId, 'bar');
+        pendingCharts.set(containerId, { data, type: 'bar' });
+        chartObserver.observe(container);
     });
 
     // Apply current filters