大家好，今天给大家分享一个前端面试中老生常谈的问题：浏览器是如何渲染的？其实渲染过程十分复杂，可Neng写好几篇大论dou讲不完其中的每个细节，但是本文会以通俗易懂的方式来帮你理清浏览器渲染的基本流程框架，让你对渲染的过程有基本的认识。

说实话，咱就是说浏览器渲染页面的过程，通常被称为“关键渲染路径”。这个过程并非一蹴而就，而是一条精密的流水线。

当浏览器接收到服务器返回的 HTML 文件后解析器会开始工作。这里有一个关键特性：HTML 是流式解析的。这意味着浏览器不需要等待整个 HTML 文件下载完成，而是边下载边解析，逐步生成 DOM 树。

在解析过程中，Ru果遇到 <link> 或 <style> 标签，浏览器会发起 CSS 请求。CSS 解析器会将样式规则转换成 CSSOM 树。

注意： CSS 解析不会阻塞 DOM 构建，但会阻塞渲染。因为浏览器需要确保样式加载完毕后再绘制页面以避免出现“无样式内容闪烁”。

Ru果在 HTML 解析过程中遇到 <script> 标签，默认情况下解析器会暂停 DOM 构建，将控制权交给 JavaScript 引擎。

为什么会有这个机制？因为 JavaScript 拥有修改 DOM 树的Neng力。Ru果在解析过程中执行脚本，而脚本又修改了尚未解析的后续内容，就会导致状态不一致。因此，浏览器必须等待脚本执行完毕，才Neng安全地继续解析。

当 DOM 树和 CSSOM 树dou构建完成后浏览器会将它们合并生成渲染树。

关键点： 渲染树只包含需要显示的节点。这一步决定了页面上究竟有哪些元素需要被处理。

布局，也常被称为回流。浏览器根据渲染树，计算每个节点在屏幕上的精确位置和大小。这是一个计算密集型操作，涉及盒模型、浮动、定位等复杂规则。

绘制，也称为重绘。浏览器根据布局树，将每个节点的颜色、背景、边框、阴影等视觉信息填充到像素中。绘制通常按顺序进行，需要考虑遮挡关系和透明度。

现代浏览器会将页面拆分成多个图层。例如具有 transformopacityposition: fixed 属性的元素，或者 <video><canvas> 等元素，往往会单独成为合成层。

流程：HTML -> DOM Tree + CSSOM Tree -> Render Tree -> Layout -> Paint -> Composite。理解了渲染流程，我们就Neng针对性地优化每个环节。

为啥有些网站百度不收录呢？其实原因有hen多，比如网站结构不友好、内容质量不高，或者外部链接太少等。你得检查检查，是不是这些原因导致的。

问题： 脚本阻塞导致首屏渲染延迟。对策： 合理使用<script>标签属性，比如defer 或async 。将非关键脚本移至底部，或优先使用defer 。

问题： 首屏资源过多，加载缓慢。对策：

代码拆分，利用 Webpack 等工具按需加载模块；

懒加载图片或 iframe ；

// 示例：使用 IntersectionObserver 实现图片懒加载const observer = new IntersectionObserver => { entries.forEach { const img = entry.target; img.src = img.dataset.src; observer.unobserve; } });});

问题： 选择器效率低，样式冗余。对策：

减少嵌套深度；尽量少用通配符；避免重复定义样式； b>