Chaoszhu'Blog

Appearance

浏览器输入URL地址后发生的事情 ​

浏览器必知必会 备用链接

基本过程 ​

  1. DNS域名解析 (先查本地hosts有没有域名与IP对应关系，没有则向DNS服务商获取IP地址）
  1. 建立TCP连接（传输层）
  1. 发送HTTP请求（应用层）
  1. 服务器处理请求
  1. 返回响应结果
  1. 关闭TCP连接
  1. 浏览器解析HTML
  1. 浏览器布局渲染

详解参考 ​

https://segmentfault.com/a/1190000012092552

1、先查本地hosts有没有域名与IP对应关系，没有则向DNS服务商获取IP地址

2、建立TCP连接需要与服务器进行三次握手。

  • 客户端发送一个SYN标志的数据包给服务端--->服务端收到后，回传一个带有SYN/ACK标志的数据包以示传达确认信息，最后客户端再回传一个带ACK标志的数据包，代表握手结束，连接成功。

3、发送请求【注意：请求头】

4、服务器处理请求

5、返回响应结果【注意：响应头】

6、四次握手，关闭TCP连接

7、解析HTML 解析HTML生成DOM树 --> 解析CSS生成CSS对象模型(CSSOM) --> 整合生成Render Tree --> 遇到<script>则暂停渲染(防止js更改dom) --> 根据Render Tree渲染页面

补充：css放head、script放body的原因 ​

浏览器解析html文档是从上往下的

  • 解析DOM元素后再加载css会造成页面样式跳动的问题，因此css需要放在head中加载【不靠谱解释：浏览器生成Render Tree渲染的时候会整合现有的DOM树与CSS对象模型(CSSOM)】
  • 浏览器解析到script标签后会下载、解析和执行，同时会阻塞后面的资源加载。如果放head中加载js文件，会造成较长的白屏时间