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

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

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

文章目录

一、本文面试题目录
- - [12. 为什么利用多个域名存储网站资源更有效？](#12. 为什么利用多个域名存储网站资源更有效？)
  - [13. 如何理解网页标准及标准制定机构的重要性？](#13. 如何理解网页标准及标准制定机构的重要性？)
  - [14. cookies、sessionStorage 和 localStorage 的区别是什么？](#14. cookies、sessionStorage 和 localStorage 的区别是什么？)
  - [15. 渲染过程中遇到 CSS 文件会如何处理？](#15. 渲染过程中遇到 CSS 文件会如何处理？)
  - [16. 你对浏览器内核的理解是什么？](#16. 你对浏览器内核的理解是什么？)
  - [17. 常见浏览器内核的优缺点分别是什么？](#17. 常见浏览器内核的优缺点分别是什么？)
  - [18. 渲染过程中遇到 JS 文件会如何处理？](#18. 渲染过程中遇到 JS 文件会如何处理？)
  - [19. 什么是文档的预解析？](#19. 什么是文档的预解析？)
  - [20. 渲染页面时常见哪些不良现象？](#20. 渲染页面时常见哪些不良现象？)
  - [21. 如何优化关键渲染路径？](#21. 如何优化关键渲染路径？)
  - [22. 什么是重绘和回流？如何减少回流？](#22. 什么是重绘和回流？如何减少回流？)

一、本文面试题目录

12. 为什么利用多个域名存储网站资源更有效？

原理说明 ：
- 突破浏览器并发连接限制：多数浏览器对同一域名的并发请求数有限制（如Chrome默认6个），使用多个域名可让浏览器同时加载更多资源，减少等待时间。
- 分流缓存压力：不同域名的资源可分别缓存，避免单一域名下缓存空间不足或资源混淆。
- CDN优化：不同域名可对应不同CDN节点，根据资源类型（如图片、脚本）选择更优的CDN服务，提升加载速度。
- 规避Cookie影响：静态资源（如图片、CSS）若放在带Cookie的域名下，请求会携带不必要的Cookie，增加数据传输量；独立域名可避免此问题。
示例场景 ：
一个电商网站将主域名设为www.example.com（存放HTML和核心脚本），图片存于img.example.com，CSS和JS存于static.example.com，这样浏览器可同时从3个域名加载资源，大幅提升页面加载效率。

13. 如何理解网页标准及标准制定机构的重要性？

原理说明 ：
- 网页标准：是一系列规范（如HTML、CSS、JavaScript语法及行为）的集合，确保网页在不同浏览器、设备上表现一致，提升兼容性和可维护性。
- 标准制定机构的作用 ：
  - W3C（World Wide Web Consortium）：制定HTML、CSS等核心标准，推动Web技术规范化。
  - ECMA International：制定JavaScript（ECMAScript）标准，确保脚本语言的一致性和演进。
  - IETF（Internet Engineering Task Force）：制定HTTP等网络传输标准，保障数据交互的稳定性。
- 重要性 ：
  - 降低开发者学习和维护成本，无需为不同浏览器编写差异化代码。
  - 促进Web技术的统一演进，推动创新（如PWA、WebGL等新技术基于标准发展）。
  - 保障用户体验一致性，无论使用Chrome、Firefox还是Safari，网页功能和表现基本一致。
示例：
HTML5标准由W3C制定后，<video>标签可在所有现代浏览器中直接播放视频，无需依赖插件（如Flash），体现了标准对技术统一和用户体验的提升。

14. cookies、sessionStorage 和 localStorage 的区别是什么？

特性	cookies	sessionStorage	localStorage
存储大小	约4KB	约5-10MB	约5-10MB
有效期	可设置过期时间（持久化）或会话级（关闭浏览器失效）	会话级（关闭标签页/浏览器失效）	持久化（除非手动删除）
作用域	同域名（包括子域名，可配置）	仅当前标签页（同域名不同标签页不共享）	同域名下所有标签页共享
与服务器交互	每次HTTP请求自动携带	不与服务器交互	不与服务器交互
API易用性	需要手动封装（`document.cookie`）	简洁API（`setItem`/`getItem`）	同sessionStorage
典型用途	身份认证、记住登录状态	临时表单数据、页面状态保存	长期数据存储（如用户偏好设置）

示例代码 ：

javascript 复制代码

// cookies
document.cookie = "username=John; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/";

// sessionStorage
sessionStorage.setItem("tempData", "hello");
console.log(sessionStorage.getItem("tempData")); // "hello"

// localStorage
localStorage.setItem("theme", "dark");
console.log(localStorage.getItem("theme")); // "dark"

15. 渲染过程中遇到 CSS 文件会如何处理？

原理说明 ：
- CSS文件会阻塞渲染树构建 ，但不会阻塞HTML解析（浏览器会并行下载CSS和解析HTML）。
- 浏览器解析HTML生成DOM树，同时解析CSS生成CSSOM（CSS对象模型），两者结合生成渲染树（Render Tree），再进行布局（Layout）和绘制（Paint）。
- 若CSS未加载完成，渲染树无法生成，页面会呈现空白（或仅显示已解析的未样式化内容），直到CSSOM构建完成。
关键机制 ：
- CSS阻塞渲染：确保页面按样式规则正确显示，避免"无样式内容闪烁（FOUC）"。
- 媒体查询优化 ：对media="print"等非当前场景的CSS，浏览器会下载但不阻塞渲染。
示例场景 ：
若页面引入一个大型外部CSS文件，HTML解析完成后会等待CSS下载并解析，此时DOM已就绪但渲染树未生成，页面暂时空白，直到CSSOM构建完成后才会显示样式化内容。

16. 你对浏览器内核的理解是什么？

原理说明 ：
- 浏览器内核（Rendering Engine）是浏览器的核心组件，负责解析和渲染网页内容，决定页面的显示方式和性能。
- 核心功能：
  - 解析HTML/XHTML生成DOM树。
  - 解析CSS生成CSSOM树。
  - 结合DOM和CSSOM生成渲染树。
  - 执行布局（Layout）计算元素位置和大小。
  - 绘制（Painting）将元素渲染到屏幕。
  - 部分内核还集成JavaScript引擎（如WebKit的JavaScriptCore、Blink的V8）。
- 不同内核的实现差异会导致网页在不同浏览器中的兼容性问题（如CSS属性支持、渲染精度等）。
常见内核 ：
Blink（Chrome、Edge）、WebKit（Safari）、Gecko（Firefox）、Trident（旧版IE）。

17. 常见浏览器内核的优缺点分别是什么？

内核	代表浏览器	优点	缺点
Blink	Chrome、Edge	渲染速度快，对新特性支持积极，开源活跃	对部分旧标准兼容性一般，资源占用较高
WebKit	Safari、旧版Chrome	渲染流畅，与macOS/iOS生态整合好	新特性支持节奏较慢，部分API实现独特
Gecko	Firefox	标准兼容性强，隐私保护功能完善	渲染性能略逊于Blink，市场份额较低
Trident	旧版IE（IE11及以下）	对旧网站兼容性好（如ActiveX）	不支持现代标准（如ES6、CSS3），已被淘汰

18. 渲染过程中遇到 JS 文件会如何处理？

原理说明 ：
- JavaScript会阻塞HTML解析和渲染 ，因为JS可修改DOM（如document.write）和CSSOM（如document.styleSheets），浏览器需暂停解析等待JS执行完成。
- 关键机制：
  - 默认阻塞 ：当HTML解析器遇到<script>标签时，会暂停解析，下载JS文件（若为外部脚本）并执行，完成后再继续解析HTML。
  - 预加载扫描器：浏览器会启动预加载扫描器，提前发现并下载JS、CSS等资源，减少阻塞时间。
  - async/defer属性：可改变JS的执行时机（见问题5），避免阻塞解析。

示例代码 ：

html 复制代码

<!-- 阻塞解析和渲染 -->
<script src="app.js"></script>

<!-- 不阻塞解析，下载完成后立即执行（顺序不保证） -->
<script src="lib.js" async></script>

<!-- 不阻塞解析，DOM就绪后按顺序执行 -->
<script src="util.js" defer></script>

19. 什么是文档的预解析？

原理说明 ：
- 文档预解析（Pre-parsing）是浏览器的优化机制，当HTML解析器被JS阻塞时，启动预解析器（Preloader）提前扫描后续HTML内容，发现并下载关键资源（如JS、CSS、图片等）。
- 作用：减少资源加载等待时间，提升页面加载速度。
- 预解析范围：仅扫描标签中的资源引用（如src、href），不执行解析或渲染操作。
示例场景 ：
若页面中部有一个阻塞解析的JS文件，预解析器会提前扫描后续的<link rel="stylesheet">和<img src>，在JS执行期间并行下载这些资源，避免JS执行完成后才开始下载，节省时间。

20. 渲染页面时常见哪些不良现象？

常见现象及原因 ：
- 无样式内容闪烁（FOUC）：CSS加载延迟，DOM先于CSSOM渲染，导致页面短暂显示无样式内容。
- 布局偏移（CLS，Cumulative Layout Shift）：元素大小或位置动态变化（如图片未设尺寸、字体加载延迟），导致页面布局突然偏移，影响用户体验。
- 卡顿（Jank）：JS执行时间过长或频繁触发回流/重绘，导致渲染帧率下降（低于60fps），页面滚动或动画不流畅。
- 白屏/空白：HTML解析或关键资源（如JS、CSS）加载失败，导致页面无法渲染。
示例：
图片未设置width和height属性，加载完成后突然撑开容器，导致下方内容下移，产生布局偏移。

21. 如何优化关键渲染路径？

原理说明 ：
关键渲染路径是浏览器将HTML、CSS、JS转换为屏幕像素的过程，优化目标是减少首次内容绘制（FCP） 和可交互时间（TTI）。
优化策略 ：
1. 精简HTML/CSS：移除冗余代码，压缩文件（如使用Gzip/Brotli）。
2. 优先加载关键CSS ：将首屏必需的CSS内联到<head>，非关键CSS异步加载（如media="print"）。
3. 优化JS执行 ：
  - 延迟加载非关键JS（defer/async）。
  - 避免JS阻塞解析（将脚本放在</body>前或使用动态导入import()）。
4. 减少回流/重绘 ：合理使用will-change、transform等属性（见问题22）。
5. 预连接/预加载 ：
  html 复制代码
```
<link rel="preconnect" href="https://cdn.example.com"> 
<link rel="preload" href="critical.css" as="style"> 
```

22. 什么是重绘和回流？如何减少回流？

重绘（Repaint）：
- 定义：元素样式（如color、background）改变但不影响布局时，浏览器重新绘制元素的过程。
- 示例：div.style.color = "red";（仅颜色变化，位置和大小不变）。
回流（Reflow，又称重排）：
- 定义：元素布局（如width、position、float）改变时，浏览器重新计算元素位置和大小，并更新渲染树的过程。
- 影响：回流代价高于重绘，频繁回流会导致页面卡顿。
- 示例：div.style.width = "200px";（宽度变化，需重新计算布局）。
减少回流的方法：
1. 批量修改样式 ：使用class一次性修改多个样式，而非逐个设置。
  css 复制代码
```
.active { width: 200px; height: 100px; }
```
  javascript 复制代码
```
element.classList.add("active"); // 一次回流
```
2. 脱离文档流操作 ：通过display: none隐藏元素后修改样式，完成后恢复显示（仅触发2次回流）。
3. 使用CSS触发合成层 ：transform、opacity等属性修改仅触发合成（Composite），不回流/重绘。
  javascript 复制代码
```
element.style.transform = "translateX(100px)"; // 无回流
```
4. 避免频繁访问布局属性 ：如offsetWidth、scrollTop，浏览器会强制刷新渲染树，可缓存结果。
  javascript 复制代码
```
const width = element.offsetWidth; // 触发回流
// 多次使用width，避免重复访问
element.style.width = width + 10 + "px";
```