網頁從輸入網址到渲染完成經歷了以下過程：

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);//?執行JavaScriptexecuteJavaScript(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邏輯}

請注意，這只是一個簡化的示例代碼，實際的實現可能會更加復雜，并涉及到更多的細節和處理。