No144.精选前端面试题，享受每天的挑战和学习

🤍 前端开发工程师（主业）、技术博主（副业）、已过CET6
🍨 阿珊和她的猫_CSDN个人主页
🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》
🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

如何优化公司项目的代码

优化公司项目的代码可以根据具体项目和代码的情况采取多种策略。以下是一些常见的代码优化技巧：

1. 代码审查（Code Review）：进行代码审查可以帮助发现潜在的问题和改进的机会。通过与团队成员一起审查代码，可以分享最佳实践、提供反馈和建议，并确保代码质量和一致性。

2. 优化算法和数据结构：优化算法和数据结构能够提高代码的效率。评估代码中使用的算法和数据结构，尽量选择更高效的实现方式，以减少时间和空间复杂度。

3. 减少重复代码：重复的代码容易导致维护困难和冗余。使用函数、类、模块等方式来封装可复用的代码，并尽量减少冗余代码的存在。

4. 优化网络请求：减少网络请求的次数和数据量可以提高应用程序的响应速度。考虑合并请求、缓存数据、使用压缩和分段加载等技术来优化网络请求。

5. 懒加载和按需加载：将页面或模块的加载分解成多个阶段，根据需求动态加载和渲染可以提高初始加载速度和响应性能。延迟加载非关键资源和按需加载代码可以优化网页加载性能。

6. 优化图片和媒体资源：使用适当的压缩和格式化技术来减小图像和媒体文件的大小。选择合适的图像格式、使用缓存和延迟加载，以及懒加载技术可以加速网页的加载速度。

7. 缓存优化：合理利用浏览器和服务器的缓存机制来减少重复计算和请求。设置正确的缓存头信息、使用本地缓存、CDN 缓存等方式可以降低服务器负载和提高响应速度。

8. 前端性能优化：优化前端代码可以提高用户体验和网站性能。合理使用 CSS 和 JavaScript、减少 DOM 操作、优化渲染次数、使用异步加载、减少重绘和重排等技术可以提高页面的性能和响应速度。

9. 测试和性能监控：编写自动化测试用例并进行性能测试是优化代码的重要手段。使用性能监控工具对应用进行实时监测，找出性能瓶颈和潜在的问题，以便及时进行优化和改进。

10. 持续优化和迭代：代码优化是一个持续的过程。通过监控用户反馈、观察应用的性能指标和持续的代码审查来不断改进和优化代码。

根据项目的具体需求和现状，选择适合的优化策略和技术，同时与团队成员一起合作，共同努力优化代码质量和性能。记住，优化应该是基于实际问题和数据的评估和反馈，而不是盲目进行的。

说下js单线程

JavaScript 是一种单线程（Single-threaded）编程语言，这意味着它在同一时间只能执行一个任务。这与一些其他编程语言（如Java和C++）不同，这些语言可以并发执行多个任务。

JavaScript 单线程的特性源于其最初设计用于在浏览器中处理用户交互和操作 DOM（文档对象模型）。由于 JavaScript 在浏览器中的主要用途是处理网页的交互和逻辑，因此单线程的设计足够满足这些需求。

单线程意味着 JavaScript 只有一个执行上下文，一次只能执行一个任务。任务按照它们添加到执行队列中的顺序依次执行，即使某个任务执行时间很长，也会阻塞后续任务的执行。

由于 JavaScript 单线程的特性，当执行 JavaScript 代码时，如果遇到长时间运行的任务（例如大量计算或网络请求），这可能会导致页面响应缓慢，用户界面出现卡顿的现象。这也是为什么要注意避免阻塞 JavaScript 主线程的操作，例如耗时的计算或同步的网络请求。

为了解决长时间运行任务阻塞主线程的问题，JavaScript 引入了异步编程模型。通过使用回调函数、Promise、async/await 等机制，可以将长时间运行的任务放入后台，并在完成后通知主线程继续执行其他任务。这种非阻塞的异步模型使得 JavaScript 程序可以更好地处理并发和异步操作。

值得一提的是，尽管 JavaScript 是单线程的，但在浏览器环境中，还有其他线程可以处理一些任务。例如，浏览器提供的 Web Workers 允许在独立的后台线程中执行 JavaScript 代码，这样可以在后台处理一些计算密集型任务，而不会阻塞主线程。但 Web Workers 之间的通信仍然是通过消息传递的异步机制。

总而言之，JavaScript 是一种单线程编程语言，它一次只能执行一个任务。为了处理长时间运行的任务和提高并发性，JavaScript 提供了异步编程模式和其他机制。开发者应该注意避免执行长时间运行的任务，以保持 JavaScript 主线程的响应性能。

手写实现promise

下面是一个简单的手写实现 Promise 的示例：

class MyPromise {
  constructor(executor) {
    this.state = 'pending';
    this.value = undefined;
    this.reason = undefined;
    this.onFulfilledCallbacks = [];
    this.onRejectedCallbacks = [];

    const resolve = value => {
      if (this.state === 'pending') {
        this.state = 'fulfilled';
        this.value = value;
        this.onFulfilledCallbacks.forEach(callback => callback(value));
      }
    };

    const reject = reason => {
      if (this.state === 'pending') {
        this.state = 'rejected';
        this.reason = reason;
        this.onRejectedCallbacks.forEach(callback => callback(reason));
      }
    };

    try {
      executor(resolve, reject);
    } catch (error) {
      reject(error);
    }
  }

