米哈游|24秋招|前端一面

共70min

八股：

• Java序列化的本质，（不会）JS序列化本质是什么
• JavaScript 的序列化本质是将数据从其原始形式（通常是对象、数组、数字、字符串等）转换为一个格式，以便在不同的环境之间传输、存储或持久化。序列化是将数据编码为字符串或二进制数据流的过程。这是为了确保数据的持久性，以便在需要时能够重新还原为原始数据对象。
• 线程和进程有什么关系，多个线程操作会有什么安全性问题
• Tcp四次挥手的字段含义
• 为什么要4次挥手
• 这个过程中可能会出现time_wait的过程，怎么处理
• 增加本地端口范围：
• 减小TIME_WAIT超时时间：
• 重用端口：
• 使用连接池：
• 升级操作系统或调整参数：

场景题

• 场景1：一个前端应用，资源是从服务器获取的，是每次都从服务器获取相关的资源吗？
• 从首屏加载，静态资源，动态资源，缓存策略，服务端渲染的角度回答
• 场景2：http建立连接和断开连接的过程
• 其实就是输入url后经历的整个过程，详细讲一下即可
• 场景3：现在有一个input输入框，会把用户输入的内容渲染到html文档上，你认为在这个过程中存在什么安全风险
• 大抵是xss攻击和html注入攻击这两个方面的安全风险
• 场景4：一个长列表，一个ul下绑定了很多li，并且给每个li都绑定了点击事件，要怎么优化？
• 使用事件委托来处理点击事件。将点击事件绑定到ul元素上
• 防抖和节流的事件优化
• 1、这个列表项有一个公共的item，但我也需要插入一些定制化的组件进来，如何保证它们不被父级节点捕获
• 阻止冒泡就行
• 2、添加监听会用addeventlistener方法，我在不同的地方监听同一个点击事件，可能会有什么区别（即是否因为某些特殊目的去调整它的入参？）
• 通过调整第三个参数指定是事件冒泡还是事件捕获
• 3、除了事件以外，还有什么优化方法？
• 懒加载：不要一次性加载整个列表，而是根据用户滚动的位置逐步加载更多的列表项
• 批量更新：也可以将这些更新合并成一个操作，然后一次性进行DOM操作
• 虚拟滚动：使用虚拟滚动技术，只渲染可见区域内的列表项，而不是渲染整个长列表
• 场景5：现在有一个弹性盒子，怎么实现三栏布局？
• 常规问题，回答浮动、绝对定位、弹性盒、表格等三栏布局方式
• 1、中间部分怎么做自适应？
• overflow：hidden清除浮动
• 2、弹性盒布局，flex：1决定了这个盒子的哪些属性？
• 指定flex-grow为1，该元素将会占据容器中所有的剩余空间
• 3、Flex有哪些属性？放到两边的元素如何确保不被中间的元素挤压？
• 属性就不说了，保证不被挤压可以设置左右两边的flex-grow为0
• 4、弹性盒的主轴是怎么设置的？为什么有宽度了，为什么还需要flex-basis，二者在什么场景下的使用会更有倾向性？
• flex-direaction设置，flex-basis优先级更高
• 场景6：现在有一个接口的域名是a.com，另一个接口的域名是b.com，如何保证接口a可以携带上cookie（想问怎么实现A、B之间cookie和域名相互携带）
• 1、跨域的情况下如何去携带cookie？
• 设置跨域请求头： 在响应头中设置一些跨域资源共享（CORS）相关的标头，Access-Control-Allow-Origin标头允许来自a.com的跨域请求，Access-Control-Allow-Credentials标头指示浏览器可以携带cookie
• 2、Get请求不安全的原因？
• 敏感数据的暴露：GET 请求通常将数据附加到 URL 的查询字符串中，这意味着数据会明文出现在 URL 中
• 缓存问题： 因为 GET 请求通常被浏览器缓存，所以某些响应可能在浏览器中被缓存，而这些响应可能包含敏感信息
• 数据长度限制： 不同的服务器和代理可能对 URL 的长度有限制。如果 GET 请求中的查询字符串太长，服务器可能会拒绝处理请求，这可能导致服务不可用
• URL 参数注入： 如果不对 URL 参数进行适当的验证和处理，攻击者可以利用它们进行注入攻击
• 3、不想set的cookie被js截取，应该怎么处理？
• 设置httponly、使用Secure标志、同源策略（确保cookie只能在需要的域名下访问）
• 4、防御的不是前端，防御的是前端下请求的接口可能跟你不同源，你该怎么处理？
• 跨源资源共享（CORS）、认证和授权（JWT身份验证和授权）、HTTPS、
• 场景7：Js为什么会有事件循环？讲讲事件循环的过程
• js是一种单线程、非阻塞（非同步）的编程语言，用于构建Web应用程序。事件循环使得JavaScript可以处理并发的任务，例如用户输入、网络请求、定时器等，而不会导致程序阻塞或崩溃
• 1、如果我现在给一个定时器，我给它设置为0，我能立即收到它的执行吗
• 不一定，宏任务异步
• 2、如果我给他设置3000ms，我等到第3000ms的时候会收到它的执行吗
• 不一定，可能受其他任务影响

51.3 口撕代码：

• 1、链表反转有几种方法，各自的时间空间复杂度
• 迭代法，时间复杂度O（n），空间复杂度O（1）
• 递归法，时间空间复杂度均为O（n）
• 2、判断链表中是否有环有几种方法
• 快慢指针：快慢指针相遇即有环
• 哈希表：用一个集合来存储已经遍历过的节点
• 为什么快指针走两步，慢指针走一步，如果快指针走三步还可以检测出环吗
• 仍然可以检测出环，但它会导致检测的效率下降

手撕代码：

function fact(n) {
  if (n < 2){
  retum 1:
  }
  return n * fact(n - 1)
}

• 1、阅读以上代码，说明这段代码的作用
• 计算n的阶乘
• 2、把这段代码改成尾递归的形式

// 使用尾递归优化来避免递归调用堆栈溢出。在尾递归中，递归调用是函数的最后一条执行语句。
function fact(n, accumulator = 1) {
  if (n < 2) {
    return accumulator;
  }
  return fact(n - 1, n * accumulator);
}

• 3、改成循环的形式

function fact(n) {
  let result = 1;
  for (let i = 2; i <= n; i++) {
    result *= i;
  }
  return result;
}

• 4、给这个函数设计单元测试的函数

const { expect } = require('chai'); // 引入断言库chai
const fact = require('./fact'); // 引入要测试的函数

describe('fact function', () => {
  it('should return 1 for input 0', () => {
    expect(fact(0)).to.equal(1);
  });

  it('should return 1 for input 1', () => {
    expect(fact(1)).to.equal(1);
  });

  it('should return 120 for input 5', () => {
    expect(fact(5)).to.equal(120);
  });

  it('should return 362880 for input 9', () => {
    expect(fact(9)).to.equal(362880);
  });
});
// 我们编写了四个测试用例来测试 fact 函数的不同输入
// 使用Mocha的describe和it来定义测试套件和测试用例，并使用Chai的expect来断言函数的返回值是否符合预期。

反问：

• 技术栈：用的Vue全家桶
• 业务：围绕游戏产品做生态建设，比如游戏工具，游戏百科等
• 建议：......

总结：

• 本次面试基本不按常理出牌，以场景题为主，背八股解决不了问题，面的稀巴烂，事后复盘学到了很多，米不愧是宇宙第一厂