sql.js 在首次执行 sql 查询时存在明显延迟，主要因未预编译语句导致解析开销；通过提前调用 db.prepare() 预编译查询语句，可将后续执行时间从约 1000ms 降至 50–100ms，显著提升交互响应速度。
sql.js 在首次执行 sql 查询时存在明显延迟，主要因未预编译语句导致解析开销；通过提前调用 db.prepare() 预编译查询语句，可将后续执行时间从约 1000ms 降至 50–100ms，显著提升交互响应速度。
SQLite（包括其 WebAssembly 实现 SQL.js）在首次执行某条 SQL 语句时，需完成词法分析、语法解析、查询计划生成等编译步骤，这一过程开销较大，尤其对结构较复杂的查询或较大数据库（如您使用的 3MB 数据库）尤为明显。而后续重复执行相同语句时，SQL.js 会复用已缓存的编译结果，因此耗时大幅下降。
根本解法：在数据库加载完成后、事件监听器注册前，主动预编译关键查询语句。
这能确保首次点击时直接执行已编译的语句，跳过耗时的解析阶段：
(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 stmt = db.prepare('SELECT * FROM tb');
const btn = document.getElementById('btn');
btn.addEventListener('click', () => {
// 直接运行已编译语句，避免重复解析
const result = stmt.all(); // 推荐使用 .all() 替代 .exec()[0].values，更语义化且安全
console.log(result);
});
})();⚠️ 注意事项：
- db.prepare() 返回的是一个 Statement 对象，应复用该对象多次调用 .run() 或 .all()，而非每次点击都重新 prepare；
- 若查询含参数（如 WHERE id = ?），预编译后可通过 .bind([value]).all() 安全传参，防止 SQL 注入；
- 避免在 click 回调中调用 db.exec() 执行原始 SQL 字符串——这是首次延迟的根源；
- 对于多条高频查询，建议统一在初始化阶段预编译并缓存，例如：const queries = { allRows: db.prepare('...'), byId: db.prepare('...') };
总结：SQL.js 的“首次慢、后续快”现象本质是 JIT 编译特性所致，并非代码错误。通过显式预编译（prepare）将编译成本前置到数据库加载阶段，即可实现首点即瞬时响应，大幅提升 Web 端 SQLite 应用的用户体验。
