浏览器面试题及详细答案 88道（23-33）

《前后端面试题》专栏集合了前后端各个知识模块的面试题，包括html，javascript，css，vue，react，java，Openlayers，leaflet，cesium，mapboxGL，threejs，nodejs，mangoDB，MySQL，Linux... 。

前后端面试题-专栏总目录

文章目录

一、本文面试题目录
- - [23. 为什么操作 DOM 慢？](#23. 为什么操作 DOM 慢？)
  - [24. DOMContentLoaded 事件和 Load 事件的区别是什么？](#24. DOMContentLoaded 事件和 Load 事件的区别是什么？)
  - [25. 浏览器的渲染原理是什么？](#25. 浏览器的渲染原理是什么？)
  - [26. 浏览器渲染过程是怎样的？如何进行渲染优化？](#26. 浏览器渲染过程是怎样的？如何进行渲染优化？)
  - - 渲染过程
    - 渲染优化策略
  - [27. 什么情况会阻塞渲染？](#27. 什么情况会阻塞渲染？)
  - [28. http 和 https 的区别是什么？](#28. http 和 https 的区别是什么？)
  - [29. 为什么要进行三次握手？](#29. 为什么要进行三次握手？)
  - [30. UDP 和 TCP 的区别是什么？](#30. UDP 和 TCP 的区别是什么？)
  - [31. HTTP 请求的 HEAD 方式有什么特点？](#31. HTTP 请求的 HEAD 方式有什么特点？)
  - [32. 请介绍一下 BOM 对象。](#32. 请介绍一下 BOM 对象。)
  - [33. 常见的 http 状态码有哪些？分别代表什么含义？](#33. 常见的 http 状态码有哪些？分别代表什么含义？)

一、本文面试题目录

23. 为什么操作 DOM 慢？

操作 DOM 慢的核心原因在于 DOM 是 浏览器渲染引擎管理的树形结构，与 JavaScript 引擎属于不同的模块，两者之间的通信存在性能开销。具体原因如下：

跨模块通信成本高：JavaScript 运行在 JS 引擎中，而 DOM 由渲染引擎维护，操作 DOM 需在两个引擎间切换（即"桥接"操作），频繁切换会消耗大量资源。
触发重绘/回流：DOM 操作（如修改元素位置、尺寸、样式等）会导致浏览器重新计算布局（回流）或重新绘制像素（重绘），这些操作耗时且阻塞主线程。
DOM 树结构复杂：大型 DOM 树中，即使是微小的操作也可能引发连锁反应（如父元素变动影响子元素），导致计算量剧增。

示例：

频繁修改 DOM 会显著降低性能：

javascript 复制代码

// 低效：多次操作 DOM，触发多次回流
for (let i = 0; i < 1000; i++) {
  document.body.appendChild(document.createElement('div'));
}

// 优化：先在内存中操作，再一次性更新 DOM
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
  fragment.appendChild(document.createElement('div'));
}
document.body.appendChild(fragment); // 仅触发一次回流

24. DOMContentLoaded 事件和 Load 事件的区别是什么？

两者均为页面加载阶段的事件，但触发时机和含义不同：

DOMContentLoaded ：当 HTML 文档被完全解析 （DOM 树构建完成），且所有脚本（<script>）执行完毕后触发，不等待样式表、图片、iframe 等资源加载 。

用途：适合执行依赖 DOM 结构的 JS 代码（如初始化交互逻辑）。
Load ：当 页面所有资源（包括 DOM、样式表、图片、音频等）全部加载完成 后触发。

用途：适合需要所有资源准备就绪的场景（如统计页面完全加载时间）。

示例：

javascript 复制代码

// DOM 解析完成后执行
document.addEventListener('DOMContentLoaded', () => {
  console.log('DOM 结构已就绪');
});

// 所有资源加载完成后执行
window.addEventListener('load', () => {
  console.log('页面所有资源已加载');
});

25. 浏览器的渲染原理是什么？

浏览器渲染的核心是将 HTML、CSS、JavaScript 转化为用户可见的页面，主要原理包括以下步骤：

构建 DOM 树：解析 HTML 文本，将标签转化为 DOM 节点，形成树形结构（描述页面结构）。
构建 CSSOM 树：解析 CSS 样式（包括内联、外链、style 标签），生成 CSS 对象模型（描述样式规则）。
生成渲染树（Render Tree） ：结合 DOM 树和 CSSOM 树，过滤掉不可见节点（如display: none），并为可见节点应用样式，形成渲染树（描述"哪些节点可见及如何显示"）。
布局（Layout）：根据渲染树计算每个节点的几何位置（宽高、坐标等），又称"回流"。
绘制（Paint）：根据布局结果，将节点绘制到屏幕上（如填充颜色、绘制边框），又称"重绘"。
合成（Composite）：将页面分层（如视频、canvas 单独分层），合并各层为最终屏幕图像，优化性能（如避免全页重绘）。

关键原理：

渲染是渐进式的，浏览器会逐步解析资源并渲染，无需等待所有资源加载完成。
JavaScript 可通过 document.write() 改变 DOM，或通过 style 修改样式，从而打断渲染流程。

26. 浏览器渲染过程是怎样的？如何进行渲染优化？

渲染过程

同"浏览器的渲染原理"，即：DOM 树 → CSSOM 树 → 渲染树 → 布局 → 绘制 → 合成。

渲染优化策略

优化 DOM 解析：
- 减少 HTML 嵌套层级和冗余标签（如避免深层嵌套）。
- 将非关键 JS 放在 <body> 底部或使用 defer/async，避免阻塞 DOM 解析。
优化 CSSOM 构建：
- 精简 CSS 代码，移除无用样式。
- 将关键 CSS 内联到 <head>，减少外链请求。
- 避免使用复杂选择器（如 div:nth-child(2)），降低匹配成本。
减少回流与重绘：
- 批量修改 DOM （如使用 documentFragment）。
- 避免频繁读取 offsetWidth 等触发回流的属性（可缓存值）。
- 使用 transform 和 opacity 实现动画（仅触发合成，不回流/重绘）。
合理分层与合成：
- 对动画元素使用 will-change: transform 提示浏览器单独分层。
- 避免过多分层（层合并也会消耗性能）。

示例：

用 transform 替代 top/left 实现动画，减少回流：

css 复制代码

/* 低效：修改 top 触发频繁回流 */
.box { transition: top 0.3s; }
.box:hover { top: 10px; }

/* 高效：transform 仅触发合成，无回流 */
.box { transition: transform 0.3s; }
.box:hover { transform: translateY(10px); }

27. 什么情况会阻塞渲染？

渲染阻塞指阻止或延迟浏览器生成渲染树、布局或绘制的行为，主要包括：

CSS 阻塞：
- 外链 CSS（<link rel="stylesheet">）会阻塞 CSSOM 构建，进而阻塞渲染树生成（DOM 解析可并行，但渲染需等待 CSSOM）。
- 解决：使用媒体查询（如 <link media="print">）标记非关键 CSS，不阻塞屏幕渲染。
JavaScript 阻塞：
- 默认情况下，<script> 会阻塞 DOM 解析（需等待脚本执行完毕），同时暂停 CSSOM 构建（若脚本依赖 CSS）。
- 解决：使用 async（异步下载，下载完立即执行，不阻塞 DOM 解析）或 defer（异步下载，DOM 解析完再执行）。
其他阻塞：
- 大量 DOM 操作或复杂样式计算导致布局/绘制耗时过长。
- 同步 AJAX 请求阻塞主线程，延迟渲染。

28. http 和 https 的区别是什么？

HTTP（超文本传输协议）和 HTTPS（HTTP Secure）的核心区别在于安全性和传输机制：

特性	HTTP	HTTPS
安全层	无加密，明文传输	基于 TLS/SSL 加密传输
端口	默认 80 端口	默认 443 端口
安全性	低，数据易被窃听、篡改	高，可防止窃听、篡改、伪造
证书	无需证书	需 CA 颁发的 SSL 证书
性能	稍快（无加密开销）	稍慢（需握手和加密解密）
适用场景	非敏感数据（如公开文章）	敏感数据（如支付、登录）

原理：

HTTPS 在 HTTP 基础上增加 TLS 握手过程，通过证书验证服务器身份，并使用对称加密（传输数据）和非对称加密（交换密钥）确保数据安全。

29. 为什么要进行三次握手？

三次握手是 TCP 协议建立连接的过程，目的是 确保双方都能正常收发数据，避免无效连接和资源浪费。具体原因：

确认双方收发能力 ：
- 第一次握手（客户端 → 服务器）：客户端请求连接，服务器得知"客户端能发，自己能收"。
- 第二次握手（服务器 → 客户端）：服务器响应请求，客户端得知"服务器能收能发，自己能收"。
- 第三次握手（客户端 → 服务器）：客户端确认响应，服务器得知"客户端能收，自己能发"。
防止过期连接请求：若客户端的旧请求（因网络延迟）突然到达服务器，三次握手可通过序列号验证，避免服务器误建立连接。

过程简化：

客户端："我要连接你，可以吗？"（SYN=1）
服务器："可以，你连接我吧。"（SYN=1, ACK=1）
客户端："好的，开始连接。"（ACK=1）

30. UDP 和 TCP 的区别是什么？

TCP（传输控制协议）和 UDP（用户数据报协议）是 TCP/IP 协议栈中两种核心传输层协议，区别如下：

特性	TCP	UDP
连接性	面向连接（三次握手建立连接）	无连接（直接发送数据）
可靠性	可靠（重传丢失数据、按序交付）	不可靠（不保证到达、无序）
速度	较慢（需确认、重传机制）	较快（无额外开销）
拥塞控制	有（避免网络拥堵）	无
数据边界	无（流式传输，需应用层拆分）	有（以数据报为单位）
适用场景	文件传输、网页加载、邮件等	视频通话、直播、DNS 查询等

示例：

浏览网页用 TCP（确保数据完整），视频通话用 UDP（允许偶尔丢包，优先速度）。

31. HTTP 请求的 HEAD 方式有什么特点？

HEAD 是 HTTP 请求方法之一，与 GET 类似，但 仅请求资源的响应头（Header），不返回响应体（Body），特点如下：

用途：获取资源元信息（如文件大小、修改时间、是否存在），而无需下载内容，节省带宽。
应用场景 ：
- 检查链接有效性（如 404 错误）。
- 确认资源是否更新（通过 Last-Modified 或 ETag）。
- 获取文件大小（Content-Length）以预分配空间。
响应：服务器对 HEAD 的响应与 GET 一致（状态码、头信息相同），但无 Body。

示例：

用 HEAD 请求检查图片是否存在：

http 复制代码

HEAD /image.jpg HTTP/1.1
Host: example.com

若响应状态码为 200，则图片存在；若为 404，则不存在。

32. 请介绍一下 BOM 对象。

BOM（Browser Object Model，浏览器对象模型）是浏览器提供的全局对象集合，用于操作浏览器窗口和页面环境，核心对象包括：

window ：BOM 核心，代表浏览器窗口，是所有 BOM 对象的顶层对象（如 window.document）。
- 常用属性/方法：window.innerWidth（窗口宽度）、window.open()（打开新窗口）、window.alert()（弹窗）。
document ：指向 DOM 文档对象，既是 BOM 成员，也是 DOM 核心（如 document.getElementById()）。
location：管理当前页面 URL，可用于跳转或获取 URL 信息。
- 示例：location.href = "https://example.com"（跳转页面）；location.search（获取查询参数）。
history：操作浏览器历史记录。
- 方法：history.back()（后退）、history.forward()（前进）、history.pushState()（添加历史记录）。
navigator：提供浏览器信息（如版本、设备类型）。
- 示例：navigator.userAgent（浏览器标识）；navigator.language（用户语言）。
screen：获取屏幕信息（如分辨率）。
- 示例：screen.width（屏幕宽度）；screen.height（屏幕高度）。

特点：

BOM 无官方标准，但各浏览器实现基本一致。
全局变量和函数默认属于 window（如 alert() 等价于 window.alert()）。

33. 常见的 http 状态码有哪些？分别代表什么含义？

HTTP 状态码是服务器对请求的响应标识，分为 5 类（1xx-5xx），常见状态码及含义：

1xx（信息性状态码）

100 Continue：服务器已接收请求头部，客户端可继续发送请求体。

2xx（成功状态码）

200 OK：请求成功，返回正常响应（如 GET 请求返回数据）。
201 Created：请求成功且创建了新资源（如 POST 提交表单创建用户）。
204 No Content：请求成功，但无响应体（如 DELETE 请求删除资源）。

3xx（重定向状态码）

301 Moved Permanently：资源永久迁移，浏览器会缓存新 URL。
302 Found：资源临时迁移（旧 URL 仍有效）。
304 Not Modified：资源未修改，使用缓存（常用于协商缓存）。

4xx（客户端错误）

400 Bad Request：请求无效（如参数格式错误）。
401 Unauthorized：需身份验证（如未登录访问受保护资源）。
403 Forbidden：服务器拒绝请求（如权限不足）。
404 Not Found：请求的资源不存在。
405 Method Not Allowed：请求方法不支持（如用 POST 访问仅允许 GET 的接口）。

5xx（服务器错误）

500 Internal Server Error：服务器内部错误（如代码bug）。
502 Bad Gateway：网关/代理服务器收到无效响应。
503 Service Unavailable：服务器暂时不可用（如维护中）。

用途：通过状态码可快速定位请求问题（如 404 表示资源不存在，500 需检查服务器日志）。