202403 #

0301 #

• 996 天, 95
• 偏函数的定义和应用场景？
• react18 自动批处理？
• 在 v18 之前，只有事件回调、生命周期回调中的更新会批处理，比如上例中的 onClick。而在 promise、setTimeout 等异步回调中不会批处理。

state = {
  a: 0
}
onClick() {
  this.setState({a: 1});
  console.log('a is:', this.state.a);
  this.setState({a: 2});
}
render() {
  const {a} = this.state;
  return <p onClick={this.onClick}>{a}</p>;
}

• 在 React 并发模式中，引入了两个主要概念：任务调度和优先级。如何理解任务调度和优先级

0302 #

• 997,94
• 面试次数还是太少，没有积累足够多的经验，没有什么信心不信心，干就是了
• 每一次面对算法题都是历史与现在的交汇，历史我忘记得太快了，这就是时间的惩罚，解决办法就是不停重发默写，默写，直到记到骨子里，然后融入到脑子里

0303 #

• 998,93
• 每次面试准备，都无从下手，如何化繁为简？只要回忆 60%核心内容，加强核心内容背诵
• 2023 行情不好，大龄员工如何跳槽

0304 #

• 999，92,这数字不错，吉祥如意
• 如果能成功进入到下一家，半年之内我会跟面试说拜拜，但是算法题永远不会说拜拜，天天记这些枯燥的术语感觉没啥大用
• 这几天，多多背诵核心知识点，巩固记忆(网络和浏览器相关)，即使休息在家，天天看这些知识点，依然不能很好的记住，需要强化记忆，反复背诵
• 算法题核心算法，多练习几遍
• navigator.sendBeacon 优势：有机会异步地向服务器发送数据，同时不会延迟页面的卸载或影响下一个导航的载入性能

0305 #

• 1000,91

• 前端系统复习

• react17Vsreact18

• 缺少架构经验？ 如何结合项目，怎么补充

• 了解使用 rollup/vite/webpack 等打包工具以及前端性能优化？ 这点如何结合项目经验，使得在面试的时候有话说？

• application/json: 表示请求体是 JSON 格式的数据。 application/x-www-form-urlencoded: 表示请求体采用 URL 编码的表单数据。

0306 #

• 1001,90
• 果然什么时候，都不会准备好面试的？everyTime,接雨水我写了将近十遍还是遗忘，二叉树的最近公共祖先也是写了近十遍，递归还是写不出来，要命了

function publicAn(root, p, q) {
  if (root == null || p == root || q == root) return root;
  let left = publicAn(root.left, p, q);
  let right = publicAn(root.right, p, q);
  if (left != null && right != null) return root;
  if (left == null && right != null) return right;
  if (left == null && right != null) return left;
  return null;
}

• 说说 Tree shaking（树摇）

• vite 打包工具涉及到的性能优化

Navigator.sendBeacon #

Navigator.sendBeacon 是一个现代的、轻量级的方法，它允许在不阻塞页面卸载的情况下发送数据。

navigator.sendBeacon("/api/data", JSON.stringify(data));

• 通过 HTTP POST 请求方式 异步 发送数据，同时不会延迟页面的卸载或影响下一导航的载入性能；
• 支持跨域，但不支持自定义 headers 请求头，这意味着：如果用户信息 Access-Token 是作为请求头信息传递，需要后台接口支持 url querystring 参数传递解析。需要考虑其兼容性。

0307 #

• 1002,89

总结 SEO 相关的知识？ #

• 区分 seo 产品和用户产品

• 不想分摊权重的链接加上 nofollow：告诉搜索引擎不要收录这个链接的网页

• robots.txt：文件规定了搜索引擎抓取工具可以访问你网站上的哪些网址

• 404 页面做好引导

• 一句话解释 Webpack 的构建原理？

useCallback useMemo, 为什么会减少 render？ #

本质上，useMemo 和 useCallback 都是用来帮助我们优化 重新渲染 的工具 Hook。它们通过以下两种方式实现优化的效果。

• 减少在一次渲染中需要完成的工作量。
• 减少一个组件需要重新渲染的次数。

