更新HTTP总结

onresize · Apr 21, 2024 · c0cfa51 · c0cfa51
1 parent 4230648
commit c0cfa51
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 6 deletions.
diff --git a/docs/.vuepress/public/image.webp b/docs/.vuepress/public/image.webp
diff --git a/docs/.vuepress/public/robots.txt b/docs/.vuepress/public/robots.txt
@@ -0,0 +1,2 @@
+User-agent: *
+Disallow:
diff --git a/docs/技术总结/踩坑总结/HTTP.md b/docs/技术总结/踩坑总结/HTTP.md
@@ -52,11 +52,12 @@ description: HTTP
   | 数据重传     | 有                 | 有            |
   | 拥塞控制     | 有                 | 有            |
 
-### `浏览器输入域名后的域名解析过程`  
-  - 当浏览器输入域名时、浏览器会先去解析域名、获取对应的ip地址、再去向这个ip发送请求
-  - 浏览器解析域名时、会先在本机上的hosts文件查找、如果找到了、就会向hosts文件中对应的ip地址发送请求
-  - 如果hosts文件找不到、就会向DNS发出域名解析的请求、再向DNS返回的ip地址发出请求
-- ##### 例：phpStudy开启nginx服务下创建的一个 `www.baidu.com` 的网站、如下图：
+### `浏览器输入域名发生了什么`  
+  > 当浏览器输入域之后可分为两个阶段：`网络通信` 和 `页面渲染`
+  - #### `1.网络通信阶段`
+  - 浏览器解析域名时、会依次在本机查找浏览器的域名缓存、hosts文件、如果在缓存中找到了、就直接返回、如果是在本地 hosts文件中找到了对应的ip域名映射、则直接向这个映射的ip发送请求、如果 hosts文件没找到ip域名映射关系、就会向DNS发出域名解析的请求、再向DNS返回的ip地址发出http请求
+  - 发送http请求(默认是http1.1)之后、接着就是去创建TCP连接(三次握手、数据传输、四次挥手)、然后服务器接收到数据并返回相应的文件资源
+- ##### 查找本地hosts文件的过程、例：phpStudy开启nginx服务下创建的一个 `www.baidu.com` 的网站、如下图：
 <p align="center">
   <img src="/AA_mdPics/server.min.png" />
 </p>
@@ -72,4 +73,9 @@ description: HTTP
 </p>
 
 - 常用场景：客户端主机hosts文件添加对应的ip、自定义的域名映射关联、去访问内网网站
-- 总之：hosts文件主要用于自定义域名和ip地址之间的映射关系、比如：本地开发用域名测试联调、没有添加ip映射的主机起到网站屏蔽作用
+- 总之：hosts文件主要用于自定义域名和ip地址之间的映射关系、比如：本地开发用域名测试联调、没有添加ip映射的主机起到网站屏蔽作用
+
+- #### `2.页面渲染阶段`
+- 请求成功之后、服务器返回浏览器 `HTML、CSS、JS、图片`等文件、根据不同浏览器的内核、渲染过程也不同
+- 接收进行 `HTML、CSS、JS文件解析`、当在解析HTML文档的时候、如果遇到script标签、会立即解析脚本、停止解析文档、因为js可能会去操作dom和css、继续解析文档会造成浪费、如果脚本是外部的、则会去等待下载完毕、在继续解析文档、也就是说JS脚本会阻塞HTML、CSS的渲染、脚本中包含操作DOM、CSS的的地方会分别解析、然后追加到DOM Tree 和 Style Rules（CSSOM: CSS Object Model）上
+- 再之后就是对样式进行计算、对DOM Tree进行布局、也叫回流