钉子的生活日记
文章目录

携程前端一面整理笔记（三十四）

2. CSS 权重、样式穿透、样式覆盖异常

答案

2.1 CSS 权重如何计算

通常可以按下面优先级理解：

  1. !important
  2. 行内样式
  3. id
  4. class / 属性选择器 / 伪类
  5. 标签 / 伪元素
  6. 通配符 / 继承

常见记法是：

  1. 行内样式：1000
  2. id：100
  3. class：10
  4. 标签：1

2.2 什么是样式穿透

常见有两种语境：

  1. 样式意外影响到不该影响的元素
  2. 在组件隔离体系下，需要有意去影响子组件内部样式

比如 Vue 里早期会提到深度选择器：

  1. >>>
  2. /deep/
  3. :deep()

2.3 样式覆盖异常常见原因

  1. 选择器优先级不够
  2. 样式加载顺序问题
  3. 全局样式污染
  4. 组件库默认样式覆盖业务样式
  5. CSS Modules / scoped 作用域导致命中失败

2.4 项目里怎么治理

  1. 尽量用局部作用域样式
  2. 控制全局样式数量
  3. 统一命名规范，比如 BEM
  4. 组件库主题和业务覆盖方式约定清楚
  5. 不滥用 !important

2.5 如果面试官追问 CSS Modules

可以答：

CSS Modules 本质上是构建阶段把类名做局部作用域映射，避免全局命名冲突。优点是隔离强，缺点是覆盖第三方样式时要更清楚地处理作用域边界。

3. 0.1 + 0.2 === 0.3 吗，为什么

答案

3.1 直接结论

在 JavaScript 里：

0.1 + 0.2 === 0.3 // false

3.2 原因

因为 JavaScript 的数字采用 IEEE 754 双精度浮点数表示。
像 0.1、0.2 这样的十进制小数，转换成二进制时往往是无限循环小数，存储时只能近似表示，所以相加后会有精度误差。

3.3 怎么解决

常见方案：

  1. 判断小数是否相等时，允许误差范围
  2. 金额类场景转整数处理
  3. 使用高精度计算库

示例：

Math.abs(0.1 + 0.2 - 0.3) < Number.EPSILON

3.4 面试表达

这不是 JavaScript 独有的问题，而是二进制浮点数表示精度问题。业务里如果是金额，通常会转成分来算，或者使用高精度库。

4. ES6 特性与 Promise 理解

答案

4.1 常见 ES6 特性

常见可答：

  1. let / const
  2. 箭头函数
  3. 模板字符串
  4. 解构赋值
  5. 默认参数
  6. 扩展运算符
  7. class
  8. Promise
  9. Map / Set
  10. 模块化 import / export

4.2 Promise 是什么

Promise 是 JavaScript 里处理异步编程的一种方案，用来表示一个异步操作未来的结果。

它有 3 种状态：

  1. pending
  2. fulfilled
  3. rejected

4.3 Promise 的特性

  1. 状态一旦改变就不可逆
  2. 支持链式调用
  3. 能把回调地狱改写成更线性的异步流程
  4. 错误可以通过链路统一捕获

4.4 面试表达

Promise 本质上是对异步结果的抽象，解决了回调地狱问题。它的核心特性是状态不可逆、支持链式调用、可以统一错误处理。

5. Promise.all 在项目中的使用

答案

这个问题要结合真实场景回答，不要只背定义。

常见场景

  1. 页面初始化并行拉多个接口
  2. 详情页同时获取基础信息、评论、推荐数据
  3. 表单提交前并行校验多个异步条件

核心特点

  1. 并行执行多个 Promise
  2. 全部成功才返回结果数组
  3. 有一个失败就直接 reject

面试表达

我在页面初始化或者复杂模块加载时经常会用 Promise.all 并行拉取多个互不依赖的数据，比如基础信息、配置项和推荐数据。这样能降低总等待时间，但前提是这些请求之间没有强依赖关系。

6. 性能优化这个指标，原先是什么样的，优化后是什么样的，如何测试

答案

6.1 常见性能指标

前端常见可以答：

  1. 首屏时间
  2. FCP
  3. LCP
  4. TTI
  5. CLS
  6. 接口耗时
  7. JS bundle 大小

6.2 优化前后怎么说

面试里最好给出对比：

  1. 首屏从 3.2s 降到 1.8s
  2. 主包体积从 1.5MB 降到 700KB
  3. 列表渲染掉帧明显减少

6.3 如何测试

  1. Chrome DevTools
  2. Lighthouse
  3. Performance 面板
  4. Web Vitals 埋点
  5. 线上真实用户监控

6.4 面试表达

性能优化不能只说“快了”，最好要落到可量化指标，比如首屏、LCP、bundle 体积、接口耗时等，然后说明你是怎么测出来的，比如 DevTools、Lighthouse 或线上埋点。

7. 像有些错误不是服务端出现，而是在客户端异常抖动报错，导致资源超时，请问能捕获到这种错误吗

答案

7.1 可以捕获，但分情况

