滴滴前端秋招面经

主要项目+八股+编程题，全程1h11min

好像对于有工作经验的同学来说，会更侧重考察实战场景题、性能优化

自我介绍
有过实习经验是吧，说说你遇到过最亮点或者最具备技术难点的项目
详细介绍一下Vuex，你是怎么理解全局状态管理的？（感觉没说出面试官想要的答案）

Vuex是一个全局状态管理工具，全局状态管理的意思就是集中地存储应用的所有组件的状态。

如何理解的：

假如我们现在有一个应用，这个应用包含驱动应用的数据源、视图和Action对吧。

这三个部分构成一个单向数据流，但是当我们的应用遇到多个组件去共享同一个状态的时候，比如说，一个组件的状态改变了，多个依赖于这个组件的页面都要跟着变，相反，来自不同页面的行为需要变更同一个状态，这样都会导致我们的组件状态很混乱，也不好维护，尤其是对于大型项目来说。

所以Vuex的作用就体现在这里，他让我们可以把组件的共享状态抽离出来，以一个全局单例模式去管理。

Vuex 的核心概念有五个：

State: State是用于存储应用中的全局状态（数据）。在 Vuex 中，State 是一个唯一的公共数据源，所有共享的数据都要统一放到 State 中。State 以独立的对象形式存在，并且是响应式的，当 State 发生变化时，与 State 相关的视图会自动更新。
Getter: Getter是用于获取 State 中的数据并进行一定程度的计算或处理。它类似于计算属性，可以根据 State 中的数据计算出新的数据，并且会缓存计算结果。当 State 中的数据发生变化时，Getter 会自动重新计算。
Mutation: Mutation是用于更改 State 的唯一方法。它是一个同步操作，通过提交类型和处理函数来实现 State 的更改。提交类型表示 State 将发生哪种类型的变化，如增加、删除或更新等；处理函数用于处理具体的状态更新逻辑。在 Vuex 中，每个 Mutation 都有一个类型和处理函数，且必须是同步执行的。
Action: Action是用于异步操作的。它可以包含任何异步逻辑，如 API 请求、延时操作等。当异步操作完成后，Action 会提交一个 Mutation 来改变 State。这样可以确保异步操作不会直接改变 State，而是通过 Mutation 以同步的方式更新 State。
Module: Module是用于将 Vuex Store 分割成模块化的方式。当应用变得庞大时，可以将不同的功能模块分组存储在不同的 Module 中，以便更好地管理和维护。每个 Module 都有自己的 State、Getter、Mutation 和 Action

Vue2和Vue3的差异
Vue2生命周期
页面上从输入url到渲染页面经历了什么（很久没看这个问题了，下面是我印象里的答案）
你详细说一下DOM解析到渲染之间的过程（我提到了重绘重排）
那你说一下什么是重绘重排
说说浏览器缓存
HTTP有哪些状态码？分别说说代表着什么含义

2xx：成功

常用：

200：请求成功

201：请求成功，并且服务器已创建新的资源；比如说用户提交表单的场景。

204：假设用户访问一个网页，请求服务器获取某个资源的最新版本。服务器检查资源后发现，该资源自上次请求以来没有发生变化。当服务器返回 204 状态码时，浏览器会认为资源可能会发生变化，所以不会使用缓存副本，而是重新下载资源。

3xx：重定向

常用：

302：表示请求成功，但服务器临时性地返回了一个重定向响应；比如说是用户访问网页重定向到登录页的场景。

304：表示请求成功，但服务器没有返回任何新内容。和204类似。

需要注意的是，204和304的区别在于缓存机制。

304 状态码告诉浏览器应该检查本地缓存，看是否可以重用之前的缓存。而 204 状态码则告诉浏览器不要使用缓存，因为资源没有发生变化。

4xx：客户端错误

5xx：服务端错误

有什么性能优化的手段吗（下面是我提到的几个点）

路由懒加载：

当打包构建应用的时候，JavaScript包会变得很大，如果不做处理，页面加载会变得很慢。

用路由懒加载的方案可以让路由被访问的时候才加载对应组件。

路由懒加载的表现形式：

我一般是在路由表里面的components后面，把路径用import的方式引入。

来个场景题
如何监测页面白屏？
我理解问题：计算白屏时间
面试官：不是，是我们要怎么才能知道页面出现了白屏？（说实话完全没接触过，一点思路都没有）

页面白屏通常指的是在加载网页时，用户看到的是一片空白的页面，没有显示任何内容。要监测页面白屏，可以在以下几个环节进行介入：

网络请求阶段：可以通过网络请求监测工具，如浏览器开发者工具（Network 面板）、性能分析工具等，查看请求的时间线和请求状态。如果发现页面的请求时间过长或某些请求失败，可能是网络连接或资源加载出现了问题，导致页面无法正常加载。
HTML 解析和渲染阶段：在浏览器的开发者工具中，可以查看页面的渲染情况和渲染时间线，以及DOM树和CSSOM树的构建过程。如果在这些过程中出现了错误或者卡顿，可能会导致页面白屏。同时，也可以检查是否存在缺少必要标签、CSS 文件引入错误、JavaScript 错误等问题。
JavaScript 执行阶段：JavaScript 的执行会阻塞页面的渲染。如果页面中的 JavaScript 代码存在性能问题、死循环、长时间运行等情况，可能会导致页面无法正常渲染。可以使用浏览器的性能分析工具来检查 JavaScript 执行的情况，查找潜在的性能问题。
页面逻辑问题：有时候页面白屏是由页面逻辑问题造成的，比如缺少必要的数据、错误的跳转逻辑等。可以通过日志记录、错误监控工具等手段来捕获和分析错误信息，以便找到并解决页面逻辑问题。

在监测页面白屏时，建议使用多种工具和方法综合分析。可以结合网络请求监控、性能分析工具、浏览器开发者工具和错误监控工具等来全面了解页面加载和渲染的各个环节，以便及时发现问题并进行优化。

页面白屏的主要原因可以归纳为以下几点：

网络问题：网络连接不稳定、服务器响应缓慢或失败等，导致页面无法成功加载所需资源。
HTML结构错误：HTML代码中存在语法错误或标签闭合不完整等问题，导致浏览器无法正确解析和构建DOM树。
CSS问题：CSS文件加载失败、样式表错误、选择器匹配问题等，导致页面无法正确渲染样式，显示为空白。
JavaScript问题：JavaScript代码错误、执行阻塞、性能问题等，导致页面无法正常执行脚本，进而导致页面无法渲染和展示内容。
资源加载问题：图片、字体、脚本等外部资源加载失败或超时，导致页面无法显示对应的内容。
服务器端问题：服务器端处理逻辑错误、数据库连接问题等，导致无法正确生成页面内容并返回给客户端。
第三方插件或库问题：使用的第三方插件或库存在版本兼容性问题、加载失败等，影响了页面的渲染和展示。
写两道题吧

function fn() {
    console.log(1);
}

let timeWorker = {}; // 全局变量

// 实现setInterval
function mySetInterval(fn, delay) {
    let key = Symbol();
    let execute = function (fn, delay) {
        timeWorker[key] = setTimeout(function () {
            fn();
            execute(fn, delay)
        }, delay)
    }
    execute(fn, delay);
    return key;
}

let timerID = mySetInterval(fn, 1000);

// 实现clearInterval
function myClearInterval(key) {
    if (key in timeWorker) {
        clearTimeout(timeWorker[key]);
        delete timeWorker[key];
    }
}

setTimeout(()=>{
    myClearInterval(timerID);
},5000)