  then(onFulfilled, onRejected) {
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
    onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason; };

    const promise = new MyPromise((resolve, reject) => {
      if (this.state === 'fulfilled') {
        setTimeout(() => {
          try {
            const result = onFulfilled(this.value);
            resolvePromise(promise, result, resolve, reject);
          } catch (error) {
            reject(error);
          }
        }, 0);
      } else if (this.state === 'rejected') {
        setTimeout(() => {
          try {
            const result = onRejected(this.reason);
            resolvePromise(promise, result, resolve, reject);
          } catch (error) {
            reject(error);
          }
        }, 0);
      } else if (this.state === 'pending') {
        this.onFulfilledCallbacks.push(value => {
          setTimeout(() => {
            try {
              const result = onFulfilled(value);
              resolvePromise(promise, result, resolve, reject);
            } catch (error) {
              reject(error);
            }
          }, 0);
        });
        this.onRejectedCallbacks.push(reason => {
          setTimeout(() => {
            try {
              const result = onRejected(reason);
              resolvePromise(promise, result, resolve, reject);
            } catch (error) {
              reject(error);
            }
          }, 0);
        });
      }
    });

    return promise;
  }

  catch(onRejected) {
    return this.then(undefined, onRejected);
  }

  finally(onFinally) {
    return this.then(
      value => MyPromise.resolve(onFinally()).then(() => value),
      reason => MyPromise.resolve(onFinally()).then(() => { throw reason; })
    );
  }

  static resolve(value) {
    if (value instanceof MyPromise) {
      return value;
    }

    return new MyPromise(resolve => resolve(value));
  }

  static reject(reason) {
    return new MyPromise((resolve, reject) => reject(reason));
  }

  static all(promises) {
    return new MyPromise((resolve, reject) => {
      const results = [];
      let count = 0;

      const processResult = (index, result) => {
        results[index] = result;
        count++;

        if (count === promises.length) {
          resolve(results);
        }
      };

      for (let i = 0; i < promises.length; i++) {
        const promise = promises[i];
        MyPromise.resolve(promise).then(
          result => processResult(i, result),
          error => reject(error)
        );
      }
    });
  }

  static race(promises) {
    return new MyPromise((resolve, reject) => {
      for (let i = 0; i < promises.length; i++) {
        const promise = promises[i];
        MyPromise.resolve(promise).then(
          result => resolve(result),
          error => reject(error)
        );
      }
    });
  }
}

function resolvePromise(promise, result, resolve, reject) {
  if (promise === result) {
    return reject(new TypeError('Chaining cycle detected for promise'));
  }

  if (result instanceof MyPromise) {
    result.then(resolve, reject);
  } else {
    resolve(result);
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152

上述代码是一个简单的 Promise 实现，包括 then、catch、finally、resolve、reject、all 和 race 方法。需要注意的是，这只是一个简化的实现，不包含所有 Promise 的功能和特性，例如 Promise 的微任务调度等。在实际的应用中，建议使用原生的 Promise 实现或第三方库，它们经过了广泛的测试和优化，更稳定可靠。

什么是事件循环

事件循环（Event Loop）是 JavaScript 运行时环境中负责处理异步操作和事件的机制。它是一种用于协调和调度 JavaScript 代码执行的运行模型。

JavaScript 是一门单线程的编程语言，它一次只能执行一个任务。然而，JavaScript 运行在一个支持事件驱动的环境中，例如浏览器或 Node.js，其中存在许多异步操作和事件（比如用户交互、网络请求、定时器等）需要处理。事件循环机制允许 JavaScript 在处理这些异步操作时保持响应性，并避免长时间阻塞代码的执行。

事件循环的基本工作原理如下：

1. JavaScript 引擎首先会执行所有的同步任务，这些任务会按照它们出现在代码中的顺序依次执行。

2. 当遇到异步任务时，例如发起一个网络请求或设置一个定时器，JavaScript 引擎会将该任务交给相应的运行环境（如浏览器的 Web API 或 Node.js 的事件触发器）处理，同时继续执行后续任务。

3. 异步任务完成后，会被添加到一个任务队列（Task Queue）中，等待事件循环将其取出并执行。任务队列会根据任务的类型进行分类，典型的分类包括宏任务（Macro Task）和微任务（Micro Task）。

4. 当同步任务执行完成后，事件循环会检查微任务队列，如果存在微任务，会依次执行队列中的所有微任务。微任务包括 Promise 的回调函数、MutationObserver 的回调函数以及 process.nextTick 等。

5. 在执行微任务期间，如果又有新的微任务进入队列，会立即执行这些新的微任务，直到队列为空。

6. 微任务队列为空后，事件循环会从宏任务队列中选择一个任务出队，并执行该任务的代码。

7. 重复上述步骤，不断循环处理微任务和宏任务，直到所有任务都执行完成。

需要注意的是，事件循环是一个不断运行的循环。它负责不断地将任务从各个队列中取出并执行，保证 JavaScript 可以处理异步操作和事件的发生。

事件循环的机制保证了 JavaScript 的异步操作和事件的执行顺序，同时也能够避免阻塞代码的执行，保持代码的响应性。了解事件循环的工作原理对于理解 JavaScript 异步编程非常重要，也有助于避免常见的异步编程陷阱和错误。