从输入url到页面加载的全过程

从输入url到页面加载的过程

1. 浏览器查看缓存（浏览器缓存、系统缓存、路由缓存），如果缓存中有，直接在屏幕上展示页面内容。
2. 如果缓存中没有，浏览器向DNS服务器请求解析url中的域名对应的ip地址。
3. 解析出ip地址后，根据ip地址和默认端口80和服务器建立TCP连接（如果有HTTPS，多一层TLS握手）。
4. 浏览器向服务器发出读取文件的HTTP请求
5. 服务器对浏览器请求做出响应，并把对应的html文本发送给浏览器
6. 释放tcp链接
7. 浏览器将HTML文本内容展示在屏幕上。

浏览器渲染的详细过程

1. 解析文本
2. 构建DOM树和CSSOM树
3. 生成渲染树：从DOM树的根节点开始，遍历每个可见节点，对于每个可见节点，找到CSSOM树中对应的规则并应用，根据每个可见节点及其对应样式，组合生成渲染树。
4. 根据生成的渲染树，进行回流，得到节点的集合信息。
5. 根据渲染树及其回流得到的集合信息，得到节点的绝对像素，绘制页面像素信息。
6. 浏览器将各层的信息发送给GPU（图形处理器），GPU将各层合成并显示在屏幕上。
7. 加载js脚本，加载完成解析js脚本。

回流

当渲染树中的一部分或全部元素的尺寸、布局、隐藏等改变时，浏览器重新渲染部分DOM或全部DOM的过程

重绘

当页面元素样式改变不影响元素在文档流中的位置时，如color、visibility等，浏览器只会将新的样式赋予元素并进行重新绘制的操作。