滴滴-社招-2年 · 第 1 轮 · 一面

考察点

• 理解HTML语义化标签的重要性及作用
  
• 掌握语义化标签对SEO和无障碍的影响
  
• 了解语义化标签在开发协作和维护中的优势
  

参考答案

一、语义化标签的核心概念

• HTML5引入了如 <header>、<nav>、<article>、<footer> 等语义化标签，明确表达页面结构和内容含义
  
• 语义化标签比普通 <div> 搭配类名更具意义，利于浏览器、搜索引擎、辅助设备等理解页面
  

二、使用 <header> 的优势

1. 明确语义
   

   • <header>表示页面或区块的头部区域，包含标题、导航等信息
     
   • 比 <div class="header"> 直接通过类名赋予语义更标准、易识别
     

2. 提升可访问性
   

   • 语义化标签被屏幕阅读器等辅助技术识别，帮助视障用户理解页面结构
     
   • <header>使辅助设备快速定位页眉内容，提升用户体验
     

3. SEO友好
   

   • 搜索引擎利用语义标签准确抓取页面结构和重点内容
     
   • 语义标签利于内容分类和权重判断，可能提高搜索排名
     

4. 代码规范与维护
   

   • 语义化标签增强代码自解释性，方便团队协作和代码维护
     
   • 减少对类名、ID等非结构性属性的依赖，代码更简洁清晰
     

三、使用场景对比

• <header>适合定义页面或区块的头部区域
  
• <div class="header">仅作为普通容器，没有内置语义
  
• 两者均可通过CSS样式控制外观，但语义化标签具备结构语义

考察点

• 理解SEO（搜索引擎优化）对网页结构和内容的重要性
  
• 掌握语义化标签对搜索引擎抓取的正面影响
  
• 了解可访问性（Accessibility）概念及辅助技术如何利用语义标签
  
• 能说明如何通过结构优化提升用户体验及业务价值
  

参考答案

一、SEO影响

1. 语义化标签助力搜索引擎理解页面结构
   

   • 搜索引擎依赖HTML结构判断内容层级和重点
     
   • 使用 <header>、<article>、<nav> 等标签，明确标识内容区块，提升爬虫抓取效率
     

2. 提升关键词和内容相关性权重
   

   • 语义标签让搜索引擎区分正文、导航、页脚等区域，避免误判
     
   • 正确结构化内容帮助搜索引擎更精准地抓取和索引，提高排名可能性
     

3. 丰富搜索结果展示
   

   • 结构化良好的页面更容易获得富媒体摘要（如站点链接、快速导航）
     

二、可访问性影响

1. 辅助技术依赖语义信息提供用户导航
   

   • 屏幕阅读器、盲人设备通过语义标签识别页面结构，便于快速定位
     
   • <header>、<nav>等标签帮助用户了解页面布局和功能区
     

2. 提升残障用户体验
   

   • 语义清晰的页面减少理解和操作成本，提升交互效率和满意度
     

3. 符合法律法规和行业标准
   

   • 许多国家和地区对无障碍有强制性要求，合理使用语义标签有助合规

考察点

• 理解屏幕阅读器的工作原理及语义化标签的重要性
  
• 掌握语义化标签如何辅助辅助技术（如屏幕阅读器）识别页面结构
  
• 了解辅助技术与HTML结构的交互方式及用户体验影响
  

参考答案

一、屏幕阅读器的工作原理简述

• 屏幕阅读器通过解析网页的DOM结构和HTML标签，读取文本内容并以语音或盲文输出
  
• 其核心依赖网页的语义信息（标签、ARIA属性等）来构建页面的“语义树”
  
• 语义树反映页面结构，帮助用户理解内容层次、导航方式及控件功能
  

二、语义化标签在屏幕阅读器中的作用

1. 明确页面结构
   

   • <header>、<nav>、<main>、<footer>等标签标识不同页面区域，屏幕阅读器据此划分内容块
     
   • 用户可以跳转到这些语义块，快速浏览和定位
     

2. 提高内容可理解性
   

   • 语义标签提供内容的上下文信息，比如<article>表示独立文章，<section>表示逻辑区块
     
   • 这有助于用户理解页面内容的组织方式
     

3. 辅助交互控件识别
   

   • 语义标签结合ARIA属性，帮助屏幕阅读器识别按钮、菜单、表单等交互元素
     
   • 提供正确的角色(role)、状态(state)和属性(property)信息
     

