2021-06-22 一次完整的HTTP请求流程以及页面优化-优快云博客

本文链接：https://blog.youkuaiyun.com/rowlet/article/details/117966974

本文详细阐述了浏览器地址栏输入URL后发生的一系列步骤，包括DNS查询、TCP连接建立、HTTP请求发送、服务器响应及网页解析渲染。同时，讨论了网站优化策略，如减少DNS查询、合并HTTP请求、压缩资源、提前渲染和减轻解析器阻塞，以提升网页加载速度和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一次完整的HTTP请求流程以及页面优化

面试题:浏览器地址栏输入URL并回车后发生了什么?

简答:

1.浏览器根据请求的URL交给DNS域名解析,找到真实的IP,向服务器发起请求
2.服务器交给后台处理完成后返回数据,浏览器接收(静态)文件
3.浏览器对加载到的资源进行语法解析,建立相应的内部数据结构(如DOM)
4.载入解析到的资源,渲染页面

1.查询IP地址

2.建立TCP连接

3.浏览器发起http请求

4.服务器后台操作并做出http响应

5.网页的解析与渲染

1.客户端浏览器加载html文件,从上到下解析DOM tree
2.遇到css文件,css中的url发起(第二次)http请求
3.TCP连接未关闭,可复用,直接处理http请求
4.http连接是无状态连接,客户端与服务端要重新发起请求和响应
5.请求css的过程中,解析器连续解析URL,直到遇上<script>
6.script可能改变DOM tree结构,解析器停止生成DOM tree,被js阻塞,等待js发起(第三次)http请求,然后加载
7.由于css文件可能影响JS文件的执行结果,因此需要等css文件加载完成后再执行
8.DOM tree 和CSSOM数结合形成Render Tree(渲染树)
9.Render tree 会被css阻塞,其生成后,先布局,绘制渲染树的节点属性(如位置,宽度等),然后渲染页面就会呈现信息
10.向下继续渲染,另一个js文件,改变DOM tree,Render tree从被改变的DOM开始渲染
11.向下继续渲染,碰到<img>,浏览器发起http请求,不等img加载完成就继续往下渲染(之后会回头继续渲染此部分)
12.DOM tree遇到<html>后解析停止,渲染结束