Outils de développement Chrome: Comment Lire le Panneau du Réseau?

Je suis en train de faire sens de l'Outils de développement Chrome quand je lance performence de tests sur mon site web. Si vous sélectionnez Réseau sur les outils meny, il ressemblera à ceci:

Outils de développement Chrome: Comment Lire le Panneau du Réseau?

Alors si je sélectionne le fichier de performances, je vais avoir cette information:

Outils de développement Chrome: Comment Lire le Panneau du Réseau?

Ma question est: est-ce

  1. Quel est le sens de la Recherche DNS, Connexion, Envoi, d'Attente et de Réception? Ce qui se passe entre le serveur, réseau et navigateur à chaque étape?
  2. Sur la première image, la ligne rouge indique "Load événement déclenché" et le bleu on lit "DOMContent événement déclenché". Quelle est la signification de ceci, et pourquoi est-il le DOMContent événement est déclenché après que tout le contenu a été chargé?

OriginalL'auteur unitario | 2012-08-23

  1. 6

    Je ne suis pas sûr si c'est un bon ajustement pour et DONC comme c'est un réseau question plus d'une programmation à la question, mais je vais répondre à la pièces je peux...

    Recherche DNS

    Lorsque vous vous connectez à un site web, il doit rechercher l'adresse IP du DNS. Par exemple, votre ordinateur communique avec un serveur DNS demander s'il sait où "google.com" est. Si elle le fait, elle vous donne une adresse IP. Si elle ne le fait pas, il peut vous donner l'IP d'un autre serveur DNS ou il va contacter le serveur DNS lui-même (je ne suis pas sûr de la mise en œuvre s'applique lorsqu') jusqu'à ce que finalement vous vous retrouvez avec l'adresse IP de l'hôte que vous êtes à la recherche pour.

    Connexion

    Temps qu'il faut pour connecter avec cette adresse IP. Je ne suis pas sûr que les détails ici.

    Envoi

    Après la connexion, vous pouvez envoyer la demande au serveur. Il peut être une requête d'affichage d'une page ou de transmettre des données ou de quoi que ce soit.

    Attente

    Après l'envoi de votre demande, vous attendez que le serveur réponde. Il peut être occupé ou peut prendre un certain temps pour traiter tout ce que vous avez demandé.

    Réception

    Une fois que le serveur a traité votre demande, il va envoyer des données vers vous.

    Donc, fondamentalement, la ligne rouge dans la première image de marque lorsque le fichier a été chargé à partir du réseau, et la ligne bleue de marque lorsque ce contenu a été analysé par le navigateur?
    Est la ligne rouge à 311ms? Si oui, alors c'est lorsque le contenu a été reçu par le serveur. Alors je pense que Chrome ne c'est des trucs à charger la page dans votre navigateur, puis les événements DOM choses est déclenché. Je suis honnêtement pas sûr, mais le navigateur doit charger la page avant que quoi que ce soit avec le DOM peut arriver.

    OriginalL'auteur sachleen

  2. 9

    Répondre à la partie II:

    La ligne Bleue (DOM contenu chargé à l'événement):
    Il se produit lorsque le navigateur terminé l'analyse du document principal.

    La ligne Rouge (événement Load):
    Il se produit lorsque le navigateur fini d'extraire toutes les ressources requises par le document principal.

    Après la ligne rouge: Ici, vous verrez le chargement asynchrone et mise en cache des ressources requises par le document principal et par d'autres ressources.

    OriginalL'auteur Shadi Namrouti