首頁常見問題正文

網頁從輸入網址到渲染完成經歷了哪些過程?

更新時間:2023-05-05 來源:黑馬程序員 瀏覽量:

IT培訓班

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

  1.DNS解析(Domain Name System Resolution)

  瀏覽器首先將輸入的網址發(fā)送給DNS服務器,以獲取網址對應的IP地址。DNS服務器將網址解析為對應的IP地址。

  2.TCP連接(Transmission Control Protocol)

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

  3.發(fā)送HTTP請求

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

  4.服務器處理請求

  Web服務器接收到瀏覽器發(fā)送的HTTP請求后,根據請求的內容進行處理。服務器可能會讀取文件、查詢數據庫或執(zhí)行其他操作來生成需要的網頁內容。

  5.服務器發(fā)送響應

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

  6.接收響應

  瀏覽器接收到服務器發(fā)送的HTTP響應后,開始接收響應的內容。響應的內容通常是HTML、CSS、JavaScript等文件。

  7.解析文檔

  瀏覽器對接收到的HTML文檔進行解析,構建DOM(Document Object Model)樹,這是由HTML標記構成的樹形結構,表示網頁的結構和內容。

  8.加載資源

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

  9.渲染頁面

  瀏覽器根據構建好的DOM樹和CSS樣式信息,將網頁內容渲染到用戶的屏幕上。這包括布局、繪制文本、應用樣式等過程。

  10.執(zhí)行JavaScript

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

  11.加載完成

  當所有資源都加載完成,頁面渲染完畢后,網頁加載過程就完成了。

  以下是一個簡單的代碼演示,展示了網頁加載的過程:

const url = 'https://example.com'; // 輸入的網址

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

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

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

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

分享到:
在線咨詢 我要報名
和我們在線交談!