高级前端开发面试题及详细答案.docx

高级前端开发面试题及详细答案

一、基础深度考察（核心必问，区分初级与高级）

1.请详细说明浏览器的渲染机制，以及重排（Reflow）和重绘（Repaint）的区别、触发场景，如何优化？

参考答案：

浏览器渲染核心流程（4步，无多余废话）：

1.解析HTML生成DOM树，解析CSS生成CSSOM树（两者独立进行）；

2.将DOM树与CSSOM树合并，生成渲染树（RenderTree），只包含可见节点（隐藏节点如display:none不会进入渲染树，visibility:hidden会进入）；

3.布局（Layout）：根据渲染树计算每个节点的位置、尺寸（这一步就是重排）；

4.