知方号

知方号

前端页面加载流程

前端页面加载流程?

用户输入网址(假设是个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. 关闭连接:用户关闭与服务器的连接。

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至lizi9903@foxmail.com举报,一经查实,本站将立刻删除。

上一篇 没有了

下一篇没有了