杜郎俊赏 - dujun.io

同步ajax导致页面卡顿

我的网站在快速切换页面时,有时会卡顿甚至假死。之前我以为是带宽太小的缘故(1Mbps),直到在 MDN 查找 XMLHttpRequest 相关资料时看到这个说明:

XMLHttpRequest supports both synchronous and asynchronous communications. In general, however, asynchronous requests should be preferred to synchronous requests for performance reasons.

XMLHttpRequest 支持同步和异步通信。但是,一般来说,出于性能原因,异步请求应优先于同步请求。

Synchronous requests block the execution of code which causes "freezing" on the screen and an unresponsive user experience.

同步请求阻止代码的执行,这会导致屏幕上出现“冻结”和无响应的用户体验。

这才想明白。以前为了解决旧页面比新页面加载慢,导致渲染时回跳到旧页面的问题,我图省事用了同步 ajax 来阻塞网络请求。没想到这就是导致屏幕假死的原因。

基于此,网络模块改成了异步,加标记来保障旧的请求执行完毕再响应新的请求。

标签: 开发 前端
日期:2022-09-18