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

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逻辑}

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