三、实际解析流程

• 屏幕阅读器监听DOM变化，构建和维护一棵语义树
  
• 访问者使用快捷键导航时，屏幕阅读器基于语义树跳转对应标签区域
  
• 阅读顺序由语义结构决定，非语义标签（如无意义<div>）无法提供有效导航点
  
• 开发者通过合理语义标签和ARIA属性增强用户体验

考察点

• 理解 <script> 标签中 defer 和 async 属性的区别
  
• 掌握浏览器HTML解析与脚本加载、执行的流程
  
• 了解不同脚本加载方式对页面渲染性能和用户体验的影响
  
• 熟悉合理使用defer和async的优化策略
  

参考答案

一、<script defer> 和 <script async> 的核心概念

• <script defer>：脚本会在HTML文档解析完成后，按顺序执行，保证脚本不会阻塞DOM的构建
  
• <script async>：脚本会在下载完成后立即执行（异步执行），不保证执行顺序，可能打断HTML解析
  

二、浏览器解析流程及影响

三、优化建议

1. 优先使用 defer 加载顺序敏感的脚本
   

   • 确保脚本不会阻塞DOM构建
     
   • 保持脚本执行顺序，避免因异步执行引发依赖问题
     

2. 使用 async 加载独立、非依赖性脚本
   

   • 适合广告、分析、统计等独立功能脚本
     
   • 提升加载效率，减少页面阻塞时间
     

3. 合理拆分脚本，避免单个大文件阻塞
   

   • 利用代码拆分（Code Splitting）减少单个文件体积
     
   • 配合defer/async提高加载和渲染速度
     

4. 结合其他性能优化手段
   

   • 使用HTTP/2多路复用，提升脚本加载并发能力
     
   • 合理设置缓存，减少重复加载
     
   • 将非关键脚本延迟加载，保证首屏渲染速度

flex 是 flex-grow, flex-shrink 和 flex-basis的简写。

除了auto (1 1 auto) 和 none (0 0 auto)这两个快捷值外，还有以下设置方式：

• 当 flex 取值为一个非负数字，则该数字为 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%，如下是等同的：

.item {flex: 1;}
.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}

• 当 flex 取值为 0 时，对应的三个值分别为 0 1 0%

.item {flex: 0;}
.item {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: 0%;
}

• 当 flex 取值为一个长度或百分比，则视为 flex-basis 值，flex-grow 取 1，flex-shrink 取 1，有如下等同情况（注意 0% 是一个百分比而不是一个非负数字）

.item-1 {flex: 0%;}
.item-1 {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}

.item-2 {flex: 24px;}
.item-2 {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 24px;
}

• 当 flex 取值为两个非负数字，则分别视为 flex-grow 和 flex-shrink 的值，flex-basis 取 0%，如下是等同的：

.item {flex: 2 3;}
.item {
    flex-grow: 2;
    flex-shrink: 3;
    flex-basis: 0%;
}

• 当 flex 取值为一个非负数字和一个长度或百分比，则分别视为 flex-grow 和 flex-basis 的值，flex-shrink 取 1，如下是等同的：

.item {flex: 11 32px;}
.item {
    flex-grow: 11;
    flex-shrink: 1;
    flex-basis: 32px;
}

考察点

• 理解闭包（Closure）及其实现原理
  
• 掌握闭包对变量生命周期的影响
  
• 识别闭包可能带来的内存泄漏风险及优化方法
  
• 理解JavaScript函数作用域与执行上下文的关系
  

参考答案

一、代码输出解释

function createCounter() {
  let count = 0;
  return function() {
    count++;
    console.log(count);
  };
}
const counter = createCounter();
counter(); // 输出 1
counter(); // 输出 2

• createCounter 返回了一个闭包函数，该函数引用了其外部作用域中的变量 count
• 每调用一次 counter()，count 自增并输出当前值，体现了闭包对外部变量的持久引用
• count 不会在 createCounter 执行结束后销毁，因为闭包保持对它的引用

二、闭包的原理和作用

• 闭包是函数与其相关作用域环境的组合，允许函数访问定义时的作用域
• JavaScript中，函数执行时会形成执行上下文，变量在上下文中存活
• 返回的内部函数持续持有对外部变量的引用，防止变量被垃圾回收

三、内存风险分析

