javascript - A written test question from Ali

Question

How to use ajax to collect the response time of all requests on the page, I hope to get a detailed answer, it is best to attach the code, thank you

Answer 1

First of all, for this situation, jquery and zepto already have their own implementation methods. https://github.com/madrobby/zepto/blob/master/src/ajax.js The poster can check it out

There are several hooks in the source code ajaxStart,ajaxStop,ajaxBeforeSend,ajaxError,ajaxComplete楼主仔细观察这些钩子,他们代表了ajax执行的不同时刻,在这些函数中都会调用一个方法triggerGlobal, this method is the key

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)
  }

The function of this method is to register a custom event on the document. Whenever the hook is triggered, if it is found that the corresponding event has been registered on the document before, the corresponding status will be triggered. At this time, what we need to do is It is to bind the event before sending ajax, add a unique identifier to each ajax, and then get the time.

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)
})

Finally, the time of all ajax requests will be stored in the data. The settings field is very critical. It is essentially equal to the object passed when you call $.ajax() (in fact, $.extends is performed internally, but when the event is triggered When the two settings are one object), some additional fields can be mounted on it.

There are also some other methods, but they are all similar. Record the time when sending the request, and then record the time when receiving it. Subtract the two and it will be OK.

If the poster has used some new encapsulated ajax libraries such as axiso, you can also use concepts such as interceptors to implement this function

However, no matter how exquisite the packaging is, the essence is the same, which is what I said above. Record the time before sending, record the time again after responding, and subtract the last two

Answer 2

The original principle is to monitor changes in readyState. Whenever readyState changes, the onreadystatechange event will be triggered. The time between 1 and 4 is recorded as the response time, and then the request is sent back to the server.

readyState stores the status of XMLHttpRequest. changes from 0 to 4.
0: The request is not initialized
1: The server connection has been established
2: The request has been received
3: The request is being processed
4: The request has been completed and the response is ready