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

还是大剑师兰特2025-08-14 15:03

《前后端面试题》专栏集合了前后端各个知识模块的面试题，包括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 转化为用户可见的页面，主要原理包括以下步骤：

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

关键原理：

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

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

渲染过程

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

渲染优化策略

  1. 优化 DOM 解析：

    • 减少 HTML 嵌套层级和冗余标签（如避免深层嵌套）。
    • 将非关键 JS 放在 <body> 底部或使用 defer/async，避免阻塞 DOM 解析。

  2. 优化 CSSOM 构建：

    • 精简 CSS 代码，移除无用样式。
    • 将关键 CSS 内联到 <head>，减少外链请求。
    • 避免使用复杂选择器（如 div:nth-child(2)），降低匹配成本。

  3. 减少回流与重绘：

    • 批量修改 DOM （如使用 documentFragment）。
    • 避免频繁读取 offsetWidth 等触发回流的属性（可缓存值）。
    • 使用 transform 和 opacity 实现动画（仅触发合成，不回流/重绘）。

  4. 合理分层与合成：

    • 对动画元素使用 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. 什么情况会阻塞渲染？

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

  1. CSS 阻塞：

    • 外链 CSS（<link rel="stylesheet">）会阻塞 CSSOM 构建，进而阻塞渲染树生成（DOM 解析可并行，但渲染需等待 CSSOM）。
    • 解决：使用媒体查询（如 <link media="print">）标记非关键 CSS，不阻塞屏幕渲染。

  2. JavaScript 阻塞：

    • 默认情况下，<script> 会阻塞 DOM 解析（需等待脚本执行完毕），同时暂停 CSSOM 构建（若脚本依赖 CSS）。
    • 解决：使用 async（异步下载，下载完立即执行，不阻塞 DOM 解析）或 defer（异步下载，DOM 解析完再执行）。

  3. 其他阻塞：

    • 大量 DOM 操作或复杂样式计算导致布局/绘制耗时过长。
    • 同步 AJAX 请求阻塞主线程，延迟渲染。

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

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

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

原理 ：

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

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

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

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

过程简化：

  1. 客户端："我要连接你，可以吗？"（SYN=1）
  2. 服务器："可以，你连接我吧。"（SYN=1, ACK=1）
  3. 客户端："好的，开始连接。"（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，浏览器对象模型）是浏览器提供的全局对象集合，用于操作浏览器窗口和页面环境，核心对象包括：

  1. window ：BOM 核心，代表浏览器窗口，是所有 BOM 对象的顶层对象（如 window.document）。

    • 常用属性/方法：window.innerWidth（窗口宽度）、window.open()（打开新窗口）、window.alert()（弹窗）。

  2. document ：指向 DOM 文档对象，既是 BOM 成员，也是 DOM 核心（如 document.getElementById()）。

  3. location：管理当前页面 URL，可用于跳转或获取 URL 信息。

    • 示例：location.href = "https://example.com"（跳转页面）；location.search（获取查询参数）。

  4. history：操作浏览器历史记录。

    • 方法：history.back()（后退）、history.forward()（前进）、history.pushState()（添加历史记录）。

  5. navigator：提供浏览器信息（如版本、设备类型）。

    • 示例：navigator.userAgent（浏览器标识）；navigator.language（用户语言）。

  6. 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 需检查服务器日志）。

相关推荐
还是大剑师兰特10 小时前
C#面试题及详细答案120道（11-20）-- 面向对象编程（OOP）
大剑师·c#面试题
还是大剑师兰特13 小时前
浏览器面试题及详细答案 88道（12-22）
大剑师·浏览器面试题
还是大剑师兰特2 天前
Python面试题及详细答案150道（41-55） -- 面向对象编程篇
python·大剑师·python面试题
还是大剑师兰特4 天前
Redis面试题及详细答案100道（01-15） --- 基础认知篇
redis·大剑师·redis面试
还是大剑师兰特6 天前
MySQL面试题及详细答案 155道（061-080）
大剑师·mysql面试题
还是大剑师兰特9 天前
Javascript面试题及详细答案150道之（046-060）
javascript·大剑师·js面试题
还是大剑师兰特9 天前
Javascript面试题及详细答案150道之（031-045）
大剑师·javascript面试题
还是大剑师兰特10 天前
MySQL面试题及详细答案 155道（021-040）
大剑师·mysql面试题
还是大剑师兰特11 天前
webpack面试题及详细答案80题（61-80）
大剑师·webpack面试题·webpack教程
热门推荐
01UV安装并设置国内源022025最新国内服务器可用docker源仓库地址大全（2025年8月更新）03全球最强模型Grok4，国内已可免费使用！（附教程）04Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code05TRAE Rules 实践：为项目配置 6A 工作流06KGG转MP3工具|非KGM文件|解密音频07[已解决]VSCode右键菜单消失恢复08GPT-5 使用限制与国内升级全攻略（免费 / Plus / Pro）【2025 最新】09Cursor 终端“卡死/无响应”问题的解法10OpenAI重返开源！GPT-OSS本地部署完全指南