【前端】面试八股文——输入URL到页面展示的过程

【前端】面试八股文------输入URL到页面展示的过程

1. DNS解析

当用户在浏览器中输入URL并按下回车时,首先需要将域名转换为IP地址,这个过程称为DNS(域名系统)解析。具体步骤如下:

  • 浏览器缓存:浏览器首先检查自身缓存中是否有该域名的IP地址。
  • 操作系统缓存:如果浏览器缓存中没有找到,浏览器会向操作系统请求DNS信息。
  • 路由器缓存:如果操作系统缓存也没有找到,操作系统会向本地网络中的路由器请求DNS信息。
  • ISP DNS服务器:如果路由器缓存没有命中,路由器会向ISP提供的DNS服务器请求域名解析。
  • 递归查询:如果ISP的DNS服务器也没有找到,它会进行递归查询,从根DNS服务器开始,逐级查询顶级域(如.com)、二级域等,直到找到对应的IP地址。

2. TCP连接

获得IP地址后,浏览器需要与服务器建立连接,这通常通过三次握手完成:

  • 第一次握手:浏览器(客户端)发送一个带有SYN标志的数据包到服务器,表示请求建立连接。
  • 第二次握手:服务器收到SYN数据包后,回复一个带有SYN/ACK标志的数据包,表示同意建立连接。
  • 第三次握手:客户端收到SYN/ACK数据包后,再回复一个带有ACK标志的数据包,连接建立完成。

3. 发送HTTP请求

TCP连接建立后,浏览器会构建一个HTTP请求报文并发送到服务器:

  • 请求行:包含请求方法(如GET、POST)、URL和HTTP版本。
  • 请求头:包含主机、用户代理、接受的文件类型等信息。
  • 请求体:对于GET请求通常为空,对于POST请求包含提交的数据。

4. 服务器处理请求

服务器接收到HTTP请求后,会进行以下操作:

  • 请求解析:解析请求报文,提取请求的资源路径和其他信息。
  • 资源查找:根据请求路径查找对应的资源(如HTML文件、图像等)。
  • 生成响应:将查找到的资源封装到HTTP响应报文中,准备返回给客户端。

5. 浏览器接收响应

浏览器接收服务器的响应报文,并进行解析:

  • 状态行:包含HTTP版本、状态码(如200、404)和状态描述。
  • 响应头:包含内容类型、内容长度、服务器信息等。
  • 响应体:包含实际的资源内容(如HTML、CSS、JavaScript等)。

6. 渲染页面

浏览器根据响应内容开始渲染页面,步骤如下:

  • 解析HTML:浏览器解析HTML文件,构建DOM树。
  • 解析CSS:解析CSS文件,构建CSSOM树。
  • 构建渲染树:将DOM树和CSSOM树合并,生成渲染树。
  • 布局(layout):计算每个元素的大小和位置。
  • 绘制(painting):将渲染树中的元素绘制到屏幕上。

7. 执行JavaScript

浏览器解析并执行HTML中的JavaScript:

  • 解析脚本:浏览器解析并执行内嵌的或外部引用的JavaScript。
  • 操作DOM:JavaScript可能会操作DOM,改变页面内容。
  • 重新渲染:如果JavaScript修改了DOM,浏览器可能会重新计算布局和绘制页面。

8. 加载其他资源

HTML文件中可能引用了其他资源(如图片、视频、字体等),浏览器会根据需要加载这些资源:

  • 并行加载:浏览器可以并行发送多个HTTP请求以加快资源加载速度。
  • 处理响应:每个资源的加载过程与主HTML文件类似,会经过DNS解析、TCP连接、HTTP请求和响应处理等步骤。

9. 建立安全连接(HTTPS)

如果使用HTTPS,浏览器在建立TCP连接后会进行SSL/TLS握手,以建立加密通道:

  • 协商加密算法:客户端和服务器协商使用的加密算法。
  • 交换密钥:客户端和服务器交换密钥,建立加密通信通道。
  • 验证证书:客户端验证服务器的SSL证书是否有效。

10. 优化性能

浏览器会进行一些性能优化,以提高页面加载速度和用户体验:

  • 缓存:缓存常用资源以减少重复加载。
  • 预加载:提前加载可能用到的资源。
  • 压缩:对资源进行压缩以减少传输的数据量。
  • 使用HTTP/2:HTTP/2支持多路复用、头部压缩等特性,提高传输效率。

通过这些详细的步骤,输入URL到页面完全展示的整个过程得以实现。理解这个过程不仅有助于提升前端开发的技术水平,也有助于优化页面加载速度,提高用户体验。

相关推荐
前端拾光者30 分钟前
利用D3.js实现数据可视化的简单示例
开发语言·javascript·信息可视化
Json_181790144801 小时前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
大数据编程之光1 小时前
Flink Standalone集群模式安装部署全攻略
java·大数据·开发语言·面试·flink
风尚云网1 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子02041 小时前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing1 小时前
React核心功能详解(一)
前端·react.js·前端框架
捂月1 小时前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆1 小时前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge
Smartdaili China1 小时前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理
秦老师Q1 小时前
「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用
前端·chrome·edge