有没有一种更高效的方法可以用JavaScript显示许多二维码

Question

我正在尝试在表格中显示二维码。QR码的URL作为文本节点存储在div中。

<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>

这个代码有效，但二维码显示速度慢，我需要渲染更多的二维码。

有没有更好的或"轻量级"的解决方案可以代替这个？

Answer 1

您不必通过HTTP请求来获取QR码。相反，您可以在客户端上创建它们。有许多JavaScript库可以帮助您做到这一点。这是一个叫qrcode的。

消除许多网络请求将显著提高性能。

以下是QRCode.js的github页面和一个非常简单的示例：

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

还应该注意的是，在当前的解决方案中有许多不必要的DOM查询(document.getElementById(...)(。您应该能够在没有那么多DOM查询的情况下更改获取所需元素引用的策略。我建议使用类似document.querySelectorAll(...)的东西来收集您需要的所有元素引用。与消除琐碎的I/O相比，这对性能的影响较小，但也会产生影响。

如果你愿意在问题中提供你的标记，我会为你的查询策略提供一个更具体的建议。