第 1 卷

浏览器高频面试题（完整版）

1. 描述浏览器的基本功能以及它是如何加载并运行网页的

浏览器基本功能

1. 资源请求：向服务器发起HTTP/HTTPS请求，获取HTML、CSS、JS、图片、字体等网页资源；
2. 资源解析：解析HTML构建DOM树、解析CSS构建CSSOM树、解析执行JavaScript代码；
3. 页面渲染：结合DOM树和CSSOM树生成渲染树，完成布局、绘制，最终展示可视化页面；
4. 交互能力：处理用户鼠标、键盘、触摸等事件，执行JS交互逻辑，支持前进/后退、书签、缓存、

开发者工具等；

1. 安全防护：实现同源策略、XSS/CSRF防护、HTTPS加密、资源沙箱隔离等安全机制；
2. 附加能力：支持插件/扩展、本地存储（localStorage/sessionStorage）、Cookie管理、多标签页

隔离等。

浏览器加载运行网页核心流程

1. 解析URL，确定请求协议、域名、端口、路径，发起DNS解析获取服务器IP；
2. 与服务器建立TCP连接（HTTPS需额外TLS握手）；
3. 发送HTTP请求，服务器返回响应资源（HTML为主）；
4. 浏览器接收HTML，开始解析→渲染→执行流程；
5. 解析HTML过程中发现外链资源（CSS/JS/图片），依次发起请求并加载；
6. 资源加载完成后，完成页面渲染和JS执行，响应用户交互。
7. 浏览器内核是什么？常见的浏览器内核有哪些？

浏览器内核定义

浏览器内核（Rendering Engine，渲染引擎）是浏览器的核心组件，负责解析HTML/CSS、执行JS、布局计算、页面绘制，决定了浏览器的渲染能力、兼容性和性能。

注：现代浏览器内核包含渲染引擎+JS引擎，比如Chrome的Blink（渲染）+V8（JS）。

常见浏览器内核分类

1. WebKit：苹果Safari、旧版Chrome/Opera，开源内核，轻量高效，适配移动端/桌面端。

• 传统内核（逐步淘汰）

1. Gecko：火狐Firefox专属内核，完全开源，兼容性强，渲染逻辑独立；
2. Trident：IE浏览器专属内核，又称MSHTML，兼容性差、性能低，已被Edge放弃；
3. Presto：旧版Opera内核，渲染速度极快，但维护成本高，后续替换为Blink。

• 国产自研内核（基于开源二次开发）
• 麒麟芯：适配国产系统，基于WebKit/Blink定制；
• 极速内核：国内主流浏览器均采用「Blink+兼容模式（Trident）」双内核。

3. 解释一个网页从请求开始到最终显示给用户的完整过程

核心流程（10步完整版）

1. URL解析：浏览器解析用户输入的URL，判断是地址/搜索词，拼接完整请求地址；
2. DNS域名解析：将域名（如www.baidu.com）转换为服务器IP地址，优先查本地DNS缓存→运营

商DNS→根DNS；

1. TCP连接建立：基于IP地址与服务器建立TCP连接，执行三次握手（确保通信双向通畅）；
2. HTTPS TLS握手（可选）：若为HTTPS协议，额外完成TLS加密握手，生成会话密钥，保证传输

安全；

1. HTTP请求发送：浏览器向服务器发送请求报文（包含请求头、请求体、请求方法等）；
2. 服务器响应处理：服务器接收请求，处理业务逻辑，返回响应报文（包含状态码、响应头、资源内

容）；

1. TCP连接释放：请求完成后，执行四次挥手释放TCP连接（HTTP/1.1默认长连接，可复用）；
2. 资源解析：浏览器解析响应的HTML，同时加载外链CSS/JS/图片/字体等资源；
3. 页面渲染：构建DOM树→CSSOM树→渲染树→布局（回流）→绘制（重绘）→合成显示；
4. 交互就绪：JS执行完成，绑定事件监听，页面进入可交互状态，浏览器维护缓存/历史记录。

4. 描述浏览器解析并展示HTML、CSS和JavaScript的基本过程

第一步：解析HTML → 构建DOM树

• 浏览器从服务器获取HTML文本，按从上到下的顺序逐行解析；
• 遇到标签（如 <div> / <p>）创建DOM节点，遇到文本创建文本节点；

• 解析过程中遇到语法错误会自动容错，最终形成DOM树（文档对象模型），描述页面的结构和层级

• 解析中发现外链资源（CSS/JS/图片），立即发起并行请求加载（JS会阻塞后续解析，特殊标签除

外）。

第二步：解析CSS → 构建CSSOM树

• 浏览器解析CSS文件/内联样式/行内样式，处理样式规则（选择器、属性、值）；
• 解析过程中处理样式继承、优先级、浏览器前缀，解决样式冲突；

• 最终形成CSSOM树（CSS对象模型），描述页面所有元素的样式规则，且CSSOM树只读（修改样

式会重新生成）。

第三步：执行JavaScript → 操作DOM/CSSOM

• JS引擎（如V8）解析执行JS代码，按执行上下文顺序执行；

• JS可直接修改DOM树（如增删节点）、修改CSSOM树（如修改样式），也可发起异步请求、绑定

事件、操作存储；

• 若JS修改了DOM/CSSOM，会触发后续的渲染树重建、回流/重绘。

第四步：渲染树构建 → 布局 → 绘制 → 显示

1. 构建渲染树：结合DOM树和CSSOM树，过滤不可见节点（如 display:none、head标签），为

可见节点绑定样式，生成渲染树；

1. 布局（Layout/回流）：计算渲染树中所有节点的位置、大小、间距，确定每个元素在页面中的坐

标；

1. 绘制（Paint/重绘）：根据布局结果，将节点的颜色、背景、边框、文字、图片等像素绘制到画

布；

1. 合成（Composite）：将绘制的图层合并，通过GPU渲染到屏幕，最终展示可视化页面。

5. 解释CSS文件是如何被浏览器解析并应用到网页上的

CSS解析核心流程

1. 资源加载：浏览器解析HTML时，遇到 <link rel="stylesheet"> 或 @import，发起

HTTP请求加载CSS文件，CSS加载不会阻塞HTML解析，但会阻塞页面渲染；

1. 词法/语法解析：CSS引擎将CSS文本拆分为令牌（Token）（如选择器、属性名、属性值），校验

语法合法性，容错非法语法；

1. 构建CSSOM树：

• 从根节点（html）开始，为每个DOM节点匹配对应的CSS样式规则；