前端面试题请看我！！！！！
面试基础学习
  1. 请说明 Ajax Fetch Axios 三者的区别
  1. 节流和防抖
// 防抖
function debounce(fn, delay = 200) {
  let timer = 0;
  return function () {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, arguments);
      timer = 0;
    }, delay);
  };
}
// 节流
function throttle(fn, delay = 100) {
  let timer = 0;
  return function () {
    if (timer) return;
    timer = setTimeout(() => {
      fn.apply(this, arguments);
      timer = 0;
    }, delay);
  };
}
  1. px % em rem vw/vh 有什么区别
  1. 箭头函数
  1. 请描述 TCP 三次握手和四次挥手
  1. for…in 和 for…of 有什么区别
  1. for await …of 有什么作用
  1. offsetHeight scrollHeight clientHeight 的区别
  1. HTMLCollection 和 NodeList 的区别
  1. js 严格模式有什么特点

HTTP

  1. HTTP 跨域请求时为何发送 options 请求
    • options 请求，是跨域请求之前的预请求
    • 浏览器自行发起的，无需我们干预
    • 不会影响实际的功能
  2. 什么是跨域？如何解决跨域

Vue

  1. Vue computed 和 watch 区别
  1. Vue 组件通信方式
  1. Vuex mutation action 区别
  1. Vue 组件的生命周期
  1. Vue 什么时候操作 DOM 比较合适
  1. Ajax 应该在哪个生命周期
  1. Vue3 Composition API 生命周期有何区别
  1. Vue router MemoryHistory(abstract)是什么

JS 高级

  1. JS 内存泄漏如何检测？场景有哪些？
  1. 什么是垃圾回收？垃圾回收的方式有哪些？
  1. weakMap weakSet 弱引用
  1. 浏览器和 nodejs 的事件循环的区别
  1. vdom 真的很快吗
  1. 遍历数组，for 和 forEach 哪个快？（循环和递归同理）

  1. nodejs 如何开启多进程，进程如何通讯？

    • 开启子进程 child_process.fork 和 cluster.fork
    • 使用 send 和 on 进行通信

  2. 什么是 JS Bridge？

  1. JS Bridge 的常见实现方式
  1. 是否了解过 requestIdleCallback 和 requestAnimationFrame 有什么区别？
  1. Vue2、Vue3 和 React 三者的 diff 算法有什么区别
  1. Vue React 为何循环时必须使用 key
  1. 移动端 H5 click 有 300ms 延迟，如何解决
  1. 网络请求中，token 和 cookie 有什么区别
  1. Session 和 JWT 哪个更好
  1. 如何实现 SSO 单点登录
  1. HTTP 协议和 UDP 协议有什么区别
  1. HTTP 协议 1.0 1.1 2.0 有什么区别
  1. 什么是 HTTPS 中间人攻击？如何预防？
  1. <script> async 和 defer 有什么区别
script | scripting:       ----****
       | HTML Parser:  ++++      +++++
script | scripting:       ----   ****
defer  | HTML Parser:  +++++++++++
script | scripting:       ----****
async  | HTML Parser:  ++++++++  ++++
  1. prefetch 和 dns-prefetch 有什么区别
  1. 你知道哪些前端攻击？该如何预防？
  1. WebSocket 和 HTTP 协议有什么区别
  1. WebSocket 和 HTTP 长轮询的区别
  1. 描述从输入 url 到页面展示的完整过程
  1. 重绘 repaint 重排 reflow 有什么区别
  1. 如何实现网页多标签 tab 通讯
  1. 网页和 iframe 如何通讯
  1. 请描述 Koa2 的洋葱圈模型

