【笔记】20230726-任务队列-秋招建议- 几道面试题.md

Shinkai005
123 阅读14分钟

【笔记】20230726-任务队列-秋招建议- 几道面试题.md

[toc]

关于解决需求和成长

新人小白: 这个需求怎么完成? 能不能按时完成?

有经验的: 这个需求有几种方案? 哪个方案最适合当下的业务场景?

新人小白+积累=有经验的.

学习过程中要注重1.忽略极致的细节,2. 放弃短暂的不懂(但是要记录)3. 走量.

反正在我目前的理解看来, 怎么能让自己每天学习时间够长, 每天在编程上花的时间更多. 就是好的学习方式.

几道前端面试题

cookie

localhost3000和5000是否可以共享cookie

这里都说可以共享, 因为根据 HTTP cookie 的规范（RFC 6265），cookie 不包含有关端口的信息，所以它们应该在同一域下的所有端口间共享。

在实际的 Web 应用开发中，开发者可以通过一些方式来"隔离"在不同端口运行的应用，例如：

  1. 使用不同的 cookie 名称或路径：可以为在不同端口运行的每个应用设置不同的 cookie 名称或路径。这样，每个应用就只能读取属于自己的 cookie。
  2. 使用代理服务器：通过代理服务器，可以让所有的应用都在同一个端口运行，而实际上它们在后台是在不同的端口运行的。这样就可以保证每个应用有自己的 cookie，而且不会与其他应用的 cookie 混淆。
  3. 使用 HTTP only cookie：可以设置 HTTP only cookie，这样它就只能通过 HTTP 请求来访问，而不能通过 JavaScript 来访问。这可以防止跨站脚本（XSS）攻击，但不会阻止 cookie 在同一域的不同端口间的共享。

跨域

  1. CORS (跨来源资源共享) : 这是最常用的解决方案，需要后端配合设置。服务器可以在响应头中设置 Access-Control-Allow-Origin 字段，表示哪些域名可以访问该资源。
  2. JSONP (JSON with Padding) : 这是一种比较老的技术，只能用于 GET 请求。它的工作原理是利用 <script> 标签没有同源限制的特性，通过动态创建 <script> 标签来发送请求，服务器返回一个函数调用，并将数据作为参数传递。
  3. 使用代理服务器: 可以设置一个代理服务器，将请求发送到代理服务器，然后由代理服务器转发请求到目标服务器，接收响应并传回给客户端。这样，客户端就可以绕过同源策略的限制。
  4. WebSockets: WebSockets 不受同源策略限制，可以用来进行跨域通信。
  5. 使用 postMessage: HTML5 引入了一个新的 API - window.postMessage，允许来自不同源的脚本彼此通信。

vue 2.x 3.x diff算法

Vue2的diff算法执行updatevnode比较新旧节点时会优先处理特殊场景，即头头比对，头尾比对，尾头比对等，并借助key值找到可复用的节点进行相关操作，有效减少移动节点的次数。

vue3中的diff算法中有两个理念，第一个是相同的前置和后置元素的预处理；第二个则是最长递增子序列，此思想又于react的diff类似又不尽相同，

前置于后置的预处理

检查新旧vnode的首尾是否相同，如果相同就可以重复利用， 如果不同就进行第二步，计算最长的递增子序列的统计，即记录新的vnode 节点中的元素的出现在旧的vnode中的节点索引位置，没有找到的记为-1。

对应的最长的递增子序列可以重复使用，而记为-1的则新增插入到新的位置，新的vnode中除了记录为-1的和最长递增子序列的之外的，移动到新的序列对应的位置即可，最后没有在新的vnode中找的， 全部删除即可

vue和reactdiff算法的区别

react中的diff算法和vue中的diff算法，都是只做同级比较，vue中的diff时调动patch函数，参数是vnode和oldVnode 分别代表新旧节点

1.vue比对节点，当节点元素类型相同，但是className不同，认为是不同类型元素，删除重建，而react会认为是同类型节点，只是修改节点属性

2.vue的列表比对，采用从两端到中间的比对方式，而react则采用从左到右依次比对的方式。当一个集合，只是把最后一个节点移动到了第一个，react会把前面的节点依次移动，而vue只会把最后一个节点移动到第一个。总体上，vue的对比方式更高效。

响应式实现原理, 如何让不在data里的变量响应式

  1. Vue 2.x: 当你向 Vue 实例的 data 对象添加一些属性时，Vue.js 将遍历这些属性并使用 Object.defineProperty 将它们转换为 getter/setter。这些 getter/setter 在用户访问属性时记录依赖关系，在属性被修改时通知改变。这种方式有一些限制，例如它不能检测到直接使用索引设置数组项或者修改对象的属性的变化。 使用this.$set(object,property,value)
  2. Vue 3.x: Vue 3 使用 Proxy 对象来处理响应式，它可以直接拦截对象的访问和修改操作，包括属性的新增和删除。这使得 Vue 3 可以支持更多类型的数据，包括数组和 Map 等，并且可以检测到更多类型的变化。ref和reactive