const [count, setCount] = useState(0);
// one
const handler = React.memo(() => {
  return function () {
    setCount((val) => val++);
  };
}, []);
const handler = React.useCallback(() => {
  setCount((val) => val++);
}, []);

换句话说就是以下的两种实现方式的效果是相同的：

React.useCallback(function helloWorld() {}, []);

// ...功能相当于:
React.useMemo(() => function helloWorld() {}, []);

0308 #

• 1002, 88
• 还有 2 天就面试了，从容心态面对，紧张没有用，面过这么多次，有啥好囧怕的。如果后面因为算法题没过，自己认命，如果不是因为算法题，那确实有点遗憾
• nextjs 中的 ssr 和 ssg 中的怎么说

0309 #

• 1003 87

next13 改动 #

• Next 13 另一个比较大的改动是基于文件的路由系统，增加了一个 app 目录，每一层路由必须建一个文件夹，在该文件夹中建立 page.tsx 作为该路由主页面
• 而在 Next.js 12（以及以下）对应的路由系统，是所有路由文件都写在 pages 目录下，每个文件都会生成一个路由，很明显是这种方式更加简洁。

那么，Next.js 为什么要改基于文件的路由系统呢？ 主要有以下 3 点原因:

• 实现嵌套路由和持久化缓存
• 支持 React 18 中的 React server Component，实现 Streaming（流渲染）
• 实现代码目录分组，将当前路由下的测试文件、组件、样式文件友好地放在一起，避免全局查找

0310 #

• 1004 86
• 前端知识看久了，也不知道自己哪一块掌握哪一块没掌握，反正就是一个字乱，不知道从哪里开始复习和准备。在职准备比不在职准备还要痛苦，要命了，今天最后一次冲刺，只要自己努力就行，其他的随缘

rust 正在全面入侵前端 #

Turbopack 同样是一款基于 rust 构建的前端项目构建工具。Turbopack 建立在新的增量架构上，在打包时只关注开发所需的最小资源，因此不管是启动速度还是 hmr 速度，都有远超 vite 的性能。

Vue 团队正式开源 Rolldown：基于 Rust 的超快 JavaScrip 打包工具！ #

• Vue 团队正式开源了其对外公布已久的打包工具：Rolldown，它是使用 Rust 开发的 Rollup 替代品，提供了与 Rollup 兼容的 API 和插件接口，但在功能范围上将更接近 Esbuild 目前，Vite 的底层使用了两个打包工具：

• Esbuild：Esbuild 是一款高性能的 JavaScript 打包器，专注于实现极速的构建过程。它支持多种模块类型、语法转换和插件扩展，且无需缓存即可迅速完成打包任务。在 Vite 中，Esbuild 被用于依赖预打包、TypeScript 和 JSX 转换、目标降级以及代码压缩。

• Rollup：Rollup 是一个 JavaScript 模块打包器，能够编译小块代码成复杂的大型代码块，特别支持 ES6 模块。它支持 Tree Shaking，有效去除未使用的代码，减少最终文件大小。在 Vite 中，Rollup 被用于生产构建，并支持一个与 Rollup 兼容的插件接口。 vite 之所以采用两者原因是， esbuild 速度快且功能丰富，但不适合代码拆分，rollup 虽在打包方面成熟，但性能却不及原生编译工具

0311 #

• 1005 85
• 不到三个月，4 月 10 号/5 月 10 号/6 月 10 号，应该在 5 月的时候，会告知你滚蛋，所以，接下来的三个月，比较关键，不能懈怠，相信自己的算法还是有进步的
• 从去年 8 月开始默写，8/9/11/12/1/2 半年的时间手写，应该问题不大，自信一点，大概能写出基本的。后序还要归纳总结，不能服输。
• 面试前，还是会特别紧张，而且脑子里老是胡思乱想，很难做到专注
• 和为 k 的字符串(前缀和)

function perfixSum(nums, k) {
  let m = new Map([[0, 1]]);
  let sum = 0,
    count = 0;
  for (let num of nums) {
    sum += num;
    if (m.has(sum - k)) {
      count += m.get(sum - k);
    }
    if (m.has(sum)) {
      m.set(sum, m.get(sum) + 1);
    } else {
      m.set(sum, 1);
    }
  }
  return count;
}

• 手写 useTimeout/useEvent/useToggle

