浏览器页面加载过程：从输入到渲染完毕原理

在前端开发中，了解浏览器页面加载的过程对于优化网页性能和用户体验至关重要。本文将详细介绍浏览器页面加载过程，并提供相应的源代码示例。

1. URL 解析和 DNS 查询
   当用户在浏览器地址栏中输入一个 URL 时，浏览器首先会解析该 URL。解析过程包括协议解析、主机解析和路径解析等。例如，当用户输入 “https://www.example.com/index.html” 时，浏览器会解析出协议为 HTTPS，主机为 “www.example.com”，路径为 “/index.html”。

接下来，浏览器会进行 DNS 查询，将主机名解析为 IP 地址。浏览器首先会检查缓存中是否有对应的 IP 地址，如果有则直接使用缓存，否则会向 DNS 服务器发送查询请求以获取 IP 地址。

以下是一个简单的 JavaScript 示例代码，用于演示 URL 解析和 DNS 查询的过程：

const url = "https://www.example.com/index.html";

// URL 解析
const parsedURL