html页面从请求到完全展示的过程详解-灵析社区

页面请求到展示的过程涉及到客户端（浏览器）与服务器之间的交互以及浏览器内部的一系列处理步骤，以下是这个过程的详细分解：

用户操作与请求发起：用户在地址栏输入网址或点击链接后，浏览器接收用户的请求指令。浏览器解析URL，确定服务器域名及路径，并检查缓存。如果缓存中有对应的有效响应，则可以直接从缓存中读取并展示页面，否则进入下一步。
DNS 解析：如果没有缓存，浏览器需要首先查找域名对应的IP地址。它会向DNS服务器发送DNS查询请求，获取服务器的IP地址。
TCP 连接建立：获取到IP地址后，浏览器与服务器之间建立TCP连接（通常是三次握手）。
发送HTTP请求：建立连接后，浏览器构造一个HTTP请求报文，包括请求行（例如 GET /index.html HTTP/1.1）、请求头部（包含Cookie、User-Agent等信息）以及可能有的请求体，然后将其发送给服务器。
服务器处理请求：服务器收到请求后，根据请求头和请求行的内容进行处理，找到对应的资源（HTML文件、CSS、JavaScript等）。
服务器响应：服务器将找到的资源打包成HTTP响应报文，其中包括状态码（如200 OK）、响应头部（Content-Type、Set-Cookie等）以及响应主体（即网页内容）。
浏览器接收响应：浏览器接收到HTTP响应，开始解析响应头部信息，查看状态码是否正常，根据Content-Type决定如何处理响应主体。
渲染流程：对于HTML响应：浏览器开始解析HTML文档构建DOM树（Document Object Model），并在解析过程中遇到外部CSS和JavaScript资源时发起新的请求下载这些资源。在DOM树构建的同时，浏览器还会创建CSSOM（CSS Object Model），并将DOM与CSSOM合并成渲染树（Render Tree）。渲染树构建完成后，浏览器计算各节点在屏幕上的确切位置和尺寸（布局阶段，Layout/Flexbox/GRID），接着执行绘制操作（Painting），将渲染树的内容按照层叠上下文（Paint Layer）绘制到屏幕上。JavaScript脚本可能会改变DOM结构或CSS样式，导致重新渲染或回流。
资源加载完成与事件绑定：等待所有资源（如图片、字体等）加载完毕，或者DOMContentLoaded事件触发，此时大部分DOM已经准备就绪，JavaScript脚本可以执行。脚本执行过程中可能会进一步修改DOM或CSSOM，从而触发额外的渲染工作。
页面完全展示：当所有内容加载完成并且渲染完毕后，页面对用户可见，且用户可以与页面进行交互。此时，window.onload事件也可能已触发，表明整个页面的所有资源（包括图片等非脚本依赖资源）都已完成加载。

以上就是从用户请求到页面完全展示的基本流程，其中每个环节都可能存在性能优化点，以提升用户体验。