const useTimeout = (fn, delay) => {
  const fnRef = useRef(fn);
  useEffect(() => {
    fnRef.current = fn;
  }, []);
  useEffect(() => {
    if (delay < 0 || !delay) return;
    let timer = setTimeout(() => {
      fnRef.current();
    }, delay);
    return () => {
      clearTimeout(timer);
    };
  }, [delay]);
};
// 在组件多次 render 时保持引用一致
const useEvent = (fn) => {
  const fnRef = useRef(fn);
  useEffect(() => {
    fnRef.current = fn;
  }, []);
  return useCallback((...arg) => {
    fnRef.current(...arg);
  }, []);
};
const useToggle = (init) => {
  const [toggle, setToggle] = useState(init);
  const changeToggle = useCallback(() => {
    setToggle((val) => !val);
  }, []);
  return [toggle, changeToggle];
};

0312 #

• 1006 84

• 昨晚还是没有休息好，还是在想昨天面试的事，手写题依然要不断巩固，同时多刷几次面试，特别是哪些不想去的，多争取几次机会

• react 深度知识点还是容易被问倒，需要重塑以及温故。有些话你讲不出来的

• Object.is

+0 === -0 //true
NaN === NaN // false

0bject.is(+0，-0) // false
0bject.is(NaN，NaN) //true

0313 #

• 1008 83
• tree-shaking 的操作是文件级别还是函数级别的?
• 终其一生，我的追求是什么？我自己也不知道，只感觉世界对每个人都是不公平的，尽管你非常努力，非常努力，但是依然没啥用？说明还没有努力到头？

react 渲染流程 #

在 16 之后，为了优化性能，会先把 vdom 转换成 fiber，也就是从树转换成链表，然后再渲染。整体渲染流程分成了两个阶段：

• render 阶段：从 vdom 转换成 fiber，并且对需要 dom 操作的节点打上 effectTag 的标记
• commit 阶段：对有 effectTag 标记的 fiber 节点进行 dom 操作，并执行所有的 effect 副作用函数。

从 vdom 转成 fiber 的过程叫做 reconcile（调和），这个过程是可以打断的，由 scheduler 调度执行。 diff 算法作用在 reconcile 阶段： 1.第一次渲染不需要 diff，直接 vdom 转 fiber。 2.再次渲染的时候，会产生新的 vdom，这时候要和之前的 fiber 做下对比，决定怎么产生新的 fiber，对可复用的节点打上修改的标记，剩余的旧节点打上删除标记，新节点打上新增标记

0314 #

• 1009 82
• 项目深度,还是需要在挖挖深度，准备好

0315 #

• 10010 81
• 距离跑路的时间渐近，自己多需要点耐心和毅力? > 可惜事与愿违，已经没有机会了
• 等了好久也没等到通知，但我是打不死的小强，题目继续卷起来，每天都要练习手写编程题，练习的时候也要动一动自己精贵的脑袋，不能写了几十遍还会忘记
• 重点背诵 react 相关知识点和业务相关的复习
• 手写题计算质数的个数

function getPrime(n) {
  let count = 0;
  for (let i = 2; i <= n; i++) {
    if (isPrime(i)) {
      count++;
    }
  }
  return count;
}
function isPrime(n) {
  for (let i = 2; i * i <= n; i++) {
    if (n % i === 0) return false;
  }
  return n > 1;
}
getPrime(10);

0316 #

• 1011 80
• 每个人都有自己的使命，而我的使命就是成为更好的自己，拿下心仪公司的 offer,其他的都是过眼云烟，一切向前看。坚持自己，坚持背书，坚持手写，坚持编程
• 生成数组？

// 当你需要要生成一个0-99的数组
const createArr = (n) => new Array(n).fill().map((index, v) => v);
createArr(100);

• 去除多余空格?

// 'hello,   jack' => 'hello,jack'
var space = (str) => str.replace(/\s\s+/g, "");
space("hello,   jack");

• 异步函数判断?

var isAsyncFunction = (fn) =>
  Object.prototype.toString.call(fn) == "[object AsyncFunction]";
isAsyncFunction(async function () {});

0317 #

• 1012 79
• 保持健康，保存体力，准备开干