同步, 微任务,宏任务.

  1. 同步任务（Synchronous tasks）： 这些是最常见的任务，它们按照代码的书写顺序，依次执行。只有前一个任务执行完，才会执行后一个任务。例如，如果你在 JavaScript 文件中写了两行代码，它们就会按照书写的顺序，先后执行。
  2. 微任务（Microtasks）： 这些任务会在同步任务和渲染之后，下一个宏任务之前立即执行。也就是说，如果你创建了一个微任务，那么它会在当前的宏任务（包括当前的同步任务）完成之后，下一个宏任务开始之前执行。常见的微任务包括 Promise 的 then 和 catch 方法，以及 MutationObserver。Vue.js 的异步更新机制也是基于微任务的。
  3. 宏任务（Macrotasks）： 这些任务会被推入到宏任务队列中，只有当没有其他微任务需要执行，并且 JavaScript 调用栈为空的时候，才会从宏任务队列中取出一个任务来执行。浏览器会在每个宏任务之间进行渲染。常见的宏任务包括 setTimeout、setInterval、setImmediate（Node.js 环境）等。

在每个宏任务执行后，事件循环都会检查微任务队列并执行其中的所有任务，然后再执行下一个宏任务。这就是为什么微任务的优先级高于宏任务，并且为什么微任务可以在渲染之前完成。

以下是一些常见的宏任务：

  1. setTimeout 和 setInterval：这是最常见的宏任务，它们可以在一定的时间间隔后执行一个任务。
  2. setImmediate：这是一个 Node.js 的特性，它会在当前事件循环结束时执行，比 setTimeout(fn, 0) 要早。
  3. I/O 操作：如网络请求、读写文件等。这些操作通常是异步的，并且当它们完成时会生成一个宏任务。
  4. 用户交互：如鼠标点击、滚动事件、键盘事件等。当用户与网页交互时，会生成一个宏任务。
  5. UI 渲染：浏览器的渲染过程通常是一个宏任务。

注意，虽然这些宏任务在定义时会被添加到任务队列中，但它们不会立即执行。只有在当前的同步任务和微任务都完成后，才会执行下一个宏任务。这样就形成了一个事件循环，从宏任务队列中取出一个宏任务执行，然后执行所有的微任务，然后再取出下一个宏任务执行，如此循环。

事件循环和node时间循环区别

以下是 Node.js 事件循环的简化流程：

  1. timers 阶段：这个阶段执行 setTimeout 和 setInterval 预定的 callback
  2. I/O callbacks 阶段：处理一些上一轮循环中的少数未执行的 I/O callbacks
  3. idle, prepare 阶段：只用于 node.js 内部
  4. poll 阶段：获取新的 I/O 事件, 适当的条件下 node 将阻塞在这里
  5. check 阶段：执行 setImmediate() 设定的 callbacks
  6. close callbacks 阶段：执行 socket 的 close 事件回调

回流和重绘

  1. 重绘：当元素的一些属性发生变化时（例如颜色、背景等），但并未影响布局（即没有改变框的几何形状），浏览器就需要进行重绘。
  2. 回流：如果元素的大小、位置或者部分属性（例如宽度、高度、边距等）发生变化，这就会影响到布局。浏览器需要重新计算元素的几何属性，这个过程就是回流。回流比重绘的成本更高，因为它可能导致页面的整体布局发生变化。

重绘和回流通常会在 JavaScript 执行的过程中触发，但它们本身并不是 JavaScript 任务队列中的任务。实际上，浏览器会尽量合并这些操作，把它们延迟到一起执行，以提高性能。例如，浏览器会在一次宏任务执行完之后，然后一次性执行重绘和回流。

在编写 JavaScript 代码时，要尽量避免不必要的重绘和回流，因为它们可能会导致页面的性能下降。例如，尽量一次性修改样式，而不是逐个修改；或者使用 requestAnimationFrame 等技术来进行动画，而不是直接修改元素的样式。

canvas学的~ 面试到不咋见这个

总结一下上面面试题

  1. 浏览器执行的时候一般会把回流和重绘放在一次事件循环之后, 也就是宏任务(所有同步任务), 然后涉及到的微任务, 然后回流重绘(如果需要的话, 这个过程会在宏任务和微任务就能知道.)

在 Node.js 中，微任务（microtasks）主要包括 Promise 回调和 process.nextTick 回调。它们的执行顺序是有区别的。

  1. Promise 回调：Promise 回调被添加到微任务队列，并且会在每个阶段的结尾（即将进入下一阶段之前）执行。
  2. process.nextTick 回调：process.nextTick 是 Node.js 特有的异步 API，它的回调函数被添加到了一个特殊的队列。这个队列会在每个阶段的任何操作（包括其他微任务）之后，下一阶段开始前执行。因此，process.nextTick 的回调函数执行顺序总是在其他微任务之前。

