MySQL查询20k记录时浏览器响应时间显示2秒但实际加载需15秒的原因

测试Web应用执行查询语句SELECT * FROM orders后展示结果的速度。该查询单页返回约20000条记录，实际加载耗时约15秒，但所有浏览器的Network面板响应时间仅显示2秒。返回70000条记录时浏览器会出现内存溢出。数据库为托管环境下的MySQL。

问题截图（标注：正确响应时间）

• 网络响应时间≠页面就绪时间：Network面板显示的2秒是服务器把完整数据返回给浏览器的时间，但浏览器拿到数据后，还要完成DOM节点创建、数据绑定、页面渲染绘制等一系列操作。2万条记录会生成大量DOM元素，每一步都要占用浏览器主线程资源，这个过程的耗时才是你感知到的15秒延迟。
• 单页渲染大量DOM的性能瓶颈：核心问题就是浏览器无法高效处理单页内的海量DOM节点。每一条订单记录都要转换成对应的HTML元素（比如表格行、单元格），当数量达到万级时，DOM总数会暴涨，主线程被长时间占用，导致渲染慢、页面卡顿。
• 7万条记录内存溢出的原因：浏览器的内存承载能力有限，每个DOM节点、关联的JS对象（如果用前端框架绑定数据）都会占用内存。7万条记录会生成数十万甚至上百万个节点和对象，直接超出浏览器内存上限，触发内存溢出。
• 额外影响因素：如果用了Vue、React这类前端框架，虚拟DOM的diff和更新过程在处理大量数据时也会增加额外开销；另外，前端对数据的格式化、二次处理等操作，也会进一步消耗时间和内存。

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