0318 #

• 1013 78
• 我就像一只拉磨的牛，天天拉，天天拉，天天拉，没有什么充实感可言。时间久了，顿感乏味，但弃之可惜，如何破局？
• 如何让 var [a, b] = {a: 1, b: 2} 解构赋值成功？

Object.prototype[Symbol.iterator] = function () {
  // 使用 Object.values(this) 方法获取对象的所有值，并返回这些值的迭代器对象
  return Object.values(this)[Symbol.iterator]();
};

• 如何让一个对象通过 forof 遍历

class MockIterator {
  constructor(obj) {
    this.obj = obj;
    this.len = Object.keys(obj).length;
    this.index = 0;
  }
  [Symbol.iterator]() {
    return this;
  }
  next() {
    return this.index < this.len
      ? { value: this.obj[this.index++], done: false }
      : {
          value: undefined,
          done: true,
        };
  }
}

ssr 项目痛点？ #

• Serverless 云函数: 云计算发展过程中出现的一种计算资源的抽象，它以云计算平台为基础，为开发者提供业务程序的运行环境，开发者无需关注底层资源分配、扩容部署，代码执行所必要的全部服务由平台提供。
• 做 Serveless SSR 服务，免去运维部署烦恼，减少直出接入成本！

0319 #

• 1014 77,离开的日子越来越近，可惜还没有找到合适对口的公司，该何去何从呢！
• 好的公司竞争力太大，没有高学历，专业又不对口，简历都过不了！要命，感觉又回到 7 年前，7 年前，刚开始接入编程，投啥公司都没人理，最后感谢南京厚建接纳了我，让我入门了前端开发，感谢老东家，如果有可能，回老东家养老还是非常好的。
• 彻底放弃幻想，开始另寻出路，我还是想做出点内容，不然成为程序员碌碌无为，没有给后代留下什么。

0320 #

• 1015，76
• 我还比人家多一年经验，什么都没有留下,大佬，真的是强，佩服五体投地，强烈推荐大佬的文章2023 前端年度技术总结
• 没有一个领域进行深耕，随着年纪增大，早晚有一天会被时代淘汰的。一想到这个就睡不着，神经绷紧了
• 真没算法的头脑，天天逼自己刷题有意义吗？刷题也比不过应届生，真的失败
• 学一学得物如何进行性能优化

0321 #

• 1016,75
• 身体出现亚健康信号，再次上火,打开调试：iting://xmdebugger?index=main
• try...catch 不能异步捕获代码错误

try {
  setTimeout(() => {
    throw new Error("err");
  }, 200);
} catch (err) {
  console.log(err, "error"); // 这里能否捕捉到错误？
}

在 JavaScript 中，setTimeout 是一个异步函数(宏任务)，它的回调函数会在指定的延时后被放入事件队列，等待当前执行栈清空后才执行。因此，当 setTimeout 的回调函数执行并抛出错误时，try...catch 已经执行完毕，无法捕捉到异步回调中的错误

• 如何判断两个数组内容相等？

function isSimilar(a, b) {
  if (a.length != b.length) return false;
  let m = new Map();
  for (let item of a) {
    m.set(item, m.get(item) + 1 || 1);
  }
  for (let item of b) {
    let val = m.get(item);
    if (val == undefined || val <= 0) return false;
    m.set(item, val - 1);
  }
  return true;
}
const array1 = ["apple", "banana", "cherry", "banana"];
const array2 = ["banana", "apple", "banana", "cherry"];

isSimilar(array1, array2);

0322 #

• 1017,74
• 在努力挣扎最后一次，能不能好一点就看最近这半个月了

0323/24 #

• 1018, 73/72

0325 #

• 1020, 71
• 归并排序

function mergeSort(arr) {
  let merge = (l, r) => {
    let i = 0,
      j = 0;
    let res = [];
    while (i < l.length && j < r.length) {
      if (l[i] < r[j]) {
        res.push(l[i++]);
      } else {
        res.push(r[j++]);
      }
    }
    while (i < l.length) {
      res.push(l[i++]);
    }
    while (j < r.length) {
      res.push(r[j++]);
    }
    return res;
  };
  let sort = (arr) => {
    if (arr.length == 1) return arr;
    let mid = Math.floor(arr.length / 2);
    let l = arr.slice(0, mid);
    let r = arr.slice(mid);
    return merge(mergeSort(l), mergeSort(r));
  };
  return sort(arr);
}
mergeSort([11, 22, 1, 24, 3, 4]);

