这是前端面试的经典开放题，字节、腾讯、阿里前端面试几乎必问。它考察的不仅是渲染流程知识，更是你对前端性能优化的理解深度。回答的详细程度和侧重点直接反映你的技术水平。
网络阶段：DNS解析 → TCP三次握手 → TLS握手（HTTPS）→ HTTP请求/响应。可以提及DNS缓存、CDN、HTTP缓存策略。
解析阶段：浏览器将HTML解析为DOM树，遇到CSS则构建CSSOM。JS脚本默认阻塞DOM解析（除非使用async/defer）。
渲染树构建：将DOM和CSSOM合并，排除不可见元素（display:none），生成Render Tree。
布局（回流/Reflow）：计算渲染树中每个节点的精确位置和大小。
绘制和合成：Paint阶段将节点绘制为像素，Composite阶段将各图层通过GPU合成最终画面。
输入URL后，浏览器首先进行DNS解析获取IP地址（先查浏览器缓存→系统缓存→路由器缓存→ISP DNS→递归查询），然后建立TCP连接（三次握手），HTTPS还需TLS握手协商密钥。服务器返回HTML后，浏览器开始增量解析构建DOM树。遇到<link>标签时异步加载CSS并构建CSSOM——CSS不阻塞DOM解析但阻塞渲染。遇到<script>标签（无async/defer）时会停止DOM解析，等JS下载并执行完毕后继续，因为JS可能修改DOM结构。所以推荐将脚本放在body底部或使用defer属性。DOM树和CSSOM都构建完成后，浏览器将两者合并生成渲染树——display:none的元素不会进入渲染树，但visibility:hidden会（占据空间但不可见）。接下来是布局阶段（Layout/Reflow），从根节点开始递归计算每个元素的精确几何信息：位置、宽度、高度。任何改变元素尺寸或位置的操作都会触发回流，回流会沿DOM树向上传播影响父元素和兄弟元素，开销很大。然后是绘制阶段（Paint），将布局信息转化为实际像素——颜色、边框、阴影、文字。最后是合成阶段（Composite），浏览器将页面分成多个图层，使用GPU进行合成。带有transform、opacity、will-change的元素会被提升为独立合成层，修改这些属性只需重新合成，跳过布局和绘制，所以CSS动画用transform比用top/left性能好得多。性能优化方面：减少关键渲染路径的资源数量、批量读写DOM（避免强制同步布局）、使用requestAnimationFrame调度视觉更新、图片懒加载、CSS containment限制回流范围。
回答要有层次感，网络→解析→渲染→优化，逐层深入，面试官会根据你的回答深度来追问。
一定要区分回流（Reflow）和重绘（Repaint），这是最常见的追问点。
提到合成层和GPU加速是加分项，展示你对高性能动画的理解。
面试中如果某个阶段细节记不清，即答侠可以实时提供关键流程和术语。
改变元素尺寸（width/height/padding/margin）、修改DOM结构、读取offsetTop/scrollTop等布局属性（强制同步布局）、改变字体大小、窗口resize等。
都不阻塞HTML解析。async下载完立即执行，执行顺序不确定；defer下载完等HTML解析完再按顺序执行。defer更适合有依赖关系的脚本。
批量修改DOM（DocumentFragment或一次性修改className）、避免频繁读取布局属性、动画使用transform/opacity、离屏处理复杂DOM操作、使用CSS containment。