Is there a more performant way to display many QR Codes with JavaScript?

Question

I'm trying to display QR codes in tables. URL's of QR codes are stored in div 's as text nodes.

<script type="text/javascript">
    function myfunction() {
        // PAGE 1 STARTS
            // ROW 1
        var TextInsideA2 = document.getElementById('A2').innerHTML;
        document.getElementById('barcodeA2').src = "https://api.qrserver.com/v1/create-qr-code/?data='" + TextInsideA2 +"'&amp;size=85x85";
        var TextInsideA3 = document.getElementById('A3').innerHTML;
        document.getElementById('barcodeA3').src = "https://api.qrserver.com/v1/create-qr-code/?data='" + TextInsideA3 +"'&amp;size=85x85";
        var TextInsideA4 = document.getElementById('A4').innerHTML;
        document.getElementById('barcodeA4').src = "https://api.qrserver.com/v1/create-qr-code/?data='" + TextInsideA4 +"'&amp;size=85x85";
            // ROW 2
        var TextInsideA5 = document.getElementById('A5').innerHTML;
        document.getElementById('barcodeA5').src = "https://api.qrserver.com/v1/create-qr-code/?data='" + TextInsideA5 +"'&amp;size=85x85";
        var TextInsideA6 = document.getElementById('A6').innerHTML;
        document.getElementById('barcodeA6').src = "https://api.qrserver.com/v1/create-qr-code/?data='" + TextInsideA6 +"'&amp;size=85x85";
        var TextInsideA7 = document.getElementById('A7').innerHTML;
        document.getElementById('barcodeA7').src = "https://api.qrserver.com/v1/create-qr-code/?data='" + TextInsideA7 +"'&amp;size=85x85";
            // ROW 3
        var TextInsideA8 = document.getElementById('A8').innerHTML;
        document.getElementById('barcodeA8').src = "https://api.qrserver.com/v1/create-qr-code/?data='" + TextInsideA8 +"'&amp;size=85x85";
        var TextInsideA9 = document.getElementById('A9').innerHTML;
        document.getElementById('barcodeA9').src = "https://api.qrserver.com/v1/create-qr-code/?data='" + TextInsideA9 +"'&amp;size=85x85";
        var TextInsideA10 = document.getElementById('A10').innerHTML;
        document.getElementById('barcodeA10').src = "https://api.qrserver.com/v1/create-qr-code/?data='" + TextInsideA10 +"'&amp;size=85x85";
            // ROW 4
        var TextInsideA11 = document.getElementById('A11').innerHTML;
        document.getElementById('barcodeA11').src = "https://api.qrserver.com/v1/create-qr-code/?data='" + TextInsideA11 +"'&amp;size=85x85";
        var TextInsideA12 = document.getElementById('A12').innerHTML;
        document.getElementById('barcodeA12').src = "https://api.qrserver.com/v1/create-qr-code/?data='" + TextInsideA12 +"'&amp;size=85x85";
        var TextInsideA13 = document.getElementById('A13').innerHTML;
        document.getElementById('barcodeA13').src = "https://api.qrserver.com/v1/create-qr-code/?data='" + TextInsideA13 +"'&amp;size=85x85";

        // PAGE 1 ENDS
    }
    window.onload = myfunction;
</script>

This code works but QR's are slow to display and I need to render even more of them.

Is there any better or "lightweight" solution that I can use instead of this?

Answer 1

You don't necessarily have to make an HTTP request to get a QR code. You can create them on the client, instead. There are many JavaScript libraries that help you do this. Here's one called qrcode .

Eliminating the many network requests will significantly improve performance.

Here's the github page for QRCode.js and a very simple example:

<div id="qrcode"></div>
<script type="text/javascript">
    new QRCode(document.getElementById("qrcode"), "My QR Text!");
</script>

It should also be noted that there are many unnecessary DOM queries ( document.getElementById(...) ) in your current solution. You should be able to change your strategy for getting your desired element references without so many DOM queries. I would suggest using something like document.querySelectorAll(...) to gather all the element references you need. This will have less of a performance impact than eliminating the frivolous I/O, but it can have an impact.

I'd provide a more specific suggestion on your querying strategy if you would provide your markup in the question.