• 潜在内存泄漏：闭包会使其引用的变量长时间保留在内存，尤其当闭包持有大量数据或大量闭包被持续创建时
• 如果闭包中引用了大对象或DOM节点，且未及时释放，可能导致内存泄漏
• 反复创建闭包函数且不释放引用，会持续占用内存，影响性能

四、如何避免风险

• 合理设计闭包，避免闭包无意义地持有大量变量或对象
• 当闭包不再使用时，解除对变量的引用（如将闭包置为null）以辅助GC回收
• 注意避免闭包与DOM节点互相引用，导致循环引用

考察点

• 理解闭包变量的内存存储位置及生命周期
  
• 掌握使用 WeakMap 管理闭包数据，防止内存泄漏的原理
  
• 理解JavaScript垃圾回收机制及弱引用的作用
  
• 能结合实际场景说明 WeakMap 替代闭包变量存储的优化方案
  

参考答案

一、闭包中变量的内存存储位置

• JavaScript中，函数执行时创建执行上下文，局部变量存储在堆内存中
  
• 闭包使函数持续持有对外层作用域变量的引用，导致这些变量无法被垃圾回收
  
• 堆内存（Heap）是动态分配区域，用于存储对象和闭包捕获的变量，生命周期取决于引用关系
  
• 只要闭包存在，对应的变量就存活在堆中
  

二、WeakMap避免内存泄漏的原理

• WeakMap的键是弱引用对象，不计入垃圾回收的根引用
  
• 当键对象不再被引用时，WeakMap中的键值对会自动被GC回收
  
• 适合存储和管理闭包私有数据，避免闭包对象持有过长生命周期
  
• 通过将闭包中状态或数据存储在WeakMap，利用外部对象作为键，实现自动释放
  

三、用 WeakMap 重构闭包示例

传统闭包写法（存在闭包持久引用风险）：

function createCounter() {
  let count = 0;
  return function() {
    count++;
    console.log(count);
  };
}

使用 WeakMap 存储私有状态：

const countMap = new WeakMap();

function createCounter() {
  const obj = {}; // 用作WeakMap的键
  countMap.set(obj, 0);

  return function() {
    let count = countMap.get(obj) || 0;
    count++;
    countMap.set(obj, count);
    console.log(count);
  };
}

• 这里状态count不直接存在闭包内，而是存在WeakMap中，绑定到外部对象obj
• 当闭包不再引用obj时，该键值对会被自动回收，防止内存泄漏

四、应用场景及优势

• 适合管理大量实例私有状态，避免闭包链过长导致内存长驻
• 在类或函数组件中，存储不方便直接挂载的私有数据
• 减少因闭包持有大量变量导致的内存占用，提升性能

考察点

• 理解JavaScript事件循环（Event Loop）机制
  
• 掌握宏任务（Macrotask）和微任务（Microtask）的区别及执行顺序
  
• 能分析异步代码的执行流程及输出顺序
  

参考答案

一、代码输出顺序

setTimeout(() => console.log(1), 0);
Promise.resolve().then(() => console.log(2));
console.log(3);

输出顺序：

3
2
1

二、原因解析

1. console.log(3) 是同步代码，立即执行，第一步输出 3。

2. Promise.resolve().then(...) 注册了一个微任务（微任务队列），不会立即执行，而是等待当前同步代码执行完毕后执行。

3. setTimeout(..., 0) 注册了一个宏任务，宏任务队列中排队等待执行，且会在微任务执行完后才执行。

4. 执行顺序遵循事件循环模型：

   • 先执行同步代码（输出3）
   • 执行所有微任务（Promise.then，输出2）
   • 执行宏任务（setTimeout，输出1）

考察点

• 理解JavaScript中new操作符的底层执行流程
  
• 掌握构造函数实例化对象的原理
  
• 理解new与函数调用的区别及其对this的绑定机制
  
• 能解释构造函数返回值对new结果的影响
  

参考答案

一、new操作符的内部执行步骤

1. 创建一个空对象
   

   • 创建一个全新的空对象，作为将要返回的实例对象
     

2. 设置原型链
   

   • 将新对象的内部[[Prototype]]（即__proto__）指向构造函数的prototype属性
     
   • 实现继承构造函数原型上的属性和方法
     

3. 绑定函数执行上下文
   

   • 将构造函数内部的this指向新创建的对象
     
   • 执行构造函数代码，给新对象添加属性或方法
     

