Loading
Nota de Estudos
Study Reminders
Support
Text Version

HTTP Headers e Firefox WebDev Tool

Set your study reminders

We will email you at these times to remind you to study.
  • Monday

    -

    7am

    +

    Tuesday

    -

    7am

    +

    Wednesday

    -

    7am

    +

    Thursday

    -

    7am

    +

    Friday

    -

    7am

    +

    Saturday

    -

    7am

    +

    Sunday

    -

    7am

    +

Agora que vimos como o HTTP funciona em sua raiz, vamos agora estudar HTTP em maior detalhe,olharemos primeiramente para que cabeçalhos populares ou importantes ali são que devemos conhecer. Eentão vamos olhar para duas ferramentas que nos ajudam a entender ou trabalhar com sistemas web muito melhor.Um deles é o Curl e o segundo é o Firefox WebDev Tools.
Vamos ver quais os cabeçalhos que vemos em uma interação típica do navegador. E então vamos descobrir comopara realmente ver os cabeçalhos em interações ao vivo. (Consulte O Tempo De Deslizamento: 00:19)
Ok. Então, o padrão de protocolo para HTTP 1,0 está na URL que eu mostrei aqui. Se você visitaresta URL do nosso navegador, aqui estão alguns dos headers que o navegador envia para buscar esta URL. Primeiro diz GET html / rfc1945 HTTP/1.1. Este é o cabeçalho de abertura para o protocolo HTTP 1,1. A próxima coisa é claro, o host que é tools.ietf.org. Depois disso temos o agenteusuário, agente de usuário neste caso é o Mozilla/5.0, que e mais um longo conjunto de strings, alguns dos quaisjá vimos antes.
E o que eles são exatamente e ‘ o que eles são para ’ não é muito importante, pelo menos não agora mesmo.Às vezes é importante, mas por enquanto podemos dizer que há alguma maneira de identificar qual tipo de navegadorestá visitando em grande parte, para que você possa customizar o comportamento baseado em navegadores. Lásão alguns navegadores onde faz sentido. Como exemplo, o Google rasteja você site dizendoque o agente do usuário é o crawler do Google.Quando, porque você recebe muito tráfego do Google, as pessoas muitas vezes vão permitir que o Google crawlerrasteje seu site muito mais rápido do que um crawler normal, que não é de propriedade do Google, deixe o ’ sdizer, ou mesmo você tentando visitar ou baixar website usando alguma ferramenta ou o outro. Então, esse é umdos usos de coisas como Agente de Usuário. Outro conjunto de cabeçalhos tem a ver com descrever as capacidadesdo navegador.Então aqui, o cabeçalho de aceite, o que ele diz é, este navegador sabe como mostrar HTML. Então, sinta-se livrepara enviar dados HTML diretamente, e o navegador será capaz de renderá-lo. Por isso, aceite cabeçalhos nos contealgo sobre o cliente. Então, se você ver as classes de headers:1. As coisas que os clientes querem.2. Quem é o cliente. E a seguir, quais são as capacidades do plano.Um cabeçalho particularmente interessante é chamado de ‘ aceite codificação ’.Aceite codificação diz que você precisa não enviar exatamente os bytes que estão no recurso. Em vez disso, emeste caso específico, ele diz que o navegador entende gzip. Assim, você pode usar gzip para zip o conteúdoe enviá-los assim salvando o tráfego. E então é o trabalho do navegador para obter os dados edescompactá-lo antes de mostrá-lo para o usuário. Essa é uma daquelas coisas que se tornaram padrão desdepelo menos 10-15 anos.Por último, temos conexão e para conexão ele é manter vivo ou está próximo. Háoutros detalhes que você pode especificar sobre a conexão também, mas podemos dar uma olhada neledepois. De todos esses cabeçalhos os dois principais são indispensáveis porque se você não der esses cabeçalhos,então o servidor rejeitará o seu pedido, da primeira linha como como disse um dito antes, que get é uma espécie decomo um ‘ Hello ’ que dizemos quando conhecemos um amigo e queremos falar com eles.
Tecnicamente, palavras como ‘ GET ’ em line-1 são chamadas de ‘ method ’. O método é o que a solicitaçãoé para; este pedido é para obter um recurso. No protocolo HTTP 1,0 original, este era o único cabeçalhohavia porque o navegador era puramente uma ferramenta de renderização de documentação, e que fazianão fazer nada muito além de mostrar documentos, por exemplo: formulários não estavam lá na primeira versãodo HTTP que as pessoas conseguiam usar.A segunda restrição, como vimos anteriormente, é que a linha host precisa combinar com o hostnameque a URL recebe. Há uma maneira de realmente colocar a URL inteira no cabeçalho get. Mas esses tipos de coisassão usados por componentes intermediários como: ‘ proxies ’ mais do que eles são usados pelos navegadoresou pelos servidores de linha final. E então como vimos, a conexão na linha 6 diz sea conexão subjacente deve ser mantida.Mantenha conexões vivas ou persistentes irá melhorar o tempo de resposta e reduzir o uso do númerode conexões que são feitas quando uma página é solicitada a partir de um navegador. Os cabeçalhosrestantes contam ao servidor algo sobre o cliente como vimos, o que é importante sobre isso éperceber que, embora, estamos acostumados a ver principalmente a web em dispositivos poderosos onde a webpode ser renderizada em gráficos agradáveis.Há situações como alguns softwares incorporados e assim por diante, em que os clientes são realmente limitadose assim são os servidores. E assim fazer ajustes para o seu cliente em particular é muito maisimportante. Outro exemplo desse tipo é o caso raro de ferramentas como Curl, ou alguns dos chamados navegadores de modo de textocomo w3m, alguns dos quais veremos mais adiante. Aqueles são feitos para ambientes delimitados e, por isso, colocarão limites no que é que eles podem aceitar.Então, muito para os cabeçalhos de solicitação; assim que o servidor decidir que ele vai concluir a solicitação, ele recebe os dados e depois a resposta. Assim como os pedidos devem ter certos tipos de cabeçalhosassim é a resposta.
Os cabeçalhos de resposta são seguidos pelos dados do recurso. Aqui estão alguns dos cabeçalhos de resposta:• O primeiro como vimos antes diz, HTTP/1.1 200 OK, o que significa que tudo ébem e aqui está o recurso que você pediu.• A próxima coisa que ele diz é: qual é o comprimento do conteúdo. A ideia é que depois desses muitosbytes sejam recebidos, o trabalho do servidor seja feito. E o cliente deve se sentir livre, por exemplo,para iniciar uma queda de conexão a partir dela é fim, se é isso que ele quer fazer.• A terceira linha é interessante. Esta é uma das principais razões pelas quais a web escalou tãomuito para literalmente bilhões de pessoas sobre velocidades de rede que variaram de muito pequenaaté as tremendas velocidades de hoje. Isso porque o caching é usado em todos os lugares na web.E o pedido volta com algo que diz quanto tempo você pode armazenar em cache. Agora emeste caso, este documento em particular é considerado permanente e improvável voltar a mudar.E, portanto, o controle de cache max age é um número enorme. Isso significa que tanto o navegadorpode manter um cache local. E se os recursos solicitados novamente, e ele estiver disponível no cache, entãoo navegador deve se sentir livre para mostrá-lo. Uma das coisas que os navegadores e gerenciadores de cachegeralmente têm que fazer é tentar se certificar se o seu recurso não se tornou estale enquanto eleestava sendo armazenado em cache.Agora pode ser que haja um recurso de alteração lenta e por isso há maneiras de verificar o frescor dodo recurso usando métodos como ‘ head ’ que informa se um recurso tem
alterado ou não. Além do navegador, que mantém cópias na máquina local, háuma grande cadeia muitas vezes de proxies que são mantidos por, digamos, a instituição em que você trabalha, o seu ISP,então há proxies ao lado do servidor.E depois há empresas como CloudFlare e Akamai, que fazem o trabalho de distribuir dadose manter cachos para que o tráfego real de rede recebido pelo provedor de dados final seja o mais baixopossível, a fim de economizar o dinheiro relacionado ao tráfego. Uma vez que a lista de cabeçalhos é feita, há umamais em branco. E depois disso os dados começam.
Os cabeçalhos que discutimos são aqueles que desempenharão um papel no nosso desenvolvimento futuro. Mas,há muitos outros recursos do protocolo HTTP, e muitos headers diferentes que sãodisponíveis que lidam com questões como: como funciona o upload de arquivos? Então, um arquivo pode ser carregado emchunks e tem que haver alguma estrutura no protocolo que permite fazer o upload de fragmentos bitpor bit ou no inverso onde há um recurso muito grande, e ele deve ser recebido um chunk emum tempo.
Essa é a questão do que acontece por downloads muito longos. Junto com isso, há outros problemas. Por exemplo, você pode iniciar o seu download onde você deixou-off. Algumas outras preocupações queos navegadores de hoje usam é compartilhar conexões TCP únicas em vários recursos que podemrealmente ser servidos sob nomes de domínio diferentes, mas pelo mesmo servidor, por exemplo. Alguns
outras coisas que a web faz é permitir que uma única máquina hospede muitos sites e hácabeçalhos que têm que lidar com esse tipo de coisa. Assim, esses problemas quando surgem, resolvendoeles exigem mudanças no protocolo HTTP.Por último, há cabeçalhos que tratam de outros componentes que são para navegar e servidores.Esses componentes incluem proxies de caching, que armazenam em cache os dados em nome do cliente, inverteproxies que armazenam em cache os dados em nome do servidor, carregadores de carga que são usados para garantir quenenhuma máquina fique sobrecarregada.E há muitos tais componentes que podem surgir na rede gigante que é a web. Alguns deos elementos de protocolo têm que lidar com esses componentes intermediários. Tudo em todos, há bastantealguns cabeçalhos na web. Agora, que já vimos uma lista de cabeçalhos e como eu disse, háinúmeros cabeçalhos. Vamos dar uma olhada em ferramentas que dizem exatamente o que os cabeçalhos estão sendousados.
Como vimos, enquanto o socat está bem para entender o maquinário TCP adequadamente, quando você realmentedeseja trabalhar apenas com HTTP, há melhores ferramentas do que níveis baixos socat. O mais importantetal ferramenta é provavelmente ‘ Curl ’. O Curl é uma espécie de navegador de linha de comando, você pode dar a ele URLs.E aí ele só fica com os dados e dumps it na tela. Então, vamos tentar isso. Temos o curl HTTPlocalhost, que, como você pode ver, dumps este tipo de webalizer do XAMPP, etc.Volta só para verificar, esta é a lista que o Curl tem jogado no console, mas normalmente, nósnão queremos. Há realmente duas coisas que você pode fazer com isso: uma é, às vezes é exatamenteo que você quer. Você quer os dados do console, e deseja salvá-lo como algum arquivo como‘ save.txt ’ e em qual caso esta é uma maneira simples de apenas obter a página web e salvá-la semmais ado. Mas, para o nosso caso estaremos usando curl para obter muito mais informações sobre o queacontece em interação com um website.Então, deixe-nos dar uma olhada. Então, temos HTTP slash localhost com um V. E agora, este não é mais apenas os dados. Então, por exemplo, esse XAMPP está por aqui, enquanto que, no anterior sem
o traço v depois do XAMPP, não havia mais nada, depois de body HTML que era a última coisa. Aqui,há body HTML. E depois disso, há algum outro material. Esta é a informação quecurl adicionou porque nós demos-V.Aqui tem mais alguma informação, todas essas coisas. Enquanto que no caso anterior, ele é apenas o documentoe nada mais. Esta é informação é detalhes sobre o que está acontecendo sob o capô quando a chamadaentra em contato com os sistemas. Aqui, por exemplo, temos as coisas marcadas com estrela (*) são interaçõesque têm a ver com o nível TCP. Aqui, ele diz que uma conexão está sendo iniciada, uma conexãoestá sendo concluída.E uma vez que a conexão é de transmissão completa vai para frente. Neste ponto, estamosprontos para enviar nossos headers. E assim, enviamos esses headers para fora. Depois disso, há alguma interação maistendo a ver com o TCP. E depois disso, você recebe headers de volta seguidos pelos dados.Isso é tudo em algum sentido que está acontecendo sob o capô. Mas não queremos tudo issonós realmente só queremos cabeçalhos HTTP puros.Headers, que começam com menos do que menos (< <) e cabeçalhos que começam com maior quemaior do que (> >). Por isso, no estilo UNIX usual, vamos filtrar tudo o mais, vamos dizer, let ’ spegar esses dados e unir saída de erro. Então, como esses dados estão chegando, aliás, é que os dados reais doque o Curl está recuperando, a própria página web, Ele está imprida na saída padrão, todas essas outrascoisas com estrelas e menos que sinais e whatnot.Aqueles que estão ficando impressos no erro padrão. Então, o que queremos é jogar forasaída padrão e obter erro padrão em seu lugar, o que é feito em unix com este incantamento debastante peculiar, isso não é óbvio mas é muito útil e é muito comum utilizá-lo. Depois disso, nóstemos egrip que é uma maneira de agarrar os dados com alguma expressão regular. E diz que vocêdeve jogar fora tudo, menos ou melhor selecionar tudo, menos esses caras.Então, agora apenas as linhas de cabeçalho são deixadas. Então, aqui temos o GET HTTP 1,1, que enviamos, o hosté localhost, o agente do usuário, como você pode ver é Curl com sua versão, e o curl está disposto a aceitarqualquer coisa. Então, não há nenhum tipo particular de dados que precisamos aqui. Esta parte são os cabeçalhos
que são enviados pelo servidor. Então, aqui temos o HHTP/1.1 200 OK, que diz que tudo está bem.No que diz respeito ao pedido, há uma data, assim como o agente diz que tipo de agente eu sou.O servidor diz que tipo de servidor ele é. Em seguida, ele informa o comprimento do conteúdo para que você possa fechara conexão depois e ela informa o tipo de conteúdo. Embora neste caso, nós não nos importamosporque estamos dispostos a aceitar qualquer coisa e tudo. Agora, vamos tentar fazer algo similarcom você pode tentar o site tools.ietf.org você mesmo. Vou tentar um site diferente, que éhttpd.apache.org.website do Apache em si, apache.org. Tudo o resto permanece o mesmo. E assim, vamos ver como nósinteragimos com o httpd.apache.org. Se você notou, enviamos nossos pedidos então houve um leve atraso,provavelmente uma espécie de soluço de rede, e então conseguimos esses muitos cabeçalhos. Nossos cabeçalhos têmnão alterados, eles permaneceram os mesmos cabeçalhos que enviamos para localhost, mas os cabeçalhosde entrada, há 2 coisas novas há LastModified e há ETag, um monte de outras coisascomo aceitar intervalos, aquela outra coisa chamada variam: aceite codificar e assim por diante.Então, há, como eu disse antes de muitos cabeçalhos diferentes com muitas finalidades diferentes. E aqui estáum exemplo de alguns deles. Aqui estão algumas coisas mais interessantes que podemos mostrar com o Curl. Nóssabemos que o nosso Apache está de fato rodando em duas portas:1. A porta HTTP usual, e2. A porta HTTPS.Deixe ’ s tentar e conectar-se à nossa porta HTTPS local. Agora ele reclama, diz que, embora este seja um servidor SSL, ele doesn ’ t ter um certificado ou melhor é um certificado auto-assinado e, portanto, ele énão vai aceitar.Isso tem a ver com segurança na web, que discutiremos mais tarde. Por enquanto, com curl há um modoem torno dele. Você pode dizer ao curl com uma dica de traço para ignorar isso, e agora ele começa a se comportar exatamentecomo nosso HTTPS normal. Let ’ s veja o que acontece se fizermos isso com um navegador, se você tentar ir paraHTTPS com um navegador.
Então o que vemos é que o navegador diz que esta conexão não é segura. Mas este navegador éprovavelmente sendo inteligente. Ele entende que localhost é a máquina local. E, por isso, não faz realmentematéria. Diz que há uma exceção implícita a isso. Se removemos esta exceção, obtemos estetipo de mensagem. Ele diz potencial risco de segurança. Mas, neste caso, isso realmente não importa. Então, nóspodemos dizer, aceitar o risco e que é justamente o comportamento de menos (-) k no que diz respeito a curl épreocupado.
Aqui ’ s algo mais interessante que podemos descobrir a partir de curl, vamos tentar o seguinte. Vamosdizer curl http tools.ietf.org html rfc1945 e deixe-nos ver o que acontece. Então, desta vez conseguimosoutra coisa. Ele diz que esse documento se moveu, e onde ele se moveu, ele se mudou paraHTTPS. Então, o que aconteceu é que o ietf só está servindo esses documentos do servidor HTTPS.Então, estes são os tipos de coisas que são fáceis de descobrir com curl.Além de curl, o próximo conjunto mais importante de ferramentas que são muito úteis no desenvolvimento web ou nas ferramentas de dev do navegador. No Firefox, o controle de keystroke + shift + I mostra essas ferramentas. As ferramentas sãotambém disponíveis aqui como ferramentas de desenvolvedor web. Ok, agora deixe o ’ s ver o que tudo está disponível nas ferramentas.Temos o inspetor, que é útil para olhar para HTML, o console e um depurador, quetêm a ver com JavaScript.O editor de estilo, que é para CSS, e uma série de outras coisas sobre envolver várias instalações do navegadorque estudaremos mais tarde. Por enquanto, nosso principal interesse é olhar para a guia de rede. Paraisso, deixe-nos fazer algo interessante. Iniciaremos nosso antigo servidor socat e primeiramente visite esse servidor paraver o que é que obtemos do navegador. Aqui vamos nós. Já o visitei uma vez. Então, o que euvou fazer é deslocar recarga esta página.Quando você desloca recarga, o navegador ignora todo o caching e se comporta como se você estiver visitando a páginapela primeira vez, então deixe-nos fazer e ver o que acontece. Ok, aqui está o que vemos. Vemos comoesperava-se o pedido para obter slash, o que é de se esperar porque o que temos aqui é que a URLnão tem nenhuma parte de URL de solicitação. Aqui está algo incomum, onde o navegadorsolicita um ícone de favorito.
Um ícone de favorito é este ícone como o W for Wikipedia, o bem-vindo aqui para o projeto apache, evários outros lugares onde o ícone de favoritos aparece. No nosso caso, já que estamos visitando o servidor socat, não retornamos nenhum ícone de suporte, mas o navegador faz um pedido de qualquer maneira, de modo que paradistinguem a guia. No caso de tal ícone de um ícone estar disponível. Primeiro vamos ver o que aconteceu no lado do servidor. Como esperado, no lado do servidor, recebemos duas solicitações GET.Uma para barra e outra para ícone de favoritos, e como vimos a última vez em que executamos o servidor, temos todosesses detalhes disponíveis do servidor, onde ele nos fala sobre coisas como os parâmetros de caching,e o agente de usuário etc. Isso é impresso pelo nosso servidor já que é tudo o que ele faz.Deixe-nos dar uma olhada no que as ferramentas do navegador nos mostram. Então, se você clicar aqui, você começará a vertodos os detalhes do navegador.
Então, aqui o que temos é de headers de pedidos. E não há headers de retorno ou cabeçalhos de resposta emeste caso, ou seja porque o nosso servidor falso não retorna de fato nenhum cabeçalhos, exceto o reconhecimentode que tudo estava ok. Vejamos o que mais existe. Nós não temos nenhum cookies, não temos nenhum parâmetro. E a resposta é apenas a string, que é mostrada aquicomo poderíamos esperar.Bem algumas facilidades interessantes estão disponíveis nas ferramentas do navegador. Por exemplo, aqui é uma maneira defiltrar cabeçalhos para eu apenas digitado em cache. Então, o que vemos é que: dois cabeçalhos de controle de cache relacionados, outra facilidade útil é ver o que os cabeçalhos brutos parecem. De modo que, toda a ortografiae todas essas questões ficam claras. No caso de haver alguns problemas que em algum momento, nós tambémtemos esses tipos de coisas.Por exemplo, a URL da solicitação é esta e a URI está vazia, pois no final da URL é tudonós temos. Em seguida, há o método de solicitação GET. E, finalmente, o endereço que foi buscadoque neste caso acontece de ser o localhost. Depois, temos favicon.ico o que nos deixa transformar os cabeçalhos brutosde modo que podemos ver o que ele pediu, já vimos no lado do servidor aqui o resultadodeste é um ícone vazio, que não é retornado por nós, mas é sintetizado pelo navegador.
Então, que não é preciso criar um caso especial e, em seguida, incluir nenhum ícone, como se, sem criaro caso especial, pensar sobre se um ícone estava ou não disponível. Mas isso é inteiramentesintetizado pelo navegador neste caso. O que mais existe? Temos nessas ferramentas, o inspetorque é olhar para HTML, o console e o depurador para JavaScript, o editor de estilo para CSS,e um monte de outras coisas que iremos estudar à medida que desenvolvemos aplicações web mais adiante.Próximo, esconda detalhes da solicitação e veja o que mais estava lá. Por isso, neste caso, somos informados de que o tipoque voltou foi de texto recorrente e 80 bytes foram transferidos. A resposta em si foi 61 bytes.E este foi o tempo que levou. Observe que ícone de favoritos que não retornamos, levou mais algum tempoenquanto o navegador decidiu que não havia nenhum ícone e que ele deveria realmente sintetizar.Aqui está um pouco de um resumo:Há dois pedidos quanto de dados, qual é o tempo total. Essas coisas como o conteúdo DOMcarregadas e tudo o que vamos estudar a tempo. Ok, então isso é sobre um uso das ferramentas do navegador. Agora deixenós tentarmos outra coisa. Desta vez vamos simplesmente recarregar a página atual em vez de fazer o shiftrecarregar e nos deixar ver o que acontece. Então, desta vez, sabe-se do navegador que não há nenhum ícone de. Sendo assim, nenhum pedido de ícone de favoritos é feito.No entanto, pedimos novamente para a solicitação principal Nesse caso, é esta data, que serádiferente. Fora isso, esperaríamos que tudo o mais fosse o mesmo. Aqui está um casal outrascoisas. Esta guia está nos mostrando absolutamente tudo. Mas, você pode pedir pedidos para peças individuais. E não há qualquer coisa que seja enviada que esteja nestas categorias. Porque a única coisa que nóstínhamos enviado era texto simples para o qual não existe categoria especial, exceto outro, que é um catch allpara todo o resto.Então, que ’ s o que temos do navegador devtools para este site simples. Vamos estudar outro caso.Este é onde estávamos rodando o apache do nosso pacote xampp. E isso é o que esperamosver de apenas ir para localhost. Como antes, o que eu vou fazer é iniciar o desenvolvedor webferramentas aqui e depois shift reload, ok. Agora, temos algo mais interessante. Além de barrahá todas essas outras coisas em branco gif, gif de texto, etc, quais são os ícones que são usados para obter a aparênciade um diretório a partir do localhost.
Isto é feito pelo Apache como parte dele é de abordagem padrão de ir e sintetizar este tipode resposta quando não há nenhum índice ou index.php ou qualquer tal arquivo presente. E desta vezo tipo é HTML, estes são gifs, este é um ícone. Então, assim, veremos as coisas por aqui.Agora, a única solicitação HTML é para barra, temos um monte de solicitações relacionadas à imagem.E não há nenhum tipo de CSS JS ou qualquer outro tipo de solicitação aqui, tudo o que temos é cada pedido únicoque somos capazes de ver. Let ’ s olhar para o que são os cabeçalhos de solicitação e resposta. Desta vezambos os cabeçalhos de solicitação e resposta estão disponíveis. Os cabeçalhos de solicitação estão abaixo. Este é oconjunto completo de pedidos como da última vez, para o nosso servidor simples. Mas, desta vez, temos respostaheaders.
Em particular, temos conexão manter viva, temos o comprimento do conteúdo. Temos o tipo de conteúdo, temos a data, temos mantenha-vivo e somos informados a identidade do servidor.Deixe ’ s ver se há algo a mais, não há cookies, é claro, sem parâmetros. E os dados de respostasão essa coisa em que a carga útil é mostrada para ser este pedaço de HTML. Então, uma tabela écriada. E todos esses tipos de coisas são colocadas juntas, de modo que temos alguma resposta para ver.Aqui está uma lista de timings, o que aconteceu durante esse pedido, foi bloqueado foi lá haviaquaisquer problemas falando com o DNS, e houve alguma espera enquanto o servidor tinha levado tempo pararesponder. Stacktrace aqui nos fala em que ordem essas coisas acontecem, esses tipos de detalhes, elesdependem da arquitetura do navegador também, então não olharíamos muito para isso.Agora, nos desliamos de detalhes da solicitação novamente. E vamos seguir em frente a alguns outros sites. Tudo bem. O nosso próximo siteserá o site para o projeto do servidor apache. Novamente, inicie essas ferramentas e faça recarga de turno.Então, deixe-me batê-lo novamente e obter reservas frescas bem. Então, desta vez, como você pode ver, há bastantemais alguns pedidos, a maioria das quais imagens. Há estilemas e veja o que esse caramostra.
Então, aqui temos dois pedidos de stylesheet. Existe JavaScript? Sim, há o nosso JavaScript. Entãoestavam lá qualquer outro tipo de coisa, estava lá a mídia parece sem mídia. E finalmente, quando nósirmos para a Network Tab nos devtools, veremos todos os pedidos. A seguir, olhe para o que os cabeçalhos
veja como usar o botão no Tab da Rede. Nós temos cabeçalhos de pedido já que eles são originadospor nós, eles não mudam, mas cabeçalhos de resposta desta vez, têm muito mais detalhes. Em particular,percebem essas coisas novas o ETag, LastModified e assim sucessivamente e assim por diante, que vimos com ocurl. E vemos isso de novo.Na seção de cookies, descobrimos que não há cookies. Sabemos como é a resposta. Por isso,não queremos olhar para isso de novo tudo bem, vamos fechar os detalhes da solicitação e ver o que mais nósobtemos. Então, houve um total de 15 pedidos. Esse tanto de dados, demorou cerca de 4 seconds minutos para que tudoentrava. E a página básica foi renderizada após cerca de um segundo e meio segundo. Então, esta é uma maneira fácil de entender o quão bem o seu site está se apresentando.Agora, deixe o ’ s ir em outro site principal, que é a Wikipédia. Ao carregar o website, observamosque é preciso um pouco de tempo para carregar tudo nesta página. E para ver os efeitos do caching,recarregaremos sem usar turno. O que vemos aqui? Parece que não muita diferença. Nãomuito ficou em cachê. Então, ele está mostrando tudo, mas ele está mostrando cachos e isso é interessante.Eu me pergunto por que eles estão se agarrando a coisas com cachos. Ok, eu preciso passar muito mais tempo paraentender isso em detalhes. Então, por enquanto, eu só vou deixar isso para lá. E nós vamos apenas saber que essa coisatem muita diferença. Eu vou bater de novo e ver o que acontece. Esta ordem, deveriater feito muito melhor. Ok, vamos ver se a Wikipédia faz melhor se tentarmos essa coisa de fora.Então, nós temos esta página aqui, vamos atingir reload de turno, de modo a conseguir tudo. O que vemosWikipédia é na verdade um pouco mais rápido. Não surpreendente porque a Wikipédia é um site muito popular.E eles são fortemente cachos em todos os lugares. E eles devem estar gastando algum esforço em ser facilmenteacessíveis de todo o mundo. Agora, desta vez, temos bastante algumas URLs de aparênciamais interessantes. Por isso, vamos ver o que tudo o que obtemos.Aqui temos o site básico e solicitamos cabeçalhos que vimos mas confira esses cabeçalhos de respostapara fora. Então, eles têm idade, eles têm algo chamado de timing back-end. Eles têm várias coisassobre caching. Tem essa coisa, que eu esqueci o que o p3p é para, é uma lista muito grande de
cabeçalhos e a menos que você aconteça para lidar com um deles, é muito tempo depois que você precisa notartodos os detalhes.
Mas aqui é algo interessante. Além disso, para os cabeçalhos normais, há muitos cabeçalhos de x dash, estes cabeçalhos x dash (x-) não são cabeçalhos padrão, eles são feitos pela Wikipédia por seu uso próprio. Por isso, por exemplo, x verniz tem a ver com um cache chamado verniz, que provavelmenteWikipedia usa. E, portanto, está contando algo útil para o cache do verniz, que uma vezvocê estuda verniz, você vai saber do que se trata. Ok, o que mais temos aqui.Então, aqui temos um stylesheet, mas a URL stylesheet, desta vez tem parâmetros. Então, essa etapa de parâmetronos diz que há um idioma, há uma série de módulos, que háestilos, há algo chamado ‘ skin ’.O que mais? Por isso, como você pode ver, essas ferramentas nos contam muitas coisas interessantes sobre o que está acontecendoatrás de nossos sites. E uma vez que você está familiarado com a ferramenta, você pode ir a sites populares e vero que é que os sites populares realmente carregam.A maioria de vocês se você não viu essas ferramentas antes, você ficará chocado porque há muitomais pedidos que estão acontecendo, então você pode imaginar, e ainda assim, o desempenho deo sistema geral é muito bom. Ok, agora vamos ver o que acontece se simplesmente recarregarmos, esperandopara que o caching tenha algum efeito. Aha, desta vez o conteúdo DOM carregado desceu para 325milissegundos como comparado a um segundo.