Backbone调用后端API的create函数性能日志未输出且耗时统计异常

问题根因 #

你代码里有两个明显的逻辑错误，直接导致了你遇到的现象：

1. create方法存在不可达代码 #

你写的async create()函数中，return await this.sync(...)语句执行后会直接终止函数运行，后面计算执行时长、打印性能日志的代码永远不会被触发，这就是你看不到create对应性能日志的原因。

2. createConference的计时逻辑错误 #

this.sysLocation.create()返回的是Promise对象，属于异步操作。你当前的代码在发起异步调用后立刻计算耗时，统计的只是同步代码执行、发起异步请求的时间，并没有等待后端接口返回、逻辑执行完成，所以统计出来的1.7ms和实际3秒的感受不符。

修复方案 #

第一步：修复Location.js中的create方法 #

调整代码顺序，先await接口返回，再计算时长打印日志，最后返回结果：

// called from within createConference
async create() {
    console.log("Location.js - create() ")
    const startTime = performance.now();
    // 先await拿到接口返回结果
    const result = await this.sync('create', this, {
        url: this.create.url(this.id)
    }, { silent: true });
    // 再计算时长打印日志
    const duration = performance.now() - startTime;
    console.log(`PERFORMANACE CHECK: Location.js - the function create() took ${duration}ms`);
    // 最后返回结果
    return result;
},

第二步：修复createConference的计时逻辑 #

把耗时统计放到异步操作完成的回调中，或者将函数改为async/await写法：

// *** called when remote hardware signal triggered
createConference: async function () {
    var self = this;
    console.log("ScheduleLocationArea.js - createConference() ")
    const startTime = performance.now();
    // 等待create异步执行完成
    const response = await this.sysLocation.create();
    self.model.collection.add(response);
    const duration = performance.now() - startTime;
    console.log(`PERFORMANACE CHECK: ScheduleLocationArea.js - the function createConference() took ${duration}ms`);
},

修复完成后你就能看到两个性能日志，统计的时长会和你实际感知的3秒一致，这部分耗时就是this.sync发起的后端API请求的耗时，可以通过浏览器开发者工具的网络面板确认具体耗时分布。

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