Leitura recomendada

Compartilhamento de informações

Compartilhamento da documentação mais completa de difusão estável de pintura de IA da história

Pintura AI sobre enciclopédia SD, MJ, GPT, SDXL

AI pintura difusão estável Midjourney documento oficial GPT coleta de dados da enciclopédia AIGC

「java、python面试题」来自UC网盘app分享，打开手机app，额外获得1T空间
https://drive.uc.cn/s/2aeb6c2dcedd4
AIGC资料包
https://drive.uc.cn/s/6077fc42116d4
https:
## 引言

在当今互联网时代，我们每天都会通过浏览器访问各种网页。但是，你是否曾经思考过在我们输入一个URL后，浏览器是如何加载并显示页面的呢？这背后涉及到一系列复杂的技术和过程。本文将带领大家深入了解从输入URL到页面展示的过程，并给出相应的代码示例，让我们一起探索这个神奇而又复杂的世界。

## 1. 网络请求的发起

通过浏览器输入URL后，浏览器会根据协议类型（如HTTP或HTTPS）向服务器发起请求。这个过程可以通过下面的代码示例来体现：

```javascript
const url = "https://example.com";
fetch(url)
  .then(response => response.text())
  .then(data => {
    
    
    console.log(data);
  })
  .catch(error => {
    
    
    console.error(error);
  });

No código, usamos a API fetch do JavaScript para iniciar solicitações de rede e converter a resposta do servidor em texto e enviá-la para o console.

2. Resolução DNS

Antes de enviar uma solicitação de rede, o navegador primeiro precisa resolver o nome de domínio na URL para o endereço IP correspondente. Este processo é chamado de resolução DNS. A seguir está uma versão simplificada do código de exemplo de resolução de DNS:

const dns = require('dns');

const domain = "example.com";
dns.resolve(domain, 'A', (err, addresses) => {
    
    
  if (err) {
    
    
    console.error(err);
    return;
  }
  console.log(addresses);
});

No código acima, usamos o dnsmódulo Node.js para realizar a resolução de DNS e gerar o endereço IP resolvido.

3. Estabeleça conexão TCP

Após a resolução do DNS, o navegador tentará estabelecer uma conexão TCP com o servidor. Este processo envolve um handshake de três vias para garantir que os dados possam ser transmitidos de forma segura e confiável. A seguir está um exemplo de código de conexão TCP simplificado:

const net = require('net');

const serverIP = '192.168.0.1';
const port = 80;

const client = new net.Socket();
client.connect(port, serverIP, () => {
    
    
  console.log('TCP connection established');
});

No código acima, usamos o netmódulo Node.js para criar um soquete TCP e connectestabelecer uma conexão com o servidor por meio de métodos.

4. Enviar solicitação HTTP

Após a conexão TCP ser estabelecida, o navegador constrói uma solicitação HTTP e a envia ao servidor. Aqui está um exemplo de código simplificado para enviar uma solicitação HTTP:

const http = require('http');

const options = {
    
    
  hostname: 'example.com',
  port: 80,
  path: '/',
  method: 'GET'
};

const req = http.request(options, res => {
    
    
  console.log(`HTTP response status code: ${
      
      res.statusCode}`);
});

req.end();

No código acima, usamos o httpmódulo Node.js para criar uma solicitação HTTP e requestenviá-la ao servidor por meio do método.

5. O servidor processa a solicitação

Depois que o servidor receber a solicitação HTTP enviada pelo navegador, ele a processará de acordo com o conteúdo da solicitação. Este processo geralmente inclui operações como resolução de rota e consulta de dados. Aqui está um exemplo de código simplificado de como o servidor lida com solicitações:

const http = require('http');

const server = http.createServer((req, res) => {
    
    

  if (req.url === '/') {
    
    

res.writeHead(200, {
    
     'Content-Type': 'text/plain' });

res.end('Hello, World!');

  } else if (req.url === '/about') {
    
    

res.writeHead
(200, {
    
     'Content-Type': 'text/html' });
    res.end('<h1>About Page</h1>');
  } else {
    
    
    res.writeHead(404, {
    
     'Content-Type': 'text/plain' });
    res.end('Page not found');
  }
});

server.listen(80, () => {
    
    
  console.log('Server running at http://localhost:80/');
});

No código acima, httpcriamos um servidor HTTP simples usando módulos Node.js. Dependendo do caminho da URL solicitada, o servidor retornará um conteúdo de resposta diferente.

6. Receba dados de resposta

Quando o servidor processa a solicitação e gera uma resposta, o navegador recebe os dados da resposta. Esse processo acontece dentro do navegador e não temos acesso direto ao seu código. O navegador armazenará os dados de resposta no cache e os preparará para análise e renderização subsequentes.

7. Analisar HTML

Depois que o navegador recebe os dados de resposta, ele analisa o HTML e constrói uma árvore DOM. Este processo envolve a identificação de tags HTML, atributos, texto, etc. e sua conversão em estruturas de dados manipuláveis. Aqui está um exemplo de código de análise HTML simplificado:

const parser = new DOMParser();
const htmlString = '<html><head><title>Hello, World!</title></head><body><h1>Welcome</h1></body></html>';
const doc = parser.parseFromString(htmlString, 'text/html');

console.log(doc.title); // Output: "Hello, World!"
console.log(doc.body.innerHTML); // Output: "<h1>Welcome</h1>"

No código acima, usamos o DOMParser do JavaScript para analisar strings HTML e obter as informações necessárias manipulando a árvore DOM analisada.

8. Construir árvore DOM

Após o navegador analisar o HTML, ele construirá uma árvore DOM baseada no relacionamento hierárquico entre tags. Cada elemento HTML será convertido em um nó DOM e formará uma hierarquia de nós pai-filho de acordo com seu relacionamento aninhado em HTML. A seguir está um exemplo simplificado de construção de árvore DOM:

const htmlString = '<html><head><title>Hello, World!</title></head><body><h1>Welcome</h1></body></html>';
const doc = new DOMParser().parseFromString(htmlString, 'text/html');

console.log(doc.documentElement); // Output: HTML元素节点
console.log(doc.documentElement.childNodes.length); // Output: 2，包含<head>和<body>
console.log(doc.documentElement.childNodes[1].childNodes[0]); // Output: <h1>Welcome</h1>

No código acima, usamos DOMParser para analisar a string HTML e obter as informações do nó da árvore DOM por meio de acessos documentElemente atributos.childNodes

9. Renderize a página

Após a construção da árvore DOM, o navegador renderizará a página com base na estrutura e nas informações de estilo da árvore DOM. Este processo inclui cálculo de layout, desenho de elementos, carregamento de recursos externos e outras operações e, por fim, exibição da página ao usuário. Como o processo de renderização do navegador é muito complexo, não podemos operar diretamente seu mecanismo de renderização. Porém, podemos usar ferramentas de depuração para observar a renderização da página.

10. Interação do usuário e efeitos dinâmicos

Após a conclusão da renderização da página, os usuários podem interagir com a página e desfrutar de ricos efeitos dinâmicos. Isso inclui ações como clicar em links, enviar formulários, desencadear eventos, etc. JavaScript desempenha um papel importante aqui, ele pode ouvir as operações do usuário e atualizar o conteúdo da página ou executar a lógica correspondente de acordo.

11. Otimização de desempenho

Para fornecer uma melhor experiência ao usuário, precisamos nos concentrar na otimização do desempenho. Isso inclui estratégias como redução do número de solicitações de rede, compactação de arquivos de recursos e uso de cache. Ao mesmo tempo, otimizar a forma como o JavaScript e o CSS são escritos também pode melhorar a velocidade de carregamento e a capacidade de resposta da página.

Do URL de entrada ao processo de exibição da página: análise aprofundada de solicitações de rede e renderização