前端页面加载流程

前端页面加载流程？

用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件。

浏览器开始载入html代码，发现标签内有一个标签引用外部CSS文件。

浏览器又发出CSS文件的请求，服务器返回这个CSS文件。

浏览器继续载入html中部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了。

浏览器在代码中发现一个标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码。

服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码。

浏览器发现了一个包含一行Javascript代码的script标签，赶快运行它。

Javascript脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个style：（style.display=”none”）。杯具啊，突然就少了这么一个元素，浏览器不得不重新渲染这部分代码。

终于等到了html结束符的到来，浏览器泪流满面……

等等，还没完，用户点了一下界面中的“换肤”按钮，Javascript让浏览器换了一下＜link＞标签的CSS路径。

浏览器召集了在座的各位div span ul li们，“大伙儿收拾收拾行李，咱得重新来过……”，浏览器向服务器请求了新的CSS文件，重新渲染页面。

主要包括以下步骤：

1.浏览器输入网址，发出HTTP请求。

2.服务器返回HTML文件。

3.浏览器开始载入HTML代码，解析HTML并构建DOM树。

4.浏览器载入HTML中的CSS文件，并构建CSSOM树。

5.浏览器将DOM树和CSSOM树合并为一棵渲染树。

6.浏览器开始渲染渲染树，将渲染树中的每个节点都绘制到屏幕上。

7.当页面加载完成后，浏览器会继续监控页面元素，如果页面中有异步加载的内容（如AJAX请求），浏览器会在后台进行异步加载。

总体来说，前端页面加载流程包括输入网址、发出HTTP请求、返回HTML文件、构建DOM树、构建CSSOM树、合并渲染树、渲染页面、监控页面变化等步骤

前端页面的加载过程可以分为以下几个步骤：

1. 发起请求：用户在点击链接或访问页面时，浏览器会发起一个请求，请求的URL包含页面所需的资源和内容。

2. DNS查询：浏览器首先会检查本地是否缓存了目标资源（如图片、字体等），如果有，则直接返回缓存内容，否则进行下一步。

3. 建立连接：如果本地没有缓存资源，浏览器将向服务器发起一个HTTP请求，请求目标资源的URL。

4. 发送请求：浏览器将请求目标服务器，请求的参数（如请求头、请求体等）将包含在请求消息中发送。

5. 接收响应：服务器接收到请求后，会发送一个HTTP响应，响应包含目标的资源（如图片、样式、脚本等）。

6. 下载资源：浏览器接收到响应后，开始下载目标资源，包括资源文件、JavaScript等。

7. 渲染页面：资源下载完成后，浏览器将资源解析并渲染到页面上，生成页面呈现给用户。

8. 交互操作：用户与页面进行交互操作，如输入表单、选择文件等，这些操作将触发JavaScript事件，进一步优化页面的交互效果。

9. 关闭连接：用户关闭与服务器的连接。

在这个过程中，浏览器还会进行一系列的处理，如资源延迟加载、代码缓存、合并资源等，以提高页面的加载速度和用户体验。