可以从几个层次回答：

  1. JS 运行时异常
  2. 资源加载异常
  3. Promise 异常
  4. 网络请求超时
  5. 白屏和卡顿埋点

7.2 常见捕获方式

  1. window.onerror
  2. window.onunhandledrejection
  3. 资源加载错误监听
  4. 请求层拦截器和超时处理
  5. 性能埋点和日志上报

7.3 但要说明边界

有些底层崩溃、浏览器层异常、用户网络瞬断，不一定能完整拿到所有上下文，所以要配合：

  1. 日志重试
  2. 错误采样
  3. 网络状态监听

8. 如果出现网络波动，这段时间无法上传这种情况下有考虑过吗

答案

这题偏工程实战。

可答方向

  1. 断点续传
  2. 分片上传
  3. 失败重试
  4. 上传状态持久化
  5. 网络恢复后继续上传

标准答法

如果上传文件比较大，通常会做分片上传和断点续传。网络波动时记录已经成功的分片，失败分片重试，网络恢复后继续传，避免整文件重新上传。

9. 大文档编辑，性能优化的手段，分段 chunk 是怎么分的，是按照 AST 还是按照行，行的话，如果遇到图片这种你是怎么做的

答案

这题明显偏编辑器或富文本场景。

9.1 大文档性能优化常见方向

  1. 虚拟渲染
  2. 分块渲染
  3. 增量更新
  4. 延迟解析
  5. 异步计算布局

9.2 chunk 怎么分

可以从 2 个思路答：

  1. 按结构分，比如 AST / block / paragraph
  2. 按可视区域和行分片

9.3 面试里怎么讲更稳

更推荐回答：

如果是富文本或结构化文档，我更倾向于按块级结构分段，而不是纯按字符或纯按行。因为段落、标题、图片、表格这些天然就是文档块，更适合做增量渲染和局部更新。

9.4 图片怎么处理

  1. 图片作为独立 block
  2. 懒加载
  3. 预估尺寸占位
  4. 进入可视区再解码渲染

10. 百度实习的经历介绍

答案

这类题不要只讲“做了什么”，而要讲：

  1. 背景
  2. 负责内容
  3. 难点
  4. 结果

推荐结构

  1. 做的是什么业务
  2. 你负责的模块是什么
  3. 遇到的技术挑战是什么
  4. 你怎么解决
  5. 最后的结果和收益是什么

11. 在你学习或工作过程中，有哪些 AI 的方法或手段去提升你的开发效率

答案

可以答成“工作流增强”，不要只说“问 AI”。

常见方向

  1. 文档检索和总结
  2. 代码补全与重构建议
  3. 单测和 mock 数据生成
  4. Bug 排查思路辅助
  5. SQL / 脚本 / shell 生成
  6. PR 描述和文档草稿生成

更成熟的答法

我会把 AI 当成研发工作流助手，而不是单纯问答工具，比如用它快速读文档、生成样板代码、补测试、做重构建议，以及整理项目知识沉淀。

12. 生成对应的文档用于后续复用，有这种东西吗？.rules 里面是什么

答案

这题明显是在问：

  1. 你有没有知识沉淀意识
  2. 你有没有把 AI 能力做成团队规则化资产

可以这样答

我会沉淀两类文档：

  1. 项目知识文档
  2. AI 使用规范文档

比如 .rules 可以放：

  1. 代码风格要求
  2. 项目目录约定
  3. 接口调用规范
  4. 组件开发约束
  5. 提示词模板
  6. 安全边界要求

一句话：

不是每次都让 AI 从零猜，而是给它固定上下文、固定规则和固定输出要求。

13. 在公司里面如何结合 AI 工具快速上手应用，token 消耗大怎么处理

答案

这题偏 AI 工程实践。

快速上手的思路

  1. 给 AI 一个项目知识底座
  2. 文档结构化
  3. 固定规则和模板
  4. 常见问题沉淀成知识库

Token 优化思路

  1. 不把全量文档直接丢进去
  2. 做检索增强，只取相关片段
  3. 文档分块和摘要
  4. 元数据过滤
  5. 高频问答缓存

面试表达

如果团队要真正用好 AI，不是把全部文档都塞进 prompt，而是要做知识分块、检索增强、摘要和缓存，让模型只拿到当前问题真正相关的上下文，这样既省 token，也更准。

14. AI 的出码率有多少

答案

这个问题不建议答成一个固定百分比，因为它本来就没有统一标准。

更稳的回答方式

可以先澄清：

出码率 不是特别标准的统一指标，它可能指：

  1. 代码生成速度
  2. 一次生成可直接运行代码的比例
  3. 最终可被采纳代码的比例

推荐回答

在真实项目里，我更关注的是：

  1. 可运行率
  2. 可通过测试率
  3. 最终被采纳率

如果是熟悉场景、上下文给得足、约束比较明确，AI 生成的样板代码和重复性代码可用率会比较高；
但涉及复杂业务逻辑、架构决策和安全边界时，仍然需要人工把关。

一句话：

AI 更擅长提高编码效率，不适合把最终正确性交给它兜底。