python-bootcamp/http-performance/index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>D3.js Image Loading Time Graph</title>
        <script src="https://d3js.org/d3.v5.min.js"></script>
        <style>
            /* Add some basic styling for the chart */
            .bar {
                fill: steelblue;
            }
    
            .bar:hover {
                fill: brown;
            }
    
            .axis {
                font: 10px sans-serif;
            }
    
            .axis path,
            .axis line {
                fill: none;
                stroke: #000;
                shape-rendering: crispEdges;
            }
        </style>
    </head>
    <body>
        <div id="chart"></div>
        <div id="stats"></div>
        <script>
        // Generate the list of image URLs named kublai0.jpg to kublai118.jpg
        const numberOfImages = 119;
        const imagePrefix = 'http://localhost:8000/kublai';
        const imageExtension = '.jpg';
        const images = [];

        for (let i = 0; i < numberOfImages; i++) {
            const imageName = `${imagePrefix}${i}${imageExtension}`;
            images.push(imageName);
        }

        // Disable caching using cache-buster technique
        const cacheBuster = (url) => `${url}?${new Date().getTime()}`;

        // Load images and measure their loading times
        const loadImages = async () => {
            const loadingTimes = [];

            for (const url of images) {
                const startTime = performance.now();
                const img = new Image();
                img.src = cacheBuster(url);
                img.style.display = 'none';
                document.body.appendChild(img);

                await new Promise((resolve) => {
                    img.onload = () => {
                        const endTime = performance.now();
                        loadingTimes.push(endTime - startTime);
                        resolve();
                    };
                });
            }

            return loadingTimes;
        };

        // Create a D3.js bar chart to visualize loading times
        const createChart = (data) => {
            const margin = { top: 20, right: 20, bottom: 30, left: 40 },
                width = 1280 - margin.left - margin.right,
                height = 500 - margin.top - margin.bottom;

            const x = d3.scaleBand().rangeRound([0, width]).padding(0.1);
            const y = d3.scaleLinear().rangeRound([height, 0]);

            const svg = d3.select('#chart')
                .append('svg')
                .attr('width', width + margin.left + margin.right)
                .attr('height', height + margin.top + margin.bottom)
                .append('g')
                .attr('transform', `translate(${margin.left},${margin.top})`);

            x.domain(data.map((d, i) => i));
            y.domain([0, d3.max(data)]);

            svg.append('g')
                .attr('class', 'axis axis--x')
                .attr('transform', `translate(0,${height})`)
                .call(d3.axisBottom(x));

            svg.append('g')
                .attr('class', 'axis axis--y')
                .call(d3.axisLeft(y).ticks(10))
                .append('text')
                .attr('transform', 'rotate(-90)')
                .attr('y', 6)
                .attr('dy', '0.71em')
                .attr('text-anchor', 'end')
                .text('Loading Time (ms)');

            svg.selectAll('.bar')
                .data(data)
                .enter().append('rect')
                .attr('class', 'bar')
                .attr('x', (d, i) => x(i))
                .attr('y', (d) => y(d))
                .attr('width', x.bandwidth())
                .attr('height', (d) => height - y(d));

            const stats = document.getElementById('stats');
            let textContent = '';
            let average = 0;
            let sum = 0;
            let min = parseFloat(data[0]);
            let max = parseFloat(data[0]);
            for(datum of data) {
                loadingTime = parseFloat(datum)
                sum = sum + loadingTime
                if(loadingTime > max) {
                    max = loadingTime;
                }
                if(loadingTime < min) {
                    min = loadingTime;
                }
            }
            average = sum / data.length
            textContent = 
                'Total: ' + sum + 
                ' Average: ' + average + 
                ' Min: ' + min + 
                ' Max: ' + max;
            stats.textContent = textContent;
        };

        // Load images and create the chart
        (async () => {
            const loadingTimes = await loadImages();
            createChart(loadingTimes);
        })();
    </script>
</body>
</html>