阿里的一个笔试题

Question

如何利用ajax对页面的所有请求的响应时间进行收集，希望能得到细致的解答，最好附上代码，谢谢

Answer 1

首先楼主对于这种情况,jquery和zepto都已经有了各自的实现方式.https://github.com/madrobby/zepto/blob/master/src/ajax.js楼主可以查看

源码中存在几个钩子 ajaxStart,ajaxStop,ajaxBeforeSend,ajaxError,ajaxComplete楼主仔细观察这些钩子,他们代表了ajax执行的不同时刻,在这些函数中都会调用一个方法triggerGlobal,这个方法就是关键

function triggerAndReturn(context, eventName, data) {
    var event = $.Event(eventName)
    $(context).trigger(event, data)
    return !event.isDefaultPrevented()
  }

  // trigger an Ajax "global" event
  function triggerGlobal(settings, context, eventName, data) {
    if (settings.global) return triggerAndReturn(context || document, eventName, data)
  }

这个方法的作用就是在于在document上面注册一个自定义事件,每当钩子触发的时候,如果发现之前有在document上面注册过相应的事件的时候则会触发相应的状态,此时我们需要做的是在发送ajax前绑定事件,为每一个ajax添加一个唯一标识符,然后获取时间就完成了.

var data = {} // 储存数据
var id = 1 // 唯一id
$(document).on('ajaxBeforeSend', (data) => {
    let settings = data[1]
    let uniqId = 'ajax' + id // 生成一个唯一id
    settings.uniqId = id //把唯一id挂载在setting上面,当ajax结束后能够找到
    data[uniqId] = Date.now() // 用这个唯一id存数据
    id++ // id需要自增来记录并区别后续的ajax请求
})
$(document).on('ajaxComplete', (data) => {
    let settings = data[1]
    let uniqId = 'ajax' + settings.uniqId // 找到ajax刚启动时候挂载的uniqId字段
    data[uniqId] = Date.now() - data[uniqId] // 当前时间减去发送这条ajax的时间就是响应请求所需要的时间了
    console.log(data)
})

最后所有ajax的请求的时间都会存放到data里面, 其中settings字段很关键,他实质上约等于你调用$.ajax()时候传递的对象(其实内部进行了$.extends,不过在事件触发的时候两个settings是一个对象),所以可以在上面挂载一些额外的字段.

另外还有一些其他的方法,不过也都是类似的,在发请求的时候记录下时间,然后收到的时候再记录下时间,两个相减就OK了.

如果楼主用过axiso等一些新的封装的ajax库,还可以使用拦截器之类的概念来实现这个功能

但是所有的封装再精美,本质都是一样的,就是我上面说的,发送前记录一次时间,响应后再记录一次时间,最后两个相减

Answer 2

原生的原理就是监听readyState的变化了，每当readyState改变时，就会触发onreadystatechange事件，记录1到4之间的时间就是响应时间，然后再发请求回报给服务器即可。

readyState存有 XMLHttpRequest 的状态。从0到4发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