4. 返回对象
   

   • 如果构造函数返回了一个对象类型（非基本类型），则返回该对象
     
   • 否则，返回步骤1创建的新对象
     

二、举例说明

function Person(name) {
  this.name = name;
  return { custom: 'object' }; // 返回对象，则new结果是此对象
}

const p = new Person('Tom');
console.log(p); // { custom: 'object' }

function Animal(name) {
  this.name = name;
  return 123; // 返回基本类型，忽略返回值
}

const a = new Animal('Cat');
console.log(a.name); // 'Cat'

三、new的关键点总结

• 创建新对象且继承构造函数原型链
• this绑定新对象执行构造函数
• 返回值规则（对象类型覆盖默认返回）

考察点

• 理解 Vue3 响应式核心API reactive 和 ref 的区别与设计初衷
  
• 掌握响应式数据的实现机制及底层原理
  
• 理解基本类型响应式的特殊处理原因及解决方案
  
• 能结合实际项目场景，说明两者的使用时机和注意点
  

参考答案

一、reactive() 与 ref() 的核心区别

• reactive()
  

  • 用于将一个对象（包括数组、普通对象）包装成响应式对象
    
  • 通过 Proxy 实现深度响应式，拦截所有属性访问和修改
    
  • 访问属性时直接操作响应式对象，无需 .value 访问
    
  • 不支持基本类型（如字符串、数字、布尔）作为参数，传入基本类型会原样返回，不具备响应式
    

• ref()
  

  • 用于包装单一基本类型或对象，返回一个包含 .value 属性的响应式引用
    
  • 通过内部对象包装，实现对基本类型的响应式支持
    
  • 使用时需要通过 .value 访问或赋值
    
  • 对象类型作为参数时，ref 只做浅包装，不会递归转换为响应式对象
    

二、为何需要 ref 包装基本类型

• 基本类型（如字符串、数字、布尔值）是不可被 Proxy 直接代理的
  
• reactive 是基于 Proxy 的对象代理机制，无法监听基本类型的变化
  
• ref 使用了一个包裹对象，利用对象的属性访问拦截，实现对基本类型的响应式包装
  
• 通过 .value 访问，保证了响应式系统能正确追踪和触发依赖更新
  

三、使用场景与注意点

四、示例代码

import { reactive, ref } from 'vue';

const state = reactive({ count: 0 }); // 对象响应式
state.count++; // 响应式更新

const num = ref(0); // 基本类型响应式
num.value++; // 响应式更新

const objRef = ref({ name: 'Tom' });
console.log(objRef.value.name); // 访问对象的属性

考察点

• 理解依赖收集在响应式系统中的核心作用
  
• 掌握响应式系统中数据结构设计原理及内存管理策略
  
• 理解 JavaScript 中 WeakMap 的特点及其在依赖管理中的应用
  
• 能结合Vue等框架实际场景，说明为何使用 WeakMap 而非普通 Map
  

参考答案

一、依赖收集简介

• 响应式系统通过“依赖收集”追踪数据（target）与副作用（effects）之间的关系
  
• 当数据变化时，能通知相关副作用重新执行，保持视图与数据同步
  
• 依赖关系通常存储为：target（响应式对象） -> key（属性名） -> deps（依赖的副作用函数集合）
  

二、为何使用 WeakMap 存储 target -> deps

• 避免内存泄漏
  
  • 响应式对象 target 作为键，副作用作为值
    
  • WeakMap 的键是弱引用，不阻止垃圾回收
    
  • 当某个响应式对象不再被引用时，WeakMap 中对应的条目会被自动回收，避免内存泄漏
    
• 性能优化
  
  • 不必手动清理依赖，减少维护成本和复杂度
    
• 设计契合
  
  • 响应式对象是引用类型，适合做 WeakMap 键
    
  • WeakMap 无法枚举键，天然保证了依赖管理的封装性和安全性
    

三、普通 Map 的不足

• 使用普通 Map 会导致键对象被强引用
  
• 响应式对象即使不再使用，也无法被回收，造成内存泄漏
  
• 必须额外编写清理逻辑，增加复杂度和出错风险
  

四、总结

• 依赖收集中的 target 对象生命周期与依赖关系绑定
  
• 利用 WeakMap 的弱引用特性，自动管理内存
  
• 保证响应式系统既高效又安全

