面试八股文小记

CSS 🔗

• 盒子模型

• flex 布局

• 如何垂直居中

• em、rem、px 区别

• css 选择器与优先级

• position 定位方式

• BFC 是什么

  • 如何触发 BFC
  • 普通文档流中，块级元素垂直方向 margin 重叠问题如何解决

• 实现 0.5px 的线

• 实现瀑布流布局

JavaScript 🔗

• let var const 区别

• 原型与原型链

• 原型链继承、构造函数继承、组合式继承（原型链 + 构造函数）、原型式继承、寄生式继承、寄生组合式继承

• async 与 defer

• onLoad 与 DOMContentLoaded

• 如何判断变量类型

• 如何实现深拷贝

• 函数柯里化

• 防抖与节流

• 浏览器强缓存、协商缓存

• http status 301、302、303、304 代表什么

• 事件循环机制

• 实现 Promise.All

• 实现一个异步任务队列，最多同时执行 6 个任务

  • class AsyncTaskQueue {
      constructor(concurrency = 6) {
        this.concurrency = concurrency; // 最大并发数
        this.running = 0; // 当前正在运行的任务数
        this.queue = []; // 待执行的任务队列
        this.completed = 0; // 已完成的任务数
        this.totalTasks = 0; // 总任务数
      }
    
      // 添加任务到队列
      add(task) {
        this.queue.push(task);
        this.totalTasks++;
        this.next();
        return this; // 支持链式调用
      }
    
      // 批量添加任务
      addAll(tasks) {
        tasks.forEach((task) => this.add(task));
        return this;
      }
    
      // 执行下一个任务
      next() {
        // 当正在运行的任务数小于并发数且队列不为空时
        while (this.running < this.concurrency && this.queue.length > 0) {
          const task = this.queue.shift();
    
          // 包装任务以捕获错误并确保执行next
          const wrappedTask = async () => {
            try {
              this.running++;
              await task();
            } catch (error) {
              console.error("Task failed:", error);
            } finally {
              this.running--;
              this.completed++;
              this.next();
    
              // 所有任务完成时触发回调
              if (
                this.completed === this.totalTasks &&
                typeof this.onComplete === "function"
              ) {
                this.onComplete();
              }
            }
          };
    
          wrappedTask();
        }
      }
    
      // 设置完成回调
      onComplete(callback) {
        this.onComplete = callback;
        return this;
      }
    }
    

Webpack 🔗

• 打包过程是怎样的

• 打包体积与速度如何优化

• 如何自己实现一个 loader 与 plugin

React 🔗

• 常用 hooks 有哪些

• setState 更新同步还是异步

• react 并发渲染模式是什么

• react fiber 架构是什么

• react 的渲染优先级怎么实现的