实际工作经验

  1. H5 页面如何进行首屏优化?
  1. 后端一次性返回 10W 条数据,你该如何渲染？
  1. 前端常用的设计模式有哪些？并说明使用场景
  1. 观察者模式和发布订阅模式的区别？
  1. 在实际工作中，你对 React 做过哪些优化
  1. 你使用 React 遇到过哪些坑？
  1. 如何统一监听 Vue 组件报错？
  1. 如何统一监听 React 报错？
  1. 如果一个 H5 很慢，你该如何排查性能问题？ a. 分析性能指标，找到慢的原因 b. 对症下药，解决问题 c. 持续跟进，持续优化
  1. 你在工作经历中，遇到过哪些项目难点，如何解决的？

手写题

  1. 手写一个 JS 函数，实现数组扁平化 Array Flatten
import { flatten1, flatten2, flatten3 } from "../array-flatten";
  1. 手写一个 getType 函数，传入任意变量，可准确获取类型
import { getType } from "../get-type";
  1. new 一个对象发生了什么？请手写代码表示
function newInstance(constructor, ...args) {
  const obj = Object.create(constructor.prototype);
  constructor.apply(obj, args);
  return obj;
}
  1. 深度优先遍历一个 DOM 树
  2. 广度优先遍历一个 DOM 树
  3. 手写 LazyMan
  4. 手写一个 curry 函数，把其他函数柯里化
  5. instanceof 原理是什么，请用代码表示
  6. 手写 bind
  7. 手写 EventBus 自定义事件
  8. 用 js 实现一个 LRU 缓存

分析题

  1. [‘1’, ‘2’, ‘3’].map(parseInt)
  1. 以下代码输入什么？
function changeArg(x) {
  x = 200;
}
let num = 100;
changeArg(num);
console.log(num);
let obj = { name: "xiaoming" };
changeArg(obj);
console.log(obj);
  1. 手写 convert 函数，将数组转为树
  2. 手写 convert 函数，将树转为数组（广度优先遍历）
  3. 以下代码输出什么？
function Foo() {
  Foo.a = function () {
    console.log(1);
  };
  this.a = function () {
    console.log(2);
  };
}
Foo.prototype.a = function () {
  console.log(3);
};
Foo.a = function () {
  console.log(4);
};
Foo.a(); // 4
let obj = new Foo(); // {a: Function}
obj.a(); // 2
Foo.a(); // 1
  1. 一道让人失眠的 promise 执行顺序问题
Promise.resolve()
  .then(() => {
    console.log(0);
    return Promise.resolve(4);
  })
  .then((res) => {
    console.log(res);
  });
Promise.resolve()
  .then(() => {
    console.log(1);
  })
  .then(() => {
    console.log(2);
  })
  .then(() => {
    console.log(3);
  })
  .then(() => {
    console.log(5);
  })
  .then(() => {
    console.log(6);
  });
  1. React 中，以下代码输出什么
componentDidMount() {
  // this.state.val = 0;
  this.setState({ val: this.state.val + 1 });
  console.log(this.state.val);
  this.setState({ val: this.state.val + 1 });
  console.log(this.state.val);
  setTimeout(() => {
    this.setState({ val: this.state.val + 1 });
    console.log(this.state.val);
    this.setState({ val: this.state.val + 1 });
    console.log(this.state.val);
  }, 0);
}
  1. setState 是微任务还是宏任务？

同步，不是微任务或宏任务

  1. 以下代码输出什么？
let a = { n: 1 };
let b = a;
a.x = a = { n: 2 };
console.log(a.x); // undefined
console.log(b.x); // {n: 2}
  1. 以下代码输出什么？
let a = {},
  b = "123",
  c = 123;
a[b] = "b";
a[c] = "c";
console.log(a[b]); // c
let a = {},
  b = Symbol("123"),
  c = Symbol("123");
a[b] = "b";
a[c] = "c";
console.log(a[b]); // b
let a = {},
  b = { key: "123" },
  c = { key: "456" };
a[b] = "b";
a[c] = "c";
console.log(a[b]); // c

项目设计

  1. 开发一个前端统计 SDK，你如何设计？
  1. sourcemap 有什么作用？如何配置
  1. 何时用 SPA，何时用 MPA？
  1. 设计一个 H5 编辑器的数据模型和核心功能
