在浏览器输入网址后会发生什么

在浏览器地址栏键入URL，按下回车之后会经历以下流程：

1. 浏览器向 DNS 服务器请求解析该 URL 中的域名所对应的 IP 地址
2. 解析出 IP 地址后，根据该 IP 地址和默认端口 80，和服务器建立TCP连接
3. 浏览器发出读取文件(URL 中域名后面部分对应的文件)的HTTP 请求，该请求报文作为 TCP 三次握手的第三个报文的数据发送给服务器
4. 服务器对浏览器请求作出响应，并把对应的 html 文本发送给浏览器
5. 释放 TCP连接
6. 浏览器将该 html 文本渲染并显示内容

DNS解析过程

DNS（Domain Name System）解析是将域名转换为IP地址的过程。为了提高效率并减少DNS服务器的负载，DNS解析过程引入了缓存机制。缓存机制存在于多个层级：

浏览器缓存：

• 浏览器会缓存最近解析过的域名和对应的IP地址。
• 当用户再次访问相同的域名时，浏览器会首先检查本地缓存，如果找到对应的IP地址，就直接使用，避免再次进行DNS解析。

操作系统缓存：

• 操作系统也会缓存DNS查询结果。
• 在Windows中，ipconfig /displaydns命令可以查看缓存内容，而ipconfig /flushdns命令可以清除缓存。

路由器缓存：

• 家庭和企业网络中的路由器也会缓存DNS查询结果，以减少对外部DNS服务器的请求。

ISP缓存：

• 互联网服务提供商（ISP）通常会配置DNS服务器来为用户提供DNS解析服务，这些服务器也会缓存DNS查询结果。
• 这层缓存能够极大地提高DNS解析的速度，并减少网络流量。

递归DNS服务器缓存：

• 递归DNS服务器会缓存从权威DNS服务器获取的查询结果。
• 这些缓存数据会在特定时间段（TTL, Time To Live）内有效，TTL由域名的DNS记录设置决定。

缓存机制的工作流程

1. 浏览器缓存：浏览器首先检查自己的DNS缓存。
2. 操作系统缓存：如果浏览器缓存中没有，浏览器会向操作系统查询缓存。
3. 路由器缓存：如果操作系统缓存中没有，查询会发送到本地路由器。
4. ISP缓存：如果路由器缓存中没有，查询会发送到ISP的DNS服务器。
5. 递归DNS服务器缓存：如果ISP的DNS服务器缓存中没有，查询会发送到递归DNS服务器。
6. 权威DNS服务器：如果递归DNS服务器缓存中没有，最终会查询权威DNS服务器。

浏览器的渲染过程

浏览器的渲染过程是将HTML、CSS和JavaScript转换为用户可以看到和交互的网页内容的过程。以下是详细的渲染步骤：

1. 解析HTML：

   • 浏览器将HTML解析成DOM（Document Object Model）树。DOM树是HTML文档的结构化表示。

2. 构建CSSOM：

   • 浏览器解析CSS文件并构建CSSOM（CSS Object Model）树。CSSOM树是CSS规则的结构化表示。

3. 生成渲染树：

   • 浏览器将DOM树和CSSOM树结合生成渲染树。渲染树包含了每个节点的视觉信息，确定哪些内容需要显示以及如何显示。

4. 布局（排版）：

   • 浏览器计算每个渲染树节点的尺寸和位置。这一步称为布局（layout）或排版（reflow）。

5. 绘制（绘图）：

   • 浏览器将渲染树节点绘制到屏幕上，这一步称为绘图（paint）。绘图过程将所有的布局信息转换为屏幕上的像素。

6. 合成（compositing）：

   • 浏览器将多个图层合成为最终的图像。复杂的网页可能会使用多个图层，以便于处理动画和滚动效果。

页面加载优化

优化页面加载速度对于提升用户体验至关重要。以下是一些常见的优化技巧：

1. 减少HTTP请求：

   • 合并CSS和JavaScript文件，使用CSS sprites合并图像，减少文件数量。

2. 使用CDN：

   • 使用内容分发网络（CDN）来加速资源加载，CDN会在全球范围内缓存和分发静态资源。

3. 启用压缩：

   • 使用Gzip或Brotli压缩文本资源（HTML、CSS、JavaScript）以减少文件大小。

4. 懒加载：

   • 对图片和其他资源使用懒加载技术，仅在需要时才加载。

5. 缓存策略：

   • 使用浏览器缓存和服务器端缓存（如HTTP缓存头）减少重复请求。

6. 减少DNS查找：

   • 尽量减少使用不同域名的资源，以减少DNS解析时间。

7. 优化CSS和JavaScript：

   • 将CSS放在页面头部（尽量减少CSS阻塞渲染），将JavaScript放在页面底部或使用异步加载（减少JS阻塞页面加载）。

8. 使用预加载和预取：

   • 加载关键资源和预取未来可能使用的资源。

9. 异步和延迟加载脚本：

   • 使用async或defer属性加载JavaScript文件，避免阻塞页面解析。