網(wǎng)頁從輸入網(wǎng)址到渲染完成經(jīng)歷了以下過程：

1.DNS解析(Domain Name System Resolution)

瀏覽器首先將輸入的網(wǎng)址發(fā)送給DNS服務(wù)器，以獲取網(wǎng)址對(duì)應(yīng)的IP地址。DNS服務(wù)器將網(wǎng)址解析為對(duì)應(yīng)的IP地址。

2.TCP連接(Transmission Control Protocol)

瀏覽器使用獲取到的IP地址與Web服務(wù)器建立TCP連接。TCP連接確保數(shù)據(jù)的可靠傳輸。

3.發(fā)送HTTP請(qǐng)求

一旦TCP連接建立成功，瀏覽器會(huì)向Web服務(wù)器發(fā)送HTTP請(qǐng)求。HTTP請(qǐng)求包含了請(qǐng)求的類型(GET、POST等)、路徑、頭部信息以及其他參數(shù)。

4.服務(wù)器處理請(qǐng)求

Web服務(wù)器接收到瀏覽器發(fā)送的HTTP請(qǐng)求后，根據(jù)請(qǐng)求的內(nèi)容進(jìn)行處理。服務(wù)器可能會(huì)讀取文件、查詢數(shù)據(jù)庫(kù)或執(zhí)行其他操作來生成需要的網(wǎng)頁內(nèi)容。

5.服務(wù)器發(fā)送響應(yīng)

Web服務(wù)器生成響應(yīng)內(nèi)容，并以HTTP響應(yīng)的形式發(fā)送回瀏覽器。響應(yīng)包含了響應(yīng)的狀態(tài)碼(例如200表示成功、404表示頁面未找到等)、頭部信息以及響應(yīng)的內(nèi)容。

6.接收響應(yīng)

瀏覽器接收到服務(wù)器發(fā)送的HTTP響應(yīng)后，開始接收響應(yīng)的內(nèi)容。響應(yīng)的內(nèi)容通常是HTML、CSS、JavaScript等文件。

7.解析文檔

瀏覽器對(duì)接收到的HTML文檔進(jìn)行解析，構(gòu)建DOM(Document Object Model)樹，這是由HTML標(biāo)記構(gòu)成的樹形結(jié)構(gòu)，表示網(wǎng)頁的結(jié)構(gòu)和內(nèi)容。

8.加載資源

瀏覽器解析HTML文檔時(shí)，如果遇到外部資源(例如CSS、JavaScript、圖像等)，會(huì)發(fā)送額外的HTTP請(qǐng)求來獲取這些資源。

9.渲染頁面

瀏覽器根據(jù)構(gòu)建好的DOM樹和CSS樣式信息，將網(wǎng)頁內(nèi)容渲染到用戶的屏幕上。這包括布局、繪制文本、應(yīng)用樣式等過程。

10.執(zhí)行JavaScript

如果HTML文檔中包含JavaScript代碼，瀏覽器會(huì)執(zhí)行這些代碼，以添加交互性和動(dòng)態(tài)效果到頁面上。

11.加載完成

當(dāng)所有資源都加載完成，頁面渲染完畢后，網(wǎng)頁加載過程就完成了。

以下是一個(gè)簡(jiǎn)單的代碼演示，展示了網(wǎng)頁加載的過程：

const url = 'https://example.com'; // 輸入的網(wǎng)址

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

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

// 發(fā)送HTTP請(qǐng)求
const httpRequest = createHTTPRequest(url);
socket.send(httpRequest);

// 接收響應(yīng)
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);
// 執(zhí)行JavaScript
executeJavaScript(domTree);
// 加載完成
console.log("頁面加載完成");
function dnsLookup(url) {
// 執(zhí)行DNS解析邏輯
// 返回解析得到的IP地址
}
function establishTCPConnection(ipAddress) {
// 建立TCP連接邏輯
// 返回建立的Socket對(duì)象
}
function createHTTPRequest(url) {
// 創(chuàng)建HTTP請(qǐng)求邏輯
// 返回HTTP請(qǐng)求對(duì)象
}
function parseHTML(httpResponse) {
// 解析HTML文檔邏輯
// 返回DOM樹對(duì)象
}
function extractResourceURLs(domTree) {
// 提取資源URL邏輯
// 返回資源URL列表
}
function cacheResource(url, response) {
// 緩存資源邏輯
}
function renderPage(domTree) {
// 渲染頁面邏輯
}
function executeJavaScript(domTree) {
// 執(zhí)行JavaScript邏輯
}

請(qǐng)注意，這只是一個(gè)簡(jiǎn)化的示例代碼，實(shí)際的實(shí)現(xiàn)可能會(huì)更加復(fù)雜，并涉及到更多的細(xì)節(jié)和處理。