sql.js点击监听器执行SQL查询首次耗时过长问题咨询

问题描述 #

我编写了如下HTML代码，用于加载本地约3MB的SQLite数据库，按钮绑定点击事件，点击后执行SQL查询并打印结果。数据库加载完成后，首次点击按钮执行查询会有明显延迟（约1000ms），但后续点击几乎瞬间完成（仅需50-100ms）。已知延迟并非数据库加载过程导致，请问问题出在哪里？

代码示例 #

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

原因解析 #

这个延迟是sql.js的首次查询惰性初始化机制导致的：

• 执行new SQL.Database()加载数据库时，sql.js仅完成了基础的内存映射操作，并没有初始化SQLite查询依赖的全部核心组件（比如查询解析器、执行器逻辑，以及表的元数据缓存等）。
• 首次调用db.exec()时，sql.js会一次性完成这些初始化工作，同时还要处理当前查询的解析、执行流程，额外的初始化开销直接造成了首次查询的明显延迟。
• 后续点击执行查询时，初始化工作已经完成，SQLite还缓存了表的元数据和查询执行计划，此时只需执行查询本身，速度自然大幅提升。

优化方案 #

如果想避免首次点击的延迟，可以在数据库加载完成后，提前执行一个无意义的轻量查询，把初始化开销转移到页面加载阶段：

// 在console.log('Db loaded')之后添加这行代码
db.exec('select 1');

内容的提问来源于stack exchange，提问作者Joy