const store = {
  page: {
    title: "标题",
    setting: {},
    props: {},
    components: [
      {
        id: "1",
        name: "text",
        tag: "text",
        style: { color: "red" },
        attrs: {},
        text: "",
      },
    ],
  },
  activeComponentId: "1",
};
const getters = {
  layers() {
    store.page.components.map((item) => ({ id: item.id, name: item.name }));
  },
};
  1. 请设计一个“用户-角色-权限”模型，例如：博客管理后台
  1. Hybrid 模板是如何更新的？
  1. 开发一个 H5 抽奖页，你需要后端提供哪些 API？
  1. 如果你是前端负责人，如何做技术选型？（站在团队角度）
  1. 设计实现一个 H5 图片懒加载 SDK

软技能

  1. 你是否看过“红宝书”
  2. 如何做 Code review, review 哪些项目
  1. 如何学习一门新语言，需要考虑哪些方面
  1. 你觉得自己还有哪些不足之处

面经

自我介绍

      面试官您好！我叫XXX，20XX 年毕业于(xxxx学校)(xx学历)(XX专业)。 之前任职于携程商旅信息服务（上海）有限公司，担任商旅事业部高级前端开发工程师。 在职期间主要负责商旅机票退改相关项目研发，为团队提升研发效率 50%以上,降低生产故障率 30%。 对业务研发、生产事件、性能调优、埋点监控与告警都十分熟悉。 因此来面试贵司前端开发岗位，希望能获得此次机会，谢谢！

阿里影业面经

  1. 自我介绍

  2. useEffect 和 useLayoutEffect 的区别 useEffect 与 useLayoutEffect 两者都是用于处理副作用，这些副作用包括改变 DOM、设置订阅、操作定时器等。在函数组件内部操作副作用是不被允许的，所以需要使用这两个函数去处理。 useEffect 与 useLayoutEffect 两者底层的函数签名是完全一致的，都是调用的 mountEffectImpl 方法，在使用上也没什么差异，基本可以直接替换。

    useEffect 是按照顺序执行代码的，改变屏幕像素之后执行（先渲染，后改变 DOM），当改变屏幕内容时可能会产生闪烁；useLayoutEffect 是改变屏幕像素之前就执行了（会推迟页面显示的事件，先改变 DOM 后渲染），不会产生闪烁。useLayoutEffect 总是比 useEffect 先执行。

    • useLayoutEffect 阻塞浏览器重新绘制, useEffect 不阻塞浏览器绘制
    • useEffect 在 React 的渲染过程中是被异步调用的，用于绝大多数场景；而 useLayoutEffect 会在所有的 DOM 变更之后同步调用，主要用于处理 DOM 操作、调整样式、避免页面闪烁等问题。也正因为是同步处理，所以需要避免在 useLayoutEffect 做计算量较大的耗时任务从而造成阻塞。

  3. 自己用过的状态管理工具和 Context 相比有什么优势

    • 统一的状态管理模式：Rematch 使用了 Redux 的状态管理模式，通过集中式的状态存储和单向数据流，可以更好地组织和管理应用程序的状态。
    • 中心化的状态逻辑：Rematch 使用模型（Model）的概念，将状态和相关的逻辑封装在一个模型中。这种中心化的状态逻辑管理方式使得代码更具可维护性和可测试性
    • 强大的异步操作支持：Rematch 内置了常用的 Redux 中间件，如 Redux Thunk 和 Redux Saga，可以轻松处理异步操作和副作用。
    • 插件系统和工具生态：Rematch 提供了插件系统，可以根据需求选择和集成各种插件，如状态持久化、数据缓存等。
    • 更好的性能优化：Rematch 使用了 Redux 的 diffing 算法来比较状态的变化，并只更新发生变化的部分。
    • Context API 更适合简单的状态共享，而 Rematch 更适合复杂的状态管理和逻辑处理。

  4. hooks 使用有什么要注意的事项

    • Hooks 是根据组件的渲染顺序来确定的，每个 Hook 都与组件中的特定位置相关联。Hooks 的调用应该在组件的顶层。
    • 不能在循环、条件语句或嵌套函数中直接调用 Hooks，是为了保证 Hooks 的调用顺序和正确性，以及更好地组织和管理组件的状态和逻辑。

  5. 为什么要有合成事件 在传统的事件里，不同的浏览器需要兼容不同的写法，在合成事件中 React 提供统一的事件对象，抹平了浏览器的兼容性差异 React 通过顶层监听的形式，通过事件委托的方式来统一管理所有的事件，可以在事件上区分事件优先级，优化用户体验

    • 事件委托 事件委托的意思就是可以通过给父元素绑定事件委托，通过事件对象的 target 属性可以获取到当前触发目标阶段的 dom 元素，来进行统一管理
    • 事件监听 事件监听和事件绑定的最大区别就是事件监听可以给一个事件监听多个函数操作，而事件绑定只有一次
    • 事件执行顺序 16+: 原生捕获 -> 原生冒泡 -> 合成捕获 -> 合成冒泡(stopImmediatePropagation 阻止所有事件) 17+: 合成捕获 -> 原生捕获 -> 原生冒泡 -> 合成冒泡(stopPropagation)

  6. CSS 怎么实现样式隔离 作用域样式（Scoped Styles） CSS Modules CSS-in-JS 方案 命名约定

  7. new 操作符具体干了什么 创建一个新的对象 将对象与构建函数通过原型链连接起来 将构建函数中的 this 绑定到新建的对象上 根据构建函数返回类型作判断，如果是原始值则被忽略，如果是返回对象，需要正常处理

