面试总结（持续更新）

字节、滴滴面试

• 如何触发bfc

  • display:inline-block
  • overflow:hidden
  • float: left
  • position: absolute或fixed
  • display: flow-root;
  • BFC（Block Formatting Context，块级格式化上下文）是 CSS 中 的一个概念，它是页面上一个独立的渲染区域，具有特定的布局规则。触发 BFC 可以帮助解决一些常见的布局问题，如清除浮动、避免外边距重叠等。

• 对闭包的理解以及手写闭包

  • 词法作用域：javascript使用词法作用域，这意味着函数的作用域在函数定义时就已经确定，而不是在函数调用的时候
  • 函数嵌套：当一个函数在另一个函数内部定义时，内部函数可以访问外部函数的变量
  • 闭包的形成：当内部函数被外部函数返回并在外部调用时，内部函数依然能够访问外部函数的变量
  • 闭包的特性：持久化变量-闭包可以记住并访问其词法作用域的变量，即使外部函数已经执行完毕；
    封装：闭包可以用于创建私有变量和方法，从而实现数据封装

• 闭包示例

function createCounter() {
   
  let count = 0; // 外部函数的局部变量

  return function() {
   
    // 内部函数形成闭包
    count += 1;
    return count;
  };
}

const counter = createCounter(); // 调用外部函数，返回内部函数
console.log(counter()); // 输出: 1
console.log(counter()); // 输出: 2
console.log(counter()); // 输出: 3

createCounter 函数：定义了一个局部变量 count，并返回一个匿名函数。
闭包的形成：返回的匿名函数形成了一个闭包，它捕获了 createCounter 的词法环境，因此可以访问和修改 count。
持久化状态：每次调用 counter() 时，count 的值都会被保留和更新。

• 闭包的应用

  • 数据隐藏和封装：通过闭包可以创建私有变量和方法，防止外部直接访问
  • 回调函数：在异步编程中，闭包常用于回调函数，保持对某些变量的访问
  • 函数工厂：使用闭包创建具有特定行为的函数
  • 模块模式：利用闭包实现模块化代码，封装私有数据和方法

• 注意事项

  • 内存泄漏：不当的使用闭包可能导致内存泄漏，因为闭包会保留其词法作用域的引用
    -主要是声明了变量而没有使用也没有清楚

  -性能影响：过多的闭包可能影响性能，尤其是在频繁创建和销毁闭包的情况下

• react副作用

• flex布局

• 5个接口请求如何知道成功几个失败几个，promise.allsettled

美团面试

 1. 传入时间戳，返回一个倒计时分秒

function startCountdown(targetTimestamp) {
  function updateCountdown() {
    const now = Date.now();
    const remainingTime = targetTimestamp - now;

    if (remainingTime <= 0) {
      console.log("00:00");
      return;
    }

    const totalSeconds = Math.floor(remainingTime / 1000);
    const minutes = Math.floor(totalSeconds / 60);
    const seconds = totalSeconds % 60;

    const formattedMinutes = String(minutes).padStart(2, '0');
    const formattedSeconds = String(seconds).padStart(2, '0');

    console.log(`${formattedMinutes}:${formattedSeconds}`);

    // 使用 setTimeout 代替 setInterval，确保每次调用间隔为一秒
    setTimeout(updateCountdown, 1000 - (Date.now() % 1000));
  }

  // 立即调用一次以显示初始倒计时
  updateCountdown();
}

// 示例用法
const futureTimestamp = Date.now() + 5 * 60 * 1000; // 5分钟后的时间戳
startCountdown(futureTimestamp);

1. 写一个任务队列，可以添加任务，没三秒执行一个任务

class TaskQueue {
  constructor() {
    this.queue = []; // 存储任务的队列
    this.isRunning = false; // 标记任务是否正在运行
  }

  // 添加任务到队列
  addTask(task) {
    this.queue.push(task);
    if (!this.isRunning) {
      this.runNextTask();
    }
  }

  // 运行下一个任务
  runNextTask() {
    if (this.queue.length === 0) {
      this.isRunning = false;
      return;
    }

    this.isRunning = true;
    const task = this.queue.shift(); // 取出队列中的第一个任务

    // 执行任务
    task();

    // 设置定时器，三秒后运行下一个任务
    setTimeout(() => {
      this.runNextTask();
    }, 3000);
  }
}

// 示例用法
const taskQueue = new TaskQueue();

// 添加任务
taskQueue.addTask(() => console.log('Task 1 executed'));
taskQueue.addTask(() => console.log('Task 2 executed'));
taskQueue.addTask(() => console.log('Task 3 executed'));

滴滴打车

1. bfc全称（block Formatting context）
2. 盒模型

天志数融

1. 前端如何优化

前端优化是提高网站性能和用户体验的关键步骤。优化前端可以显著减少页面加载时间，提高响应速度，并改善整体用户体验。以下是一些常见的前端优化策略：

