用户打开浏览器，输入 baidu.com，页面展示百度首页。整个过程发生了什么
总述
1、输入网址。
2、浏览器查找域名的IP地址。
- 浏览器给web服务器发送一个HTTP请求
- 网站服务的永久重定向响应
- 浏览器跟踪重定向地址。 现在，浏览器知道了要访问的正确地址，所以它会发送另一个获取请求。
- 服务器“处理”请求，服务器接收到获取请求，然后处理并返回一个响应。
- 服务器发回一个HTML响应
- 浏览器开始显示HTML
- 浏览器发送请求，以获取嵌入在HTML中的对象。在浏览器显示HTML时，它会注意到需要获取其他地址内容的标签。这时，浏览器会发送一个获取请求来重新获得这些文件。这些文件就包括CSS/JS/图片等资源，这些资源的地址都要经历一个和HTML读取类似的过程。所以浏览器会在DNS中查找这些域名，发送请求，重定向等等…
DNS查找过程
DNS查找过程如下：
1.浏览器缓存 – 浏览器会缓存DNS记录一段时间。 有趣的是，操作系统没有告诉浏览器储存DNS记录的时间，这样不同浏览器会储存个自固定的一个时间（2分钟到30分钟不等）。
2.系统缓存 – 如果在浏览器缓存里没有找到需要的记录，浏览器会做一个系统调用（windows里是gethostbyname）。这样便可获得系统缓存中的记录。
3.路由器缓存 – 接着，前面的查询请求发向路由器，它一般会有自己的DNS缓存。
4.ISP（互联网服务提供商） DNS 缓存 – 接下来要check的就是ISP缓存DNS的服务器。在这一般都能找到相应的缓存记录。
1、三次握手
这里写图片描述
三次握手的过程如下：
- 客户端A 发送SYN（seq = x）报文给服务器B，然后进入SYN_SENT状态；
- B收到SYN报文，回应一个SYN（seq = y） ACK （ACK = x + 1）报文，进入SYN_RCVD状态；
- A收到SYN报文后，回应一个ACK（ACK = y + 1），进入ESTABLISHED状态；B收到ACK报文后，进入ESTABLISHED状态
三次握手后，A和B成功地建立了连接，可以开始传输数据了~
2、四次挥手
四次挥手的过程如下：
- 客户端A上的某个进程，主动关闭连接，发送FIN（seq = u）报文给B，然后进入FIN_WAIT_1状态；
- B收到FIN报文，回应一个ACK （ACK = u + 1）报文，进入CLOSED_WAIT状态；A收到FIN报文，进入FIN_WAIT_2状态；
- B向A发送FIN（seq = v）报文，进入LAST_ACK状态；
- A收到FIN报文后，向B发送ACK(ACK = v + 1)报文，进入TIME_WAIT状态
四次挥手后，A和B成功地断开了连接~
这里写图片描述
形象介绍（https://blog.csdn.net/qq_36783216/article/details/78063280）
具体介绍（https://blog.csdn.net/peter_teng/article/details/52775960）
浏览器渲染过程
1.处理 HTML 标记并构建 DOM 树。
2.处理 CSS 标记并构建 CSSOM 树。
3.将 DOM 与 CSSOM 合并成一个渲染树。
4.根据渲染树来布局，计算出每个节点在屏幕中的位置。
5.将各个节点绘制到屏幕上。
为什么css放在head里，js放在body后
1.css会阻塞渲染，放在head里可以尽快下载，缩短首次渲染时间
2.js会阻塞解析和渲染，而且要等css下载结束才执行。所以放到最后等页面渲染完毕执行，减少页面阻塞时间。而且放在前面会无法访问到它的一些元素
网友评论