网页从输入网址到渲染完成经历了哪些过程?

网页从输入网址到渲染完成经历了以下过程：

1.DNS解析(Domain Name System Resolution)

浏览器首先将输入的网址发送给DNS服务器，以获取网址对应的IP地址。DNS服务器将网址解析为对应的IP地址。

2.TCP连接(Transmission Control Protocol)

浏览器使用获取到的IP地址与Web服务器建立TCP连接。TCP连接确保数据的可靠传输。

3.发送HTTP请求

一旦TCP连接建立成功，浏览器会向Web服务器发送HTTP请求。HTTP请求包含了请求的类型(GET、POST等)、路径、头部信息以及其他参数。

4.服务器处理请求

Web服务器接收到浏览器发送的HTTP请求后，根据请求的内容进行处理。服务器可能会读取文件、查询数据库或执行其他操作来生成需要的网页内容。

5.服务器发送响应

Web服务器生成响应内容，并以HTTP响应的形式发送回浏览器。响应包含了响应的状态码(例如200表示成功、404表示页面未找到等)、头部信息以及响应的内容。

6.接收响应

浏览器接收到服务器发送的HTTP响应后，开始接收响应的内容。响应的内容通常是HTML、CSS、JavaScript等文件。

7.解析文档

浏览器对接收到的HTML文档进行解析，构建DOM(Document Object Model)树，这是由HTML标记构成的树形结构，表示网页的结构和内容。

8.加载资源

浏览器解析HTML文档时，如果遇到外部资源(例如CSS、JavaScript、图像等)，会发送额外的HTTP请求来获取这些资源。

9.渲染页面

浏览器根据构建好的DOM树和CSS样式信息，将网页内容渲染到用户的屏幕上。这包括布局、绘制文本、应用样式等过程。

10.执行JavaScript

如果HTML文档中包含JavaScript代码，浏览器会执行这些代码，以添加交互性和动态效果到页面上。

11.加载完成

当所有资源都加载完成，页面渲染完毕后，网页加载过程就完成了。

以下是一个简单的代码演示，展示了网页加载的过程：

const url = 'https://example.com'; // 输入的网址

// DNS解析
const ipAddress = dnsLookup(url);

// 建立TCP连接
const socket = establishTCPConnection(ipAddress);

// 发送HTTP请求
const httpRequest = createHTTPRequest(url);
socket.send(httpRequest);

// 接收响应
const httpResponse = socket.receive();

// 解析文档
const domTree = parseHTML(httpResponse);

// 加载资源
const resourceURLs = extractResourceURLs(domTree);
for (const resourceURL of resourceURLs) {
  const resourceRequest = createHTTPRequest(resourceURL);
  socket.send(resourceRequest);
  const resourceResponse = socket.receive();
  cacheResource(resourceURL, resource response);
  }
// 渲染页面
renderPage(domTree);
// 执行JavaScript
executeJavaScript(domTree);
// 加载完成
console.log("页面加载完成");
function dnsLookup(url) {
// 执行DNS解析逻辑
// 返回解析得到的IP地址
}
function establishTCPConnection(ipAddress) {
// 建立TCP连接逻辑
// 返回建立的Socket对象
}
function createHTTPRequest(url) {
// 创建HTTP请求逻辑
// 返回HTTP请求对象
}
function parseHTML(httpResponse) {
// 解析HTML文档逻辑
// 返回DOM树对象
}
function extractResourceURLs(domTree) {
// 提取资源URL逻辑
// 返回资源URL列表
}
function cacheResource(url, response) {
// 缓存资源逻辑
}
function renderPage(domTree) {
// 渲染页面逻辑
}
function executeJavaScript(domTree) {
// 执行JavaScript逻辑
}

请注意，这只是一个简化的示例代码，实际的实现可能会更加复杂，并涉及到更多的细节和处理。