### 1. 减少HTTP请求

- **合并文件**：将多个CSS和JavaScript文件合并为一个文件，以减少HTTP请求的数量。
- **使用CSS Sprites**：将多个图像合并为一个图像，并使用CSS定位来显示所需部分。
- **内联小型资源**：对于小型CSS和JavaScript，可以直接内联到HTML中，减少请求。

### 2. 压缩和最小化资源

- **压缩文件**：使用工具（如Gzip）压缩HTML、CSS和JavaScript文件。
- **最小化代码**：使用工具（如UglifyJS、CSSNano）去除代码中的空格、注释和不必要的字符。

### 3. 优化图像

- **选择合适的格式**：使用WebP、JPEG 2000等现代图像格式。
- **压缩图像**：使用工具（如ImageOptim、TinyPNG）压缩图像文件。
- **延迟加载**：使用懒加载技术，只有在图像进入视口时才加载。

### 4. 使用内容分发网络（CDN）

- **CDN加速**：将静态资源托管在CDN上，利用其全球分布的服务器加速资源加载。

### 5. 优化CSS和JavaScript

- **异步加载脚本**：使用`async`或`defer`属性异步加载JavaScript，以防止阻塞页面渲染。
- **CSS放在头部，JavaScript放在底部**：确保CSS在页面加载时优先加载，而JavaScript在页面内容加载后执行。

### 6. 浏览器缓存

- **设置缓存头**：通过设置HTTP缓存头（如`Cache-Control`、`Expires`）来缓存静态资源。
- **版本化文件**：使用文件名版本化（如`style.v1.css`）来控制缓存。

### 7. 优化字体加载

- **选择合适的字体格式**：使用WOFF2等现代字体格式。
- **字体显示策略**：使用`font-display`属性控制字体加载行为。

### 8. 提高页面渲染速度

- **减少DOM元素数量**：简化HTML结构，减少DOM节点。
- **使用虚拟DOM**：在使用框架（如React、Vue）时，利用虚拟DOM提高渲染效率。
- **CSS动画代替JavaScript动画**：使用CSS动画和过渡效果，减少JavaScript的计算。

### 9. 性能监控和分析

- **使用性能分析工具**：使用Google Lighthouse、WebPageTest等工具分析和监控网站性能。
- **持续优化**：根据分析结果持续优化，确保网站性能保持在最佳状态。

通过实施这些优化策略，你可以显著提高网站的加载速度和用户体验，从而提高用户满意度和网站的整体表现。

3. 如何做seo

搜索引擎优化（SEO）是一组策略和技术，用于提高网站在搜索引擎结果页面（SERP）中的排名。良好的SEO实践可以增加网站的可见性，从而吸引更多的自然流量。以下是一些关键的SEO策略和技术：

### 1. 关键词研究

- **识别关键词**：使用工具（如Google Keyword Planner、Ahrefs、SEMrush）来识别与你的业务相关的高搜索量和低竞争的关键词。
- **长尾关键词**：关注长尾关键词，这些关键词通常更具体，竞争较少，转化率更高。

### 2. 页面优化（On-Page SEO）

- **标题标签**：确保每个页面都有一个独特且描述性的标题标签，包含主要关键词。
- **元描述**：撰写吸引人的元描述，虽然它不直接影响排名，但可以提高点击率。
- **标题和副标题**：使用H1、H2、H3等标签来组织内容，确保主要关键词出现在H1标签中。
- **内容质量**：提供有价值、原创和相关的内容，确保内容长度适中并涵盖主题的各个方面。
- **图像优化**：使用描述性文件名和ALT标签来优化图像。
- **URL结构**：保持URL简洁且包含关键词。

### 3. 技术优化（Technical SEO）

- **网站速度**：优化网站加载速度，使用工具如Google PageSpeed Insights来检测和改进。
- **移动友好性**：确保网站在移动设备上的表现良好，使用响应式设计。
- **安全性**：使用HTTPS来提高网站的安全性。
- **结构化数据**：使用Schema.org标记来帮助搜索引擎理解网站内容。
- **XML站点地图**：创建并提交XML站点地图，以帮助搜索引擎抓取网站。

### 4. 外部优化（Off-Page SEO）

- **反向链接**：获取高质量的反向链接，这些链接来自权威网站，可以提高你的网站信誉。
- **社交媒体**：利用社交媒体平台来推广内容并吸引访问者。
- **在线目录和黄页**：确保你的业务信息在在线目录中准确无误。

### 5. 用户体验（UX）

- **导航**：确保网站导航简单直观。
- **内部链接**：使用内部链接来帮助用户和搜索引擎发现更多内容。
- **跳出率和停留时间**：通过提供相关内容和良好的用户体验来降低跳出率和提高停留时间。

### 6. 分析和调整

