浏览器渲染顺序_浏览器渲染 js,html,css 的顺序-CSDN博客

本文链接：https://blog.csdn.net/Absurd_people/article/details/126623483

本文介绍了浏览器渲染界面涉及的线程，包括GUI渲染线程、JS引擎线程、事件触发线程、定时器触发线程和异步HTTP请求线程。详细讲解了浏览器渲染顺序：解析HTML为DOM树、构建CSSOM、生成渲染树、布局和绘制。同时阐述了DOM树、CSSOM和渲染树的构建，以及布局与绘制的过程，对前端性能优化有重要指导意义。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

浏览器渲染界面包含那些线程。

GUI渲染线程
当浏览器收到响应的html后，该线程开始解析HTML文档构建DOM树，解析CSS文件构建CSSOM，合并构成渲染树，并计算布局样式，绘制在页面上(该处可深挖的坑，HTML解析规则，CSS解析规则，渲染流程细节)
当界面样式被修改的时候可能会触发reflow和repaint，该线程就会重新计算，重新绘制，是前端开发需要着重优化的点

JS引擎线程
JS内核，也称JS引擎（例如V8引擎），负责处理执行javascript脚本程序，
由于js是单线程（一个Tab页内中无论什么时候都只有一个JS线程在运行JS程序），依靠任务队列来进行js代码的执行，所以js引擎会一直等待着任务队列中任务的到来，然后加以处理。

事件触发线程
归属于渲染（浏览器内核）进程，不受JS引擎线程控制。主要用于控制事件（例如鼠标，键盘等事件），当该事件被触发时候，事件触发线程就会把该事件的处理函数添加进任务队列中，等待JS引擎线程空闲后执行

定时器出发线程
传说中的setInterval与setTimeout所在线程
浏览器的定时器并不是由JavaScript引擎计数的，因为JavaScript引擎是单线程的, 如果处于阻塞线程状态就会影响计时的准确，