浏览器输入url后经历的过程

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

一、过程简述

1. 首先，在浏览器地址栏中输入url
2. 浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若 没有，则跳到第三步操作。
3. 在发送http请求前，需要域名解析(DNS解析)，解析获取相应的IP地址。
4. 浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手。
5. 握手成功后，浏览器向服务器发送http请求，请求数据包。
6. 服务器处理收到的请求，将数据返回至浏览器
7. 关闭TCP连接（四次挥手）
8. 浏览器收到响应结果解析html代码并请求资源(js、css、图片等)
9. 浏览器进行页面布局渲染

---

二、发送http请求前先进行DNS域名解析

DNS，英文是Domain Name System，中文叫域名系统，是Internet的一项服务，他将域名和IP地址相互映射的一个分布式数据库

主要过程如下：

1. 从浏览器缓存中查找域名www.google.com的IP地址
2. 在浏览器缓存中没找到，就在操作系统缓存中查找，这一步中也会查找本机的hosts看看有没有对应的域名映射（当然已经缓存在系统DNS缓存中了）
3. 在系统中也没有的话，就到你的路由器来查找，因为路由器一般也会有自己的DNS缓存

如果以上都没有找到，则继续往下向dns域名服务器查询

• 用户电脑的解析器向LDNS（也就是Local DNS，互联网服务提供商ISP），发起域名解析请求，查询www.google.com的IP地址，这是一个递归查找过程
• 在缓存没有命中的情况下，LDNS向根域名服务器.查询www.google.com的IP地址，LDNS的查询过程是一个迭代查询的过程
• 根告诉LDNS，我不知道www.google.com对应的IP，但是我知道你可以问com域的授权服务器，这个域归他管
• LDNS向com的授权服务器问www.google.com对应的IP地址
• com告诉LDNS，我不知道www.google.com对应的IP，但是我知道你可以问google.com域的授权服务器，这个域归他管
• LDNS向google.com的授权服务器问www.google.com对应的IP地址
• google.com查询自己的ZONE文件（也称区域文件记录），找到了www.google.com对应的IP地址，返回给LDNS
• LDNS本地缓存一份记录，把结果返回给用户电脑的解析器
• 在这之后，用户电脑的解析器拿到结果后，缓存在自己操作系统DNS缓存中，同时返回给浏览器，浏览器依旧会缓存一段时间。

注意

域名查询时有可能是经过了CDN调度器的（如果有cdn存储功能的话）
而且，需要知道dns解析是很耗时的，因此如果解析域名过多，会让首屏加载变得过慢，可以考虑dns-prefetch优化

三、三次握手

建立TCP连接一开始都要经过三次握手：

第一次握手，请求建立连接，发送端发送连接请求报文
第二次握手，接收端收到发送端发过来的报文，可知发送端现在 要建立联机。然后接收端会向发送端发送一个报文
第三次握手，发送端收到了发送过来的报文，需要检查一下返回的内容是否是正确的；若正确的话，发送端再次发送确认包

---

四、四次挥手

理解为：

客户端：我已经关闭了向你那边的主动通道了，只能被动接收了
服务端：收到通道关闭的信息
服务端：那我也告诉你，我这边向你的主动通道也关闭了
客户端：最后收到数据，之后双方无法通信

五、TCP的连接与断开

---

六、浏览器渲染过程

获取到资源HTML、CSS、js ->构建DOM树 > 构建styleSheets树 > 布局（构建render树） > 分层 > 绘制 >分块 > 光栅化 > 合成

1. 将HTML转换为浏览器可识别的解构 — DOM树
2. 将 CSS 文本转换为浏览器可以识别的结构 — styleSheets
3. 布局：将两树合并，生成render树 — Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。
4. 分层：浏览器为一些特殊的节点建立一个对应图层，生成图层树（LayerTree），并将这些图层合并 — Layout，顾名思义就是计算出每个节点在屏幕中的位置。
5. 绘制：图层创建完后重叠在一起 — 即遍历render树，并使用UI后端层绘制每个节点。
6. 分块：根据视口结合渲染进程将图层分成若干图块
7. 光栅化：在光栅化线程池中将图块转换成位图。
8. 合成：合成线程发送绘制图块命令 DrawQuad 给浏览器进程。浏览器进程根据 DrawQuad 消息生成页面，并显示到显示器上。

渲染细节

1. 生成DOM树
   DOM树的构建过程是一个深度遍历过程：当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。DOM树的根节点就是document对象。
   DOM树的生成过程中可能会被CSS和JS的加载执行阻塞，当HTML文档解析过程完毕后，浏览器继续进行标记为deferred模式的脚本加载，然后就是整个解析过程的实际结束触发DOMContentLoaded事件，并在async文档文档执行完之后触发load事件。
2. 生成Render树
   生成DOM树的同时会生成样式结构体CSSOM（CSS Object Model）Tree，再根据CSSOM和DOM树构造渲染树Render Tree，渲染树包含带有颜色，尺寸等显示属性的矩形，这些矩形的顺序与显示顺序基本一致。从MVC的角度来说，可以将Render树看成是V，DOM树与CSSOM树看成是M，C则是具体的调度者，比HTMLDocumentParser等。
   可以这么说，没有DOM树就没有Render树，但是它们之间不是简单的一对一的关系。Render树是用于显示，那不可见的元素当然不会在这棵树中出现了，譬如 。除此之外，display等于none的也不会被显示在这棵树里头，但是visibility等于hidden的元素是会显示在这棵树里头的。
3. DOM树与Render树
   DOM对象类型很丰富，什么head、title、div，而Render树相对来说就比较单一了，毕竟它的职责就是为了以后的显示渲染用嘛。Render树的每一个节点我们叫它渲染器renderer。