javascript - Une question de test écrite d'Ali

Question

Comment utiliser ajax pour collecter le temps de réponse de toutes les demandes sur la page, j'espère obtenir une réponse détaillée, il est préférable de joindre le code, merci

Answer 1

Tout d'abord, pour cette situation, jquery et zepto ont déjà leurs propres méthodes d'implémentation https://github.com/madrobby/zepto/blob/master/src/ajax.js L'affiche peut le vérifier

.

Il y a plusieurs hooks dans le code source : ajaxStart, ajaxStop, ajaxBeforeSend, ajaxError, ajaxComplete L'auteur a soigneusement observé ces hooks. Ils représentent différents moments de l'exécution ajax, une méthode triggerGlobal sera appelée.

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

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

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

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

rrreee

最后所有ajax的请求的时间都会存放到data里面, 其中settingsLa fonction de cette méthode est d'enregistrer un événement personnalisé sur le document. Chaque fois que le hook est déclenché, s'il s'avère que l'événement correspondant a déjà été enregistré sur le document, l'état correspondant sera déclenché à ce moment-là. ce que nous devons faire est de lier l'événement avant d'envoyer l'ajax, d'ajouter un identifiant unique à chaque ajax, puis d'obtenir l'heure

. rrreee

Enfin, l'heure de toutes les requêtes ajax sera stockée dans les données. Le champ settings est très critique. Il est essentiellement égal à l'objet transmis lorsque vous appelez $.ajax() (en fait, $. s'étend, mais lorsque l'événement est déclenché, les deux paramètres ne forment qu'un seul objet), donc des champs supplémentaires peuvent être montés dessus.

Il existe également d'autres méthodes, mais elles sont toutes similaires. Enregistrez l'heure lors de l'envoi de la demande, puis enregistrez l'heure lors de sa réception et tout ira bien.

Si l'affiche a utilisé de nouvelles bibliothèques ajax encapsulées telles que axiso, vous pouvez également utiliser des concepts tels que des intercepteurs pour implémenter cette fonction

🎜Cependant, peu importe à quel point l'emballage est exquis, l'essence est la même, c'est ce que j'ai dit ci-dessus. Enregistrez l'heure avant l'envoi, enregistrez à nouveau l'heure après avoir répondu et soustrayez les deux derniers🎜.

Answer 2

Le principe original est de surveiller les changements dans readyState. Chaque fois que readyState change, l'événement onreadystatechange sera déclenché. Le temps entre 1 et 4 est enregistré comme temps de réponse, puis la requête est renvoyée au serveur.

readyState stocke le statut de XMLHttpRequest. passe de 0 à 4.
0 : La demande n'est pas initialisée
1 : La connexion au serveur a été établie
2 : La demande a été reçue
3 : La demande est en cours de traitement
4 : La demande est terminée et la réponse est prête