在 Vue 中，key 是用于帮助 Vue 识别和跟踪虚拟 DOM 的变化的特殊属性。当 Vue 更新渲染真实 DOM 时，它使用 key 属性来比较新旧节点，并尽可能地复用已存在的真实 DOM 节点，以提高性能。

Vue 在进行虚拟 DOM 的 diff 算法时，会使用 key 来匹配新旧节点，以确定节点的更新、移动或删除。它通过 key 属性来判断两个节点是否代表相同的实体，而不仅仅是根据它们的内容是否相同。这样可以保留节点的状态和避免不必要的 DOM 操作。

key 的工作原理如下：

1. 当 Vue 更新渲染真实 DOM 时，它会对新旧节点进行比较，找出它们之间的差异。
2. 如果两个节点具有相同的 key 值，则 Vue 认为它们是相同的节点，会尝试复用已存在的真实 DOM 节点。
3. 如果节点具有不同的 key 值，Vue 会将其视为不同的节点，并进行适当的更新、移动或删除操作。

使用 key 可以提供更准确的节点识别和跟踪，避免出现一些常见的问题，比如在列表中重新排序时导致的元素闪烁、输入框内容丢失等。

key 必须是唯一且稳定的，最好使用具有唯一标识的值，例如使用数据的唯一 ID。同时，不推荐使用随机数作为 key，因为在每次更新时都会生成新的 key，导致所有节点都重新渲染，无法复用已有的节点，降低性能。

考察点

• 理解虚拟DOM中Diff算法的核心原理
  
• 掌握Vue中Diff算法的具体实现流程及优化手段
  
• 能分析Diff算法的性能瓶颈及其应对策略
  
• 熟悉Diff算法在组件更新和渲染中的实际应用场景
  

参考答案

一、Diff算法核心原理

• 定义
  Diff算法是虚拟DOM核心技术，用于比较新旧虚拟DOM树的差异，从而最小化实际DOM操作，实现高效渲染。

• 目标
  通过比较，找到最少的节点变更，避免全量重绘，提高性能。

• 关键思想
  

  • 只对比同一层级的节点，跨层比较复杂度高，Vue和React都遵循此原则。
    
  • 利用节点的唯一标识（Key）进行快速定位和复用。
    

二、Vue的Diff算法实现流程

1. 同层比较
   

   • 只比较同一级的子节点，递归比较节点树结构。

2. 类型判断
   

   • 如果新旧节点类型不同，直接销毁旧节点，创建新节点。

3. Key与无Key比较策略
   

   • 有Key列表
     
     • 使用双端指针策略快速匹配前后端节点（头尾指针）。
       
     • 通过Key构建映射表，快速定位新节点在旧节点中的位置，实现移动和复用。
       
   • 无Key列表
     
     • 按顺序比较，对比对应索引位置的节点，新增或删除尾部节点。

4. 具体算法细节
   

   • 双端指针优化
     

     • 用四个指针指向新旧节点的头尾，逐步往中间推进。
       
     • 依次比较头头、尾尾、头尾、尾头节点，若匹配则移动指针。
       
     • 通过这种方式快速定位节点复用或移动，减少查找。

   • 中间节点处理
     

     • 处理完双端指针后剩余的中间节点，通过Key建立映射表。
       
     • 新节点遍历映射旧节点，决定是复用、移动还是新增。

5. 递归深度对比
   

   • 对比节点属性、事件监听、文本内容等，更新发生变化的部分。
     
   • 对子节点递归执行Diff。

三、Diff算法的优化策略

• 避免不必要的DOM操作
  

  • 复用旧节点，减少销毁和创建。
    
  • 最小化移动操作，性能更优。

• 双端指针减少查找次数
  

  • 在大量列表更新时显著提升性能。

• 使用Key提高准确性和效率
  

  • Key提供节点稳定身份，避免错误复用。

• 跳过静态节点
  

  • Vue3编译时会标记静态节点，避免每次更新时重复比较。

• 缓存节点和Patch策略
  

  • 针对组件和Fragment等结构，采用不同的Patch策略。

四、应用场景

• 组件更新时，确保状态改变只影响对应部分DOM。
  
• 列表渲染（v-for）中的节点复用和移动。
  
• 动态节点插入、删除、替换。
  

五、Diff算法复杂度分析

• 传统树的Diff算法复杂度为O(n³)，不可行。
  
• Vue采用同层比较和Key映射，复杂度降至O(n)。
  
• 双端指针优化进一步减少实际查找次数。