当前位置：首页 > news >正文

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

news 2025/8/14 15:58:14

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

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

在这里插入图片描述

文章目录

一、本文面试题目录
- - 23. 为什么操作 DOM 慢？
  - 24. DOMContentLoaded 事件和 Load 事件的区别是什么？
  - 25. 浏览器的渲染原理是什么？
  - 26. 浏览器渲染过程是怎样的？如何进行渲染优化？
  - - 渲染过程
    - 渲染优化策略
  - 27. 什么情况会阻塞渲染？
  - 28. http 和 https 的区别是什么？
  - 29. 为什么要进行三次握手？
  - 30. UDP 和 TCP 的区别是什么？
  - 31. HTTP 请求的 HEAD 方式有什么特点？
  - 32. 请介绍一下 BOM 对象。
  - 33. 常见的 http 状态码有哪些？分别代表什么含义？
  - - 1xx（信息性状态码）
    - 2xx（成功状态码）
    - 3xx（重定向状态码）
    - 4xx（客户端错误）
    - 5xx（服务器错误）

一、本文面试题目录

23. 为什么操作 DOM 慢？

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

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

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

// 低效：多次操作 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、样式表、图片、音频等）全部加载完成 后触发。
用途：适合需要所有资源准备就绪的场景（如统计页面完全加载时间）。

示例：

// 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 实现动画，减少回流：

/* 低效：修改 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 请求检查图片是否存在：

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（屏幕高度）。