0326 #

• 1021,70
• 天天手写，不带脑子思考，写几百遍都没有用，总有一天你会心累的。你自己就是个面试机器人，毫无情感
• 我挺羡慕那些主动辞职的人，只有没有啥奔头的人才继续留在这里。
• 手写题 hot 100 + 算法题 hot100,搞完就躺平，多会几道题也无济于事，把这些天搞懂，基本没啥问题
• sse 和 websocket 区别

SSE（Server-Sent Events）和 WebSocket 都是用于实现服务器与客户端之间实时双向通信的技术。虽然它们都可以用于实时更新数据，但它们在实现方式、特点和适用场景上有着明显的区别。

ES5 的继承和 ES6 的继承有什么区别？ #

• ES5 的继承时通过 prototype(构造函数机制) 来实现。ES5 的继承实质上是先创建子类的实例对象，然后再将父类的方法添加到 this 上（Parent.call(this))

• ES6 的继承机制完全不同，实质上是先创建父类的实例对象 this（所以必须先调用父类的 super()方法），然后再用子类的构造函数修改 this。

// 原型链继承
function mockExtends(Child, Parent, staticProps) {
  const proto = Object.create(Parent.prototype);
  proto.constructor = Child;
  Child.prototype = proto;
  // 继承静态方法和属性
  Parent && Object.setPrototypeOf(Child, Parent);
}
// 构造函数继承

0327 #

• 1022,69，目标还是不能改变，就算躺平，躺平前。100 道手写题+100hot 算法题必须要掌握
• Node12+ 下 axios 包使用报错引发的对 package.json's exports 等属性以及 esm 的学习
• dp 太难了，还没开始做就发现都混淆了，

// 最长公共子串

// 最长重复子串

0328 #

• 1023，68
• includes 和 indexOf 的最大的区别？ indexOf 是 === ,includes 是 ==

indexOf 要求严格，无法正确判断数组中是否有 NaN，但是 includes 可以

let arr = [NaN, 1, undefined];
console.log(arr.includes(NaN)); // true
console.log(arr.indexOf(NaN)); // -1
// undefined不受影响
console.log(arr.includes(undefined)); // true
console.log(arr.indexOf(undefined)); // 2

• import 和 require 的区别?

0329 #

• 1024，67
• react keep-alive 是怎么做的？
• ts 的函数重载怎么做的? 在 TypeScript 中，函数重载是一种类型定义的特性，它允许你为同一个函数提供多个类型签名。这样做的目的是为了在 API 文档中提供更清晰的指导，同时也能在一定程度上帮助 IDE 进行类型检查和自动补全。需要注意的是，TypeScript 编译器只在编译阶段使用函数重载签名进行参数类型检查，并不会影响最终生成的 JavaScript 代码。

// 重载签名
function addq(a: string, b: string): string;
function addq(a: number, b: number): number;

// 函数实现
function add(a: any, b: any): any {
  return a + b;
}

console.log(add("hello", "world")); // hello world
console.log(add(1, 2)); // 3

• new String('123')和 String('123')有什么区别，new String('123')==String('123')吗，typeof 判断这两个是什么

0330 #

• 1025,66
• 数组和类数组区别

let arrayLike = { 0: "a", 1: "b", 2: "c", length: 3 };
let arr = Array.from(arrayLike); // ['a', 'b', 'c']
let arr2 = [...arrayLike]; // ['a', 'b', 'c']

0331 #

• 1026 65
• Array.filter(Boolean)中的 Boolean 是什么意思? 如果要过滤数组中的空字符串，可以用简易写法：

[0, "0", " ", true, false, "", undefined, null].filter(Boolean);
// [' ', true, '0']

这句话的意思就是，把数组的元素，都用 Boolean 类进行包装，结果为 false 的自然被过滤出去了：

Boolean(0); // false
Boolean(true); // true
Boolean(3); // true
Boolean(""); // false
Boolean("false"); // true