浏览器面试题及详细答案 88道（01-11） - 详解
《前后端面试题》专栏集合了前后端各个知识模块的面试题，包括html，javascript，css，vue，react，java，Openlayers，leaflet，cesium，mapboxGL，threejs，nodejs，mangoDB，MySQL，Linux… 。
文章目录
- 一、本文面试题目录
- 1. 常见的浏览器内核有哪些？
- 2. 浏览器的主要组成部分是什么？
- 3. 为什么 JavaScript 是单线程的，与异步冲突吗？
- 4. 为什么 JS 会阻塞页面加载？
- 5. defer 和 async 的区别？
- 6. 你做的页面在哪些浏览器测试过？这些浏览器的内核分别是什么？
- 7. Doctype 的作用是什么？
- 8. Quirks 模式是什么？它和 Standards 模式有什么区别？
- 9. img 的 alt 与 title 有何异同？
- 10. strong 与 em 的异同？
- 11. 渐进增强和优雅降级的区别是什么？
一、本文面试题目录
1. 常见的浏览器内核有哪些？
浏览器内核是决定浏览器如何渲染网页、解析脚本的核心组件，主要分为渲染引擎（排版引擎）和JavaScript引擎。常见的浏览器内核包括：
- Trident（IE内核）：曾用于微软的Internet Explorer浏览器，目前已逐渐被Edge的Chromium内核取代。
- Gecko（火狐内核）：由Mozilla开发，用于Firefox浏览器，特点是开源且渲染能力强，对网页标准支持较好。
- WebKit：由苹果基于KHTML开发，用于Safari浏览器，以及早期的Chrome浏览器。它包含WebCore（渲染引擎）和JavaScriptCore（JS引擎）。
- Blink：由Google和Opera Software合作开发，是WebKit的分支，目前用于Chrome、Opera、Microsoft Edge（新版）等浏览器，优化了渲染性能和安全性。
- Presto：曾是Opera浏览器的内核，后因Opera转向Blink而被弃用。
2. 浏览器的主要组成部分是什么？
浏览器是一个复杂的软件，主要由以下核心部分组成：
- 用户界面（UI）：包括地址栏、书签栏、前进/后退按钮、刷新按钮等用户可交互的部分。
- 浏览器引擎：协调渲染引擎和UI之间的交互，例如处理用户输入（如点击链接）并通知渲染引擎加载新页面。
- 渲染引擎：负责解析HTML、CSS，将其转换为可视化的网页。不同浏览器内核对应不同的渲染引擎（如WebKit、Blink）。
- JavaScript引擎：解析和执行JavaScript代码（如V8引擎用于Chrome，SpiderMonkey用于Firefox）。
- 网络模块：处理HTTP、HTTPS等网络请求，包括DNS解析、建立连接、接收响应等。
- 数据存储：管理浏览器本地存储，如Cookie、localStorage、sessionStorage、IndexedDB等。
- 插件和扩展系统：支持第三方插件（如Flash插件，现已逐渐淘汰）和扩展程序（如广告拦截器）。
3. 为什么 JavaScript 是单线程的，与异步冲突吗？
- 单线程原因：JavaScript最初设计为运行在浏览器中，主要用途是操作DOM（如修改元素、处理事件）。若采用多线程，多个线程同时操作DOM可能导致冲突（如一个线程删除元素，另一个线程修改该元素）。单线程模型可避免此问题，简化开发。
- 与异步不冲突：单线程指JS引擎中只有一个主线程执行代码，但浏览器是多线程的（如网络线程、定时器线程等）。异步操作（如
setTimeout、AJAX、事件监听）由浏览器的其他线程处理，完成后将回调函数放入任务队列，等待主线程空闲时执行。因此，单线程模型通过“任务队列”机制支持异步，两者并不冲突。
示例：
console.log('1');
// 同步代码，立即执行
setTimeout(() =>
{
console.log('2');
// 异步任务，由定时器线程处理，延迟后进入队列
}, 0);
console.log('3');
// 同步代码，立即执行
// 输出顺序：1 → 3 → 2（体现异步执行）4. 为什么 JS 会阻塞页面加载？
JavaScript会阻塞页面加载（渲染）的原因如下：
- DOM和CSSOM依赖：JS可以修改DOM（如
document.write）或CSSOM（如document.styleSheets），浏览器无法确定JS是否会改变页面结构，因此会暂停HTML解析和CSS渲染，等待JS执行完成后再继续。 - 单线程特性：JS引擎与渲染引擎共享主线程，若JS执行时间过长（如复杂计算），会占用主线程，导致渲染引擎无法工作，页面卡顿或白屏。
示例：
<!-- JS执行会阻塞后续HTML解析和渲染 --><script>// 耗时操作，阻塞页面for (let i = 0; i <1000000000; i++) {}</script>
<p>这段文字会在JS执行完后才显示</p>5. defer 和 async 的区别？
defer和async是<script>标签的属性，用于控制JS脚本的加载和执行方式，避免阻塞页面渲染，区别如下：
| 特性 | async | defer |
|---|---|---|
| 加载 | 异步加载（不阻塞HTML解析） | 异步加载（不阻塞HTML解析） |
| 执行时机 | 加载完成后立即执行（可能中断HTML解析） | 等待HTML解析完成后执行（在DOMContentLoaded前） |
| 执行顺序 | 不保证顺序（谁先加载完谁先执行） | 按脚本在页面中的顺序执行 |
示例：
<!-- async：加载完立即执行，顺序不确定 -->
<script src="a.js" async></script>
<script src="b.js" async></script><!-- defer：HTML解析完后按顺序执行 --><script src="c.js" defer></script><script src="d.js" defer></script>| No. | 大剑师精品GIS教程推荐 |
|---|---|
| 0 | 地图渲染基础- 【WebGL 教程】 - 【Canvas 教程】 - 【SVG 教程】 |
| 1 | Openlayers【入门教程】 - 【源代码+示例 300+】 |
| 2 | Leaflet【入门教程】 - 【源代码+图文示例 150+】 |
| 3 | MapboxGL【入门教程】 - 【源代码+图文示例150+】 |
| 4 | Cesium【入门教程】 - 【源代码+综合教程 200+】 |
| 5 | threejs【中文API】 - 【源代码+图文示例200+】 |
| 6 | Shader 编程 【图文示例 100+】 |
6. 你做的页面在哪些浏览器测试过？这些浏览器的内核分别是什么？
通常前端开发会测试主流浏览器，包括：
- Chrome：内核为Blink（基于WebKit分支）。
- Firefox：内核为Gecko。
- Safari：内核为WebKit。
- Microsoft Edge（新版）：内核为Blink（早期版本使用Trident）。
- Opera：内核为Blink（早期使用Presto）。
- 移动端浏览器：如微信浏览器（基于WebKit/Blink）、手机Chrome（Blink）、Safari移动端（WebKit）等。
测试时需关注不同内核对HTML、CSS、JS特性的兼容性（如CSS Flexbox、ES6语法等）。
7. Doctype 的作用是什么？
<!DOCTYPE>（文档类型声明）是HTML文档开头的声明，作用如下：
- 告诉浏览器文档类型：声明当前HTML文档遵循的规范（如HTML5、HTML4.01等），浏览器据此选择渲染模式（标准模式或怪异模式）。
- 避免怪异模式：若未声明
<!DOCTYPE>，浏览器可能进入Quirks模式（怪异模式），以兼容旧网页，但会导致CSS布局异常（如盒模型计算方式不同）。
示例：
- HTML5文档声明（简洁，无需指定版本）：
<!DOCTYPE html> - HTML4.01严格模式声明：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
8. Quirks 模式是什么？它和 Standards 模式有什么区别？
- Quirks 模式（怪异模式）：浏览器为兼容早期不遵循W3C标准的网页而设计的渲染模式。在此模式下，浏览器采用旧的、非标准的渲染规则（如IE6的盒模型）。
- Standards 模式（标准模式）：浏览器严格按照W3C标准渲染网页，确保不同浏览器对HTML和CSS的解析一致。
主要区别：
- 盒模型：Quirks模式中，
width和height包含边框（border）和内边距（padding）；标准模式中，width和height仅指内容区域（content）。 - 行内元素尺寸：Quirks模式下，行内元素可设置
width和height；标准模式下不可。 - 表格布局：Quirks模式可能忽略表格的
cellspacing等属性。
示例：
/* 盒模型差异 */
.box {
width: 100px;
padding: 10px;
border: 5px solid black;
}
/* Quirks模式：总宽度 = 100px（包含padding和border） */
/* 标准模式：总宽度 = 100px + 10px*2 + 5px*2 = 130px */9. img 的 alt 与 title 有何异同？
alt和title是<img>标签的属性，用于提供图片相关信息，异同如下：
| 特性 | alt | title |
|---|---|---|
| 作用 | 图片加载失败时显示的替代文本；供屏幕阅读器读取，提升可访问性。 | 鼠标悬停在图片上时显示的额外说明文本。 |
| 必要性 | 必需属性（尤其是语义化和SEO） | 可选属性 |
| 场景 | 图片无法显示或无障碍访问时使用 | 提供补充信息（如图片细节、来源等） |
示例：
<imgsrc="logo.png"alt="公司logo" <!-- 加载失败时显示 -->title="2023年新版logo" <!-- 鼠标悬停时显示 -->>10. strong 与 em 的异同？
strong和em都是HTML语义化标签，用于强调文本，异同如下：
| 特性 | strong | em |
|---|---|---|
| 语义 | 表示“重要性”（如警告、关键信息） | 表示“强调”（如语气上的着重） |
| 默认样式 | 文本加粗（bold） | 文本斜体（italic） |
| 使用场景 | 突出核心内容（如“警告：禁止操作”） | 突出语句中的强调部分（如“我真的同意”） |
示例：
<p>
请务必<strong>在24小时内完成支付</strong>，否则<em>订单将自动取消</em>。
</p>
<!-- 语义：“24小时内支付”是重要操作；“自动取消”是对后果的强调 -->11. 渐进增强和优雅降级的区别是什么？
渐进增强和优雅降级是两种前端开发策略，核心区别在于对浏览器兼容性的处理思路：
渐进增强（Progressive Enhancement）：
- 核心思路：先构建满足基础功能的版本（兼容所有浏览器，尤其是低版本），再为支持高级特性的浏览器添加增强功能（如CSS3动画、JS API）。
- 目标：确保所有用户都能使用核心功能，高级用户获得更好体验。
- 示例：先实现基础表单提交（纯HTML），再为现代浏览器添加AJAX提交和表单验证动画。
优雅降级（Graceful Degradation）：
- 核心思路：先基于现代浏览器构建完整功能的版本，再为低版本浏览器适配，移除不支持的特性，确保核心功能可用。
- 目标：优先满足现代浏览器用户，低版本用户体验可能简化但不崩溃。
- 示例：先实现带CSS Grid布局的页面，再为IE11（不支持Grid）添加浮动布局的降级方案。
总结：渐进增强从“基础”向“高级”扩展，优雅降级从“高级”向“基础”兼容。现代开发更推荐渐进增强，符合语义化和可访问性原则。