前端24秋招总结（2）

一笑而过2222：当在网页上点击一个URL后，大致会经历以下过程最终实现网页渲染： 一、URL解析与请求发起 1. URL解析 - 浏览器首先对点击的URL进行解析。URL一般由协议（如http://或https://）、域名（如www.example.com）、端口号（如果有指定，默认http为80，https为443）、路径（如/index.html）以及查询参数（如?id=123）等部分组成。浏览器会根据解析出的信息确定要请求的目标服务器和资源路径。 2. 检查缓存 - 浏览器会检查本地缓存，包括浏览器缓存和可能存在的系统级缓存（如DNS缓存）。如果缓存中有与该URL对应的有效资源（如HTML文件、图片、CSS文件、JavaScript文件等），浏览器会直接使用缓存内容，不再发起网络请求，这可以大大提高网页加载速度。 3. DNS解析（如果需要） - 如果缓存中没有对应的有效资源，且URL中的域名需要解析，浏览器会进行DNS解析。DNS解析是将域名转换为对应的IP地址的过程。浏览器会首先查询本地DNS缓存，如果没有找到，会向本地DNS服务器发送请求，如果本地DNS服务器也没有找到，会继续向上一级DNS服务器查询，直到找到对应的IP地址。 4. 建立连接 - 浏览器使用解析出的IP地址和URL中的端口号（如果有指定，默认情况如上述），通过TCP/IP协议建立与服务器的连接。这一过程包括三次握手，即客户端向服务器发送一个SYN包，服务器收到后向客户端发送一个SYN + ACK包，客户端再向服务器发送一个ACK包，完成连接建立。 二、服务器响应 1. 接收请求并处理 - 服务器接收到浏览器的请求后，会根据请求的URL和方法（如GET、POST等）进行相应的处理。如果请求的是一个静态资源（如HTML文件、图片、CSS文件、JavaScript文件等），服务器会直接从文件系统中获取该资源并进行相应的处理；如果请求的是一个动态资源（如一个通过服务器端脚本生成的页面），服务器会执行相应的脚本代码，从数据库或其他数据源获取数据，然后生成相应的HTML等文件内容。 2. 构建响应 - 服务器将处理后的结果构建成一个HTTP响应报文。响应报文包括响应状态码（如200表示成功、404表示未找到资源等）、响应头（如Content-Type指定内容类型，如text/html；Cache-Control指定缓存策略等）和响应体（即网页的实际内容，如果是HTML文件，则是HTML代码）。 3. 发送响应 - 服务器将构建好的HTTP响应报文发送回浏览器。 三、浏览器接收响应并处理 1. 接收响应 - 浏览器接收到服务器发送的响应报文后，首先根据响应状态码判断请求是否成功。如果状态码为200等成功状态码，浏览器会继续处理响应内容；如果是404等失败状态码，浏览器会根据自身的设置进行相应的处理，如显示错误页面。 2. 解析响应头 - 浏览器会解析响应头中的信息。根据Content-Type等信息确定如何处理响应体。例如，如果Content-Type为text/html，浏览器会知道要解析HTML文件；如果是image/jpeg，浏览器会知道要显示一张JPEG图片。 3. 处理响应体（HTML文件处理为例） - 如果响应体是一个HTML文件，浏览器会开始解析HTML代码。在解析HTML过程中，会遇到各种标签和元素。 - 当遇到CSS和JavaScript文件的引用时（如通过标签引用CSS文件，通过标签引用JavaScript文件），浏览器会再次发起请求获取这些资源。对于CSS文件，浏览器会解析并构建CSSOM（CSS Object Model）；对于JavaScript文件，浏览器会下载并执行脚本，脚本可能会修改DOM（Document Object Model）和CSSOM。 四、网页渲染 1. 构建渲染树 - 浏览器在构建完DOM和CSSOM后，会将两者结合生成渲染树（Render Tree）。渲染树只包含需要显示在页面上的元素和其对应的样式信息。它会去除DOM中那些不需要显示的元素（如标签内的大部分元素）和CSSOM中那些没有应用到页面元素的样式信息。 2. 布局 - 浏览器根据渲染树进行布局（Layout），确定每个元素在屏幕上的位置和大小。这一过程涉及到计算元素的坐标、尺寸以及与其他元素的相对位置关系等。 3. 绘制 - 最后，浏览器进行绘制（Paint），将元素绘制到屏幕上，完成网页的渲染。在绘制过程中，可能会涉及到分层绘制、图形加速等技术，以提高绘制效率和质量。