- **使用分析工具**：使用Google Analytics和Google Search Console来监控网站流量和SEO表现。
- **定期审查和调整**：根据分析数据定期调整SEO策略，以适应搜索引擎算法的变化和用户行为的变化。

SEO是一个持续的过程，需要不断的监控和优化。通过结合以上策略，你可以提高网站在搜索引擎中的可见性，吸引更多的自然流量。

4. 如何加快首屏加载速度

优酷

• react的特点
  • React 是一个用于构建用户界面的 JavaScript 库，由 Facebook 开发和维护。它具有许多独特的特点，使其在前端开发中非常受欢迎。以下是 React 的一些主要特点：

1. 声明式编程

• 声明式 UI：React 采用声明式编程范式，开发者只需描述 UI 应该是什么样子，React 会根据状态自动更新和渲染 UI。
• 简化开发：声明式编程使代码更易于理解和调试，减少了手动 DOM 操作的复杂性。

2. 组件化

• 组件：React 应用由独立、可复用的组件组成。每个组件封装了自己的逻辑和 UI，可以像拼积木一样组合成复杂的用户界面。
• 组件复用：组件化设计提高了代码的复用性和可维护性，开发者可以在不同的项目中复用相同的组件。

3. 虚拟 DOM

• 虚拟 DOM：React 使用虚拟 DOM 来提高性能。虚拟 DOM 是实际 DOM 的轻量级副本，React 会在内存中构建虚拟 DOM 树，并在状态变化时进行高效的差异计算（diffing），然后将最小的更新应用到实际 DOM。
• 性能优化：虚拟 DOM 减少了直接操作实际 DOM 的次数，提高了渲染性能。

4. 单向数据流

• 单向数据流：React 采用单向数据流（单向绑定），数据从父组件流向子组件。子组件不能直接修改父组件的数据，只能通过回调函数通知父组件更新数据。
• 易于调试：单向数据流使数据流动更加清晰和可预测，便于调试和维护。

5. JSX 语法

• JSX：JSX 是 JavaScript 的语法扩展，允许在 JavaScript 中编写类似 HTML 的代码。JSX 最终会被编译为 React.createElement 调用。
• 直观易用：JSX 使得编写组件更加直观和简洁，开发者可以在一个文件中同时编写逻辑和 UI。

6. 高效的更新机制

• Reconciliation：React 通过 Reconciliation 过程高效地更新虚拟 DOM 和实际 DOM。它使用一种高效的 diffing 算法来比较新旧虚拟 DOM 树，并计算出最小的更新操作。
• 最小更新：React 只会更新实际 DOM 中需要改变的部分，避免了不必要的重绘和重排。

7. 强大的社区和生态系统

• 社区支持：React 拥有一个庞大且活跃的社区，提供了丰富的资源、教程和第三方库。
• 生态系统：React 的生态系统非常丰富，包括状态管理库（如 Redux、MobX）、路由库（如 React Router）、UI 组件库（如 Material-UI、Ant Design）等。

8. 跨平台开发

• React Native：React 不仅可以用于构建 Web 应用，还可以通过 React Native 构建移动应用。React Native 允许使用相同的 React 组件模型构建原生移动应用。
• 跨平台一致性：通过 React 和 React Native，开发者可以在 Web 和移动平台上实现一致的开发体验和代码复用。

9. Hooks

• Hooks：React 16.8 引入了 Hooks，允许在函数组件中使用状态和其他 React 特性。常见的 Hooks 包括 useState、useEffect、useContext 等。
• 简化代码：Hooks 简化了组件逻辑的组织方式，避免了类组件中的复杂生命周期方法，使代码更加简洁和易于理解。

10. 灵活性

• 灵活的架构：React 只是一个视图层库，可以与其他库和框架（如 Redux、MobX、GraphQL）无缝集成，构建复杂的应用。
• 渐进式采用：React 可以逐步引入到现有项目中，不需要一次性重写整个应用。

通过这些特点，React 提供了一个高效、灵活且易于维护的开发方式，使其成为现代前端开发中的重要工具。

受控组件和非受控组件

受控组件（Controlled Components）

定义：

• 受控组件是指其值由 React 组件的状态（state）控制的表单元素。每次用户输入时，都会触发一个事件处理程序来更新组件的状态，从而重新渲染组件并更新表单元素的值。

特点：

• 表单元素的值由 React 组件的状态控制。
• 通过事件处理程序（如 onChange）更新状态。
• 组件的状态是单一数据源（Single Source of Truth）。

优点：

• 更容易控制和验证输入。
• 状态和 UI 保持同步，便于调试和维护。
• 可以轻松实现复杂的表单逻辑和验证。

缺点：

• 对于大型表单，可能会导致更多的状态管理代码。

---

非受控组件（Uncontrolled Components）

定义：

• 非受控组件是指其值由 DOM 自身维护的表单元素。React 使用 ref 来直接访问 DOM 元素，从而获取其值。

特点：