拼多多二面凉经

怎么就这么巧，我在国际机票实习，他在国内机票干过，于是问了好多ctrip的问题，还想看看我有没有读过内部框架代码，痛苦的几十分钟啊 =。=

问题基本都是让我尽可能多说实现方法 但我就是说不出他要的那一个

前端动画实现方式

• setTimeout、setInterval、requestAnimationFrame;
• CSS Animation、Transition;
• webGL;
• Web Animation API (WAAPI)

// 面试官想让我说出来webGL或者WAAPI

前端异常监控

• 重写console.error();
• React: ErrorBoundary, componentDidCatch();
• 监听页面error事件;

// 面试官想让我说出来error事件监听

window.onerror = (msg, url, row, col, error) => {
  console.log({
    msg,  url,  row, col, error
  })
  return true;
};

window.addEventListener('error', (msg, url, row, col, error) => {
  // 并不知道是404还是其他500导致的，还需要配合服务端日志才进行排查分析才可以。
  console.log(
    msg, url, row, col, error
  );
  return true;
}, true);

元素进入可视区域

• content-visibility: auto;
• element.getBoundingClientRect();
• IntersectionObserver;

// 面试官想让我说出来IntersectionObserver

const callback = (entries) => { /*可见性变化时(进入/离开)的回调函数*/ };
const option = {
	threshold: 0, // intersectionRatio交叉比例
	rootMargin: 0, // 至boundingBoxd的偏移量
};

const io = new IntersectionObserver(callback, option);

io.observe(document.getElementByClass('listItem'));// 开始观察 元素是否到可视区

io.unobserve(element);// 停止观察

io.disconnect();// 关闭观察器

手机扫二维码登录

如何实现：二维码就是URL，扫码==GET请求，会自动发cookie带设备信息

那么，扫码验证之后 除了websocket如何实现页面刷新？

// 面试官可能想问的是SSE
全称是 Server-Sent Events，不同的是，WebSocket 是一种全双工通信协议，而 SSE 则是一种单工通信协议

const es = new EventSource("/sseApi");

es.onopen = e => console.log("open");

es.onmessage = e => console.log(e.data);

es.onerror = e => console.log("error");

• SSE 使用 HTTP 协议，现有的服务器软件都支持。WebSocket 是一个独立协议。
• SSE 属于轻量级，使用简单；WebSocket 协议相对复杂。
• SSE 默认支持断线重连，WebSocket 需要自己实现。
• SSE 一般只用来传送文本，二进制数据需要编码后传送，WebSocket 默认支持传送二进制数据。
• SSE 支持自定义发送的消息类型。

// 面试官强调的就是断线重连

（其实后来还是三面了）