下面是一个简化的 Node.js 事件循环模型，其中包含了微任务的执行时机：

  1. 执行 timers 阶段中到期的 timers，然后执行微任务
  2. 执行 I/O callbacks，然后执行微任务
  3. 执行 poll 阶段的 I/O callbacks，然后执行微任务
  4. 执行 check 阶段的 setImmediate()，然后执行微任务
  5. 执行 close callbacks，然后执行微任务

在每个阶段结束后，Node.js 都会检查微任务队列，如果队列中有任务，就会一次性执行完队列中的所有微任务。这就意味着，微任务的执行可能插入到任何两个主阶段之间，以及一个阶段中的一次或多次 I/O 操作之间。

要注意的是，process.nextTick 并不属于任何阶段，而是在每个阶段的每个操作后都可能执行，因此 process.nextTick 的优先级最高，总是在其他微任务之前执行。

浏览器任务队列

任务队列是一个用于管理待执行任务的队列结构，它主要用于存放异步任务的回调函数。任务队列中的任务主要来源于异步操作，比如网络请求、定时器等。当这些异步操作完成时，它们的回调函数就会被添加到任务队列中等待执行。

当 JavaScript 引擎在主线程上执行同步代码时，如果遇到了异步操作，它就会把这个异步操作交给对应的 Web API 去处理（比如 setTimeout 交给定时器线程处理，AJAX 请求交给 HTTP 线程处理等）。这时，JavaScript 引擎可以继续执行其他的同步代码，而不需要等待这个异步操作。

当异步操作完成时（比如定时器时间到了，AJAX 请求返回了结果等），它的回调函数就会被添加到任务队列中。但是，这个回调函数并不会立即执行，而是需要等待主线程上的其他同步代码执行完毕。

当主线程上的同步代码执行完毕，JavaScript 引擎就会查看任务队列，看是否有待执行的任务。如果有，就会按照先进先出（FIFO）的原则，把任务从队列中取出来执行。这个过程就是所谓的事件循环。

总的来说，任务队列是由 JavaScript 引擎和 Web API 共同维护的，异步操作的回调函数是在异步操作完成时被添加到任务队列中的，而不是在代码执行时就添加。这样就可以确保异步操作的回调函数总是在主线程空闲时才会执行。

关于秋招的几点建议-鱼皮

1."早"

准备秋招, 即使只有一个月两个月, 也要全力以赴的去准备. 有了planB就会拖延

另一个原因, 考研失败的, 准备了半年的, 大厂可能又会放出来一批, 每个时期有每个时期的困难.

如果你只有一个月两个月, 你的困难可能能为你的简历加彩

  • 查看公司官网, 线上线下宣讲会.

2.一专多长

  • 主流的技术都会.
  • 专一一项技术.
  • 从学习者变成实践者再变成研究者.

3.分清主次

八股文背不完. 而且越学八股越多

这个时候优先按照自己的简历来复习八股.

针对性的搜索和搜集八股.

4.视角切换

  • 写出自己的自我评价很正常, 但是你需要列出一些经历来证明. (如果无法证明, 我个人建议删除~)
  • 简历内容在精不在多. 用简单的话解释更难的项目也是一项技能.

简历不够一页, 还是需要说点废话补充的.

  • 看着自己的简历, 自己对自己提问. (这部分可以借助chatGPT)

5.有的di放矢

针对不同的公司修改简历

这一部分实际上很难做到海投, 所以对自己的喜欢公司加一些特别修改即可.

6.差异化

  • 给网络热门项目换皮--夹功能
  • 学一下网络上的新技术
  • 告诉面试官我不光可以跟着教程做项目, 我有思考有进步

7.持续复盘

  • 求职是一个持续的过程, 不要气馁. 如果在硬件条件没办法改变的情况下, 抓紧时间提升简历,技能等.
  • 持续学习来提升自己的简历
  • 复盘自己的面试题
  • 秋招这件事, 是一个过程, 没有达到结果也要在不断地进步, 而不是原地踏步.

8.保持理性

  • 技术/行业有红利, 职业没有.
  • 选择性放弃, 是否是更好的选择?
  • 我的放弃来自于网络?

9. 建立连接(向上社交)

  • 和大佬做朋友~
  • 多和学长学姐交流,多和面试官交流. 多和hr交流
  • 写博客, 知识分享等

10. 时间管理

  • 大家每天都是24小时, 有的人每天能做5件事, 有的人只能做一件事
  • 分割目标, 确定优先级.
  • 时间复用--背八股的时候,要去实践. 甚至可以加到简历里, 还可以加到项目中.

参考

  • 小滴课堂D总的直播. 目前在抖音直播. 搜直男技术团队.(还有小钊)
  • www.bilibili.com/video/BV1DV… 给大学生的10个求职建议，做到5点必上岸！
avatar
文章
阅读
粉丝