javascript - 阿里的一個筆試題

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: 請求已完成，且回應已就緒