滴滴前端面试题及详细答案.docxVIP

滴滴前端面试题及详细答案

一、基础核心题（高频必问）

1.说说CSS中的BFC，以及你在项目中用它解决过什么问题？

考察点：CSS渲染机制核心概念，实战应用能力

答案：BFC就是块级格式化上下文，本质是一个独立的渲染区域，内部元素的布局规则不会影响外部元素，外部也不会干扰内部。

触发BFC的常见条件有这几种：float不为none；overflow设为hidden、auto或scroll；position是absolute或fixed；display为flex、grid或inline-block。

实际项目中我主要用它解决两个问题：一是清除浮动导致的父容器高度塌陷，比如滴滴订单列表组件里，子元素用了float布局后父容器撑不起来，给父容器加个overflow:hidden触发BFC，就能让父容器自动包裹子元素；二是解决垂直margin重叠，比如列表项之间的上下margin会合并成一个，给每个列表项外面包一层触发BFC的div，就能让margin正常生效，保证列表项间距一致。

2.解释下JavaScript中的原型链，以及它的核心作用是什么？

考察点：JS继承机制的底层原理

答案：首先要明确两个关键属性——每个对象都有__proto__（隐式原型），每个构造函数都有prototype（显式原型）。原型链的本质就是“对象通过__proto__串联起来的查找链路”：当访问一个对象的属性或方法时，如果对象自身没有，就会通过__proto__找它构造函数的prototype；如果还没找到，就继续找prototype的__proto__，一直往上直到Ototype（原型链顶端，它的__proto__是null）。

核心作用有两个：一是实现JS的继承，让子类能共享父类原型上的属性和方法，不用重复定义，减少内存占用，比如我们写组件时继承React.Component，就是通过原型链复用它的setState、render等方法；二是统一对象的基础行为，比如所有对象都能调用toString()、hasOwnProperty()，这些方法其实都是从Ototype上继承来的。

3.说说事件冒泡和事件捕获，结合滴滴业务场景举个应用例子？

考察点：DOM事件流机制，事件委托实战

答案：DOM事件流分三个阶段：捕获阶段（从window往下遍历到目标元素）、目标阶段（事件触发在目标元素上）、冒泡阶段（从目标元素往上回溯到window）。事件捕获是“从父到子”的传播，事件冒泡是“从子到父”的传播。

实际开发中冒泡用得更多，核心应用是事件委托。比如滴滴的司机列表页面，列表项可能有上百个，如果给每个列表项都绑点击事件（跳转到司机详情），会占用大量内存。这时候就可以用事件委托：给列表的父容器绑一个点击事件，利用冒泡机制，点击任何列表项都会触发父容器的事件，再通过event.target找到具体点击的列表项，实现跳转。这样只需要一个事件监听，大大减少了内存开销。

捕获阶段偶尔用在需要优先拦截的场景，比如弹窗遮罩层，要先拦截点击事件避免穿透到下层内容，就可以给遮罩层绑定事件时，把addEventListener的第三个参数设为true，让事件在捕获阶段触发。

4.HTTP缓存有哪些类型？滴滴项目中如何利用缓存优化性能？

考察点：HTTP协议核心，前端性能优化实战

答案：HTTP缓存主要分强缓存和协商缓存两类，核心目的都是减少重复请求，提升页面加载速度。

强缓存是客户端直接判断缓存是否有效，不用发请求到服务器。通过响应头的Cache-Control（比如max-age=3600表示缓存1小时）或Expires（绝对时间）控制。如果缓存有效，直接从本地读取资源，返回200OK(fromdiskcache)。

协商缓存是客户端先发送请求到服务器，服务器判断缓存是否有效：有效就返回304NotModified，让客户端用本地缓存；无效就返回新资源和200。通过Last-Modified/If-Modified-Since（基于时间戳）或ETag/If-None-Match（基于资源哈希）实现。

滴滴项目中是这么用的：对于静态资源（比如图片、JS、CSS），用强缓存+文件名哈希的方式——给资源文件名加个哈希后缀（比如app.[hash].js），发布新版本时哈希值变化，浏览器就会重新请求新资源；没更新时就走强缓存，不用跟服务器交互。对于接口数据，用协商缓存，比如用户的行程列表接口，设置ETag，用户再次下拉刷新时，服务器判断数据没变化就返回304，减少数据传输量，提升刷新速度。

二、进