我有以下 html，我正在其中加载本地 SQLite 数据库（~3MB），并且有一个带有单击事件侦听器的按钮，用于执行 SQL 查询并记录结果。
<!DOCTYPE html>
<body>
<button id='btn'>GO</button>
<script src='https://cdnjs.cloudflare.com/ajax/libs/sql.js/0.3.2/js/sql.js'></script>
<script>
(async () => {
const response = await fetch('data.db')
const buffer = await response.arrayBuffer()
const db = new SQL.Database(new Uint8Array(buffer))
console.log('Db loaded')
const btn = document.getElementById('btn')
btn.addEventListener('click', async () => {
//console.time("query_execution_time");
const query = 'select * from tb';
const result = db.exec(query)[0].values;
console.log(result);
//console.timeEnd("query_execution_time");
});
})()
</script>
</body>
</html>
第一次单击按钮（加载数据库后），在记录结果之前有明显的延迟（约 1000 毫秒）。
但是，随后对按钮的点击几乎是瞬时发生的（50-100 毫秒）。
我做错了什么？
（请注意，延迟不是由于数据库加载过程本身造成的，因为延迟发生在单击事件侦听器附加到按钮之前。）
在数据库初始化后使用准备语句可能会有所帮助：
db.prepare('select * from tb')