javascript - Ali의 필기 시험 문제

Question

Ajax를 사용하여 페이지의 모든 요청에 ​​대한 응답 시간을 수집하는 방법, 자세한 답변을 얻고 싶습니다. 코드를 첨부하는 것이 가장 좋습니다. 감사합니다

Answer 1

우선 이런 상황에 대해 jquery와 zepto에는 이미 자체적인 구현 방법이 있습니다. https://github.com/madrobby/zepto/blob/master/src/ajax.js 포스터에서 확인하실 수 있습니다

소스 코드에는 여러 후크가 있습니다: ajaxStart, ajaxStop, ajaxBeforeSend, ajaxError, ajaxComplete 저자는 이러한 후크를 주의 깊게 관찰했습니다. 이는 Ajax 실행의 다양한 순간을 나타냅니다. 이 함수에서는 triggerGlobal 메서드가 호출됩니다. 으아악 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를 보내기 전에 이벤트를 바인딩하고 각 ajax에 고유 식별자를 추가한 다음 시간을 가져오는 것입니다. 으아악

마지막으로 모든 Ajax 요청 시간이 데이터에 저장됩니다. settings 필드는 $.ajax()를 호출할 때 전달되는 객체와 본질적으로 동일합니다. $.확장되지만 이벤트가 트리거되면 두 설정이 하나의 개체이므로 일부 추가 필드를 마운트할 수 있습니다.

다른 방법도 있지만 모두 비슷합니다. 요청을 보낼 때의 시간을 기록한 다음, 받을 때의 시간을 빼면 괜찮습니다.

포스터가 axiso와 같은 새로운 캡슐화된 ajax 라이브러리를 사용한 경우 인터셉터와 같은 개념을 사용하여 이 기능을 구현할 수도 있습니다

하지만 포장이 아무리 정교해도 본질은 똑같습니다. 위에서 말씀드린 대로 보내기 전 시간을 기록하고, 응답 후 다시 시간을 기록하고, 마지막 2개를 뺍니다🎜

Answer 2

원래는 ReadyState의 변경 사항을 모니터링하는 것입니다. ReadyState가 변경될 때마다 onreadystatechange 이벤트가 발생하고 1~4 사이의 시간이 응답 시간으로 기록된 후 요청이 서버로 다시 전송됩니다.

readyState는 XMLHttpRequest의 상태를 저장합니다. 0에서 4로 변경됩니다.
0: 요청이 초기화되지 않았습니다.
1: 서버 연결이 설정되었습니다.
2: 요청이 수신되었습니다.
3: 요청이 처리 중입니다.
4: 요청이 완료되었으며 응답이 준비되었습니다