猫眼娱乐面经
  1. 自我介绍
  2. 谈谈你对 webpack 的理解？

  1. 你有没有写过 loader 和 plugin？ 没写过

  2. 你是如何使用 webpack 来优化前端性能的？

  1. http1.1 与 http2.0 的区别
  1. http 与 https 的区别
  1. 说说你对“三次握手”、“四次挥手”的理解
  1. 说说 react 的事件
  2. Node.js 如何调试
  1. 请求头都有哪些字段
  1. 前端性能优化指标有哪些？
  1. react 什么时候会触发重新渲染？
  1. 说说你对计算机网络模型的理解
  1. web 常见的攻击方式有哪些，以及如何进行防御？
  1. 数据类型检测的方式有哪些？
  1. 谈谈对 this 对象的理解
  1. Javascript 如何实现继承？
  1. React 中为什么要给组件设置 key？
  1. script 标签中， async 和 defer 两个属性有什么用途和区别？
  1. null 和 undefined 有什么区别？
  1. 说说 JavaScript 中内存泄漏有哪几种情况？
  1. React Fiber 是什么？
  1. 前端有哪些优化 http 请求的策略?
  1. 列举几个常见的 hooks
  1. 编程题：只出现一次的数字 给定一个非空整数数组，除了某个元素只出现一次以外，其余每个元素均出现两次。找出那个只出现了一次的元素。 输入: [4,1,2,1,2] 输出: 4
const singleNumber = (nums) => {
  let result = 0;
  for (const num of nums) {
    result ^= num;
  }
  return result;
};
  1. 编程题：两数之和 给定一个整数数组 nums 和一个整数目标值 target，请你在该数组中找出 和为目标值 target 的那 两个 整数，并返回它们的数组下标。 输入：nums = [2,7,11,15], target = 9 输出：[0,1]
const twoSum = (nums, target) => {
  const map = new Map();
  for (let i = 0; i < nums.length; i++) {
    if (map.has(target - nums[i])) {
      return [map.get(target - nums[i]), i];
    } else {
      map.set(nums[i], i);
    }
  }
  return [];
};