输入URL到构建全流程的经历

输入URL到构建全流程的经历

1. 在用户输入URL后，浏览器会自动检查地址完整性，补全漏写的协议等;
2. 通过DNS把域名解析成服务器IP地址，得到地址后，客户端和服务端建立TCP连接，进行三次握手；
3. 客户端会通过IP地址向服务端发送一个http请求，服务端在80端口接收到该请求后，返回HTTP报文给到浏览器;
4. 浏览器解析报文内容，并继续搜索页面是否还有其它请求，有则继续通过IP地址向服务端发送http请求；
5. 在接受到服务器返回的内容后，浏览器解析渲染页面；
6. 所有请求都完成后，客户端和服务端断开连接，进行四次挥手。

浏览器渲染

构建 DOM 树、CSSOM、布局阶段、分层、绘制、分块、光栅化和合成

1. 渲染进程将HTML内容转换为浏览器可以理解的DOM树；渲染进程将CSS样式转化为CSSOM，计算出DOM节点样式。两者结合生成 render tree 渲染树。
2. 创建布局树layout tree，计算布局信息
3. 对布局树进行分层，生成分层树layer tree
4. 每个图层生成绘制列表，并提交到合成线程
5. 绘制列表是记录绘制指令的列表，比如每个元素的背景、边框都是一条单独的指令。
6. 合成线程将图层分成图块，并在光栅化线程池中将图块转化为位图

• 图块：把整个浏览器分成小块，方便浏览器先加载可视区域
• 位图：即栅格图像，是由像素的单个点组成。这些点可以进行不同的排列和染色以构成图样。
• 这个过程会使用GPU加速

7. 合成线程发送绘制图块命令给浏览器进程。
8. 浏览器进程根据命令生成页面，并显示到显示器上。