浏览器线程与浏览器渲染流程

1. 浏览器线程

1. js引擎线程(主线程)

• 主要负责执行JavaScript脚本，js是单线程异步，异步是由子线程完成，js引擎负责调度子线程。

2. GUI渲染线程

• 负责渲染浏览器界面，包括解析HTML、css、构建DOM树、渲染树、布局与绘制.

3. 事件监听线程

• 对事件进行处理

4. 计时器线程

• 负责定时, setInterval 和 setTimeout

5. 网络线程

• 负责处理http请求

当主线程空闲时，才会执行子线程

2. 浏览器渲染流程

1. 在浏览器中输入url(统一资源定位符)地址
2. 浏览器会进行HTTP / HTTPS请求 (DNS -> IP)
3. 建立tcp 三次握手、四次挥手
4. 服务器响应请求数据
5. 浏览器开始解析请求数据(html、css、JavaScript、img、)（渲染页面开始）

浏览器渲染页面

1. DOM Tree : 浏览器将HTML解析成树形结构的数据结构
2. CSS Rule Tree ： 浏览器将css解析成树形结构的数据
3. Render Tree：将DOM Tree 和 cssTree 进行合并形成Render Tree
4. layout : 根据Render Tree 计算出每一个节点在屏幕中的位置
5. painting：将布局的图像 画在屏幕上

• reflow(回流):改变元素宽高、位置都会引起dom树的重新布局和绘制
• repaint(重绘):改变某个元素的背景、边框颜色

注意：display：none 节点不会被加入到Render Tree中 ,会引起回流 ;
visibility：hidden 节点只会引起重绘

3. JavaScript执行机制

• 单线程：同一时间只能处理一件事
• JavaScript基于单线程异步运行，浏览器的事件驱动。

最后

以上就是野性抽屉为你收集整理的浏览器线程与浏览器渲染流程的全部内容，希望文章能够帮你解决浏览器线程与浏览器渲染流程所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。