ExtJS Ajax Store接口请求耗时为普通调用两倍的问题咨询

核心成因及解决方案 #

常见成因1：ExtJS Store重复触发加载请求 #

当前配置同时开启了autoLoad: true和remoteSort: true，在ExtJS 5.x、6.x的部分分支版本中存在已知bug：自动加载触发第一次无排序参数的请求后，远程排序初始化逻辑会立刻触发第二次带排序参数的请求，两次请求串行执行的总耗时就会达到单次请求的两倍左右。

常见成因2：请求参数差异触发后端额外开销 #

ExtJS Store发起请求时会默认附加page、start、limit、sort、filter等分页、排序、筛选参数，如果用jQuery测试时没有完全携带这些参数，后端会进入不同的逻辑分支：比如未加索引的字段排序、全表扫描后再分页、多余的筛选条件判断都会增加接口耗时。

常见成因3：请求格式/全局钩子的额外开销 #

1. 配置了read请求用POST方法，ExtJS的Ajax代理默认会将参数序列化为JSON格式，请求头Content-Type为application/json，而jQuery默认的POST请求是application/x-www-form-urlencoded格式，部分后端框架解析JSON格式的开销明显高于表单格式。
2. 项目中如果配置了Ext.Ajax.on('beforerequest')全局请求拦截器，额外的参数拼接、身份校验等同步逻辑也会增加请求的总耗时。

常见成因4：跨域预检请求开销 #

如果接口属于跨域场景，ExtJS的POST请求会触发CORS预检OPTIONS请求，两次请求（OPTIONS+POST）的总耗时就是普通同域请求的两倍左右。 #

排查及修复步骤 #

• 第一步：打开浏览器开发者工具的网络面板，确认ExtJS Store发起的请求数量：如果出现两次完全一致的/admin/users/get-list请求，将autoLoad改为false，在页面渲染完成后手动调用store.load()即可避免重复加载。
• 第二步：将ExtJS发起请求的所有参数、请求头完整复制，用jQuery重新发起请求验证耗时，如果耗时同样升高，说明问题出在后端参数处理逻辑：检查排序字段是否添加数据库索引，优化分页逻辑为先排序再分页避免全表扫描。
• 第三步：如果是请求格式导致的耗时升高，在proxy配置中添加参数即可对齐jQuery的请求格式：

store: {
    autoLoad: true,
    model: "User",
    pageSize: 50,
    remoteSort: true,
    proxy: {
        type: 'ajax',
        url: '/admin/users/get-list',
        // 新增以下两个配置，使用表单格式传参
        paramsAsJson: false,
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
        },
        reader: {
            type: 'json',
            rootProperty: 'rows'
        },
        actionMethods: {
            create: 'POST',
            read: 'POST',
            update: 'POST',
            destroy: 'POST'
        }
    }
}

• 第四步：排查全局的Ext.Ajax事件监听，移除不必要的同步阻塞逻辑。跨域场景下可让后端配置OPTIONS请求的缓存规则，避免每次请求都触发预检。

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