“Yeah It’s on. ”

大厂

字节跳动

宇宙条，面试要求极高，考察算法，会一直追问知道你答不出来为止

商业化一面

第一次面大厂 算法能力不足 挂了

基础

• css的position？ css3新增加的position？absolute根据什么来进行布局？absolute根据父节点fixed布局可以吗？
• z-index是谁大就排在前面吗？z-index怎么比较？层叠上下文？
• 判断区分object和array的方法？用instanceof可以吗
• script标签异步加载？ async和defer？ async和defer的区别？哪一个快？defer具体执行的时间点 （一直深挖我擦）
• 缓存？强缓存和协商缓存？哪些请求头和缓存有关？如果已经缓存了一个文件再次访问这个文件流程？追问etag
• 状态码？200 301 302 304(重点说这个) 400 404 500 501 504
• http相关？他的特点
• udp/tcp 相同点 不同点？ udp的应用场景 (直播 游戏)
• 箭头函数和普通函数的区别？箭头函数的this？bind,call这些可以改变箭头函数的this吗（不可以）

小程序

• 对diff的理解，你的diff是怎么样的？
• 你的长列表数据优化是怎样的？（缓存桶机制） 上w条数据的长列表该怎么办（recycleviewlist card 固定高度 三个屏幕的数据）？让你设计一个recycleview？

算法

第一题 字符串处理 （5-10 分钟）

123456 -> 123,456

12345678.123 -> 12,345,678.123

第二题 区间合并

给定一堆左右闭合的区间，要求对重叠的区间进行合并，返回合并后的区间段。

例如：[9, 10], [1,4], [3,6], [8, 12]

那么合并后的区间段为：[1, 6], [8, 12]

instanceof到底能不能区分Object和Array?

答案是可以的。

 let obj = {
    aaa: "aaa"
  }
console.log(obj instanceof Object) // true 
console.log(obj instanceof Array) // false 

let obj = []
console.log(obj instanceof Object) // true 
console.log(obj instanceof Array) // true 

用 instanceof Array 来区分

浅谈script标签的defer和async

async还是会阻塞渲染的 async与defer一样 下载不阻塞html解析 但async是js谁下载完谁就立即执行，会阻塞html解析，defer是html解析完成后才按顺序执行下载的js

互娱影像一面

• webpack 深挖 => webpack5 新特性 => webpack5 联邦模块？ =》 这个是怎么实现的？

• redux 和 mobx 的区别 =》 原理上有什么不一样 =》 redux 和 mobx 怎么实现数据的响应式 =》 Object.defineProxy 和 Proxy => Object.defineProxy 的局限性 => Proxy的局限性 => Proxy 有什么不好的地方

• 跨域 => JSONP 的局限性 => CORS 配置
• csrf 攻击 token怎么解决的 =》 cookie 不能跨域 =》 保证cookie的安全性 samesite
• 层叠上下文 =》 开发中有遇见层叠上下文的问题嘛
• 组件库的全局弹出窗组件怎么实现 （挂载到根节点 z-index++） => z-index增加的时机 （挂载时还是显示时）
• flex 和 grid 布局 =》 flex basic:1 代表什么意思
• babel 原理 =》babel-plugin-transform-runtime 和 babel-runtime 分别是用来做什么的 =》 babel 除了做js语法兼容你还能想到有别的玩法嘛 （创造新的语法）

手写题

实现一个Promise.all()
tip: 考虑arr里面非Promise的情况

a[s6[sd]cd21[ere]]  => 展开

算法题目最重要的思路，要考虑边界，要覆盖所有case，其次才是bug free（这个不一定要做到）

function myPromiseAll(fns = []) {
  if (fns.length == 0) {
    // tip: 空数组直接返回
    return Promise.resolve(fns);
  }
  let result = [];
  let count = 0;
  return new Promise((resolve, reject) => {
    fns.forEach((item, index) => {
      if (!(item instanceof Promise)) {
        // tip: 转Promise
        item = Promise.resolve(item);
      }
      item.then(
        (res) => {
          result[index] = res;
          count++;
          if (count == fns.length) {
            return resolve(result);
          }
        },
        (rej) => {
          return reject(rej);
        }
      );
    });
  });
}

script crossorigin

https://juejin.cn/post/6969825311361859598

• script标签去请求资源的时候，request是没有origin头的。
• script标签请求跨域资源的时候，内部运行如果报错的话，window.onerror 捕获的时候，内部的error.message只能看到Script error.看不到完整的错误内容。这个应该是浏览器的安全策略。

设置 crossorigin属性后，script标签去请求资源的时候，request会带上origin头，然后会要求服务器进行 cors校验，跨域的时候如果response header 没有 ‘Access-Control-Allow-Origin’ 是不会拿到资源的。cors验证通过后，拿到的script运行内部报错的话，，window.onerror 捕获的时候，内部的error.message可以看到完整的错误信息。

Proxy 缺点

https://juejin.cn/post/6844903790739456013#heading-1

虽然 Proxy 可以代理针对目标对象的访问，但它不是目标对象的透明代理，即不做任何拦截的情况下，也无法保证与目标对象的行为一致

• 兼容性问题，而且无法用polyfill实现

• this 指向的问题。在 Proxy 代理的情况下，目标对象内部的this关键字会指向 Proxy 代理。

cookie 跨域

cookie 可以跨越一个域名下的多个网页，但不能跨越多个域名使用

domain 属性指定浏览器发出 HTTP 请求时，哪些域名要附带这个 Cookie。

可以设置 domain 为当前服务器域名或者父域名。如果未设置，则该 Cookie 值只能在发向该域名的请求时被携带。如果设置了 domain，则发向该域以及子域的请求都会带上该 Cookie。

在发送跨域 AJAX 请求时，Cookie 默认不会被发送。如果需要允许跨域请求携带 Cookie ，需要在发起请求的时候设置 withCredentials 请求头

跨域情况下的set-cookie：

1. 前端设置with-credentials:true，后端即使不设置CORS头也可set-cookie成功
2. 前端不设置with-credentials或者false，set-cookie响应头会被直接忽略

为 Cookie 服务的 HTTP 首部字段：

HTTP/1.1 200 OK
...
Set-Cookie: name=LvLin;domain=github.com;path=/blog
Set-Cookie: id=test123;

JSONP 的局限性

• 仅支持get请求；
• 具有局限性，不安全，可能会受到XSS攻击
• 只支持跨域 HTTP 请求这种情况，不能解决不同域的两个页面之间如何进行 调用的问题。

全局弹窗组件

z-index 的相关控制

PopupManager.nextZIndex 的相关逻辑

z-index增加的时机?

答案：是在现实前

// openModal 的时候zIndex已经准备好了
// 调用外面 会进行z-index++ 的操作
openModal: function(id, zIndex, dom, modalClass, modalFade)
// 函数内部 appendChild(modalDom)  显示dom

PopupManager

Object.defineProperty(PopupManager, 'zIndex', {
  configurable: true,
  get() {
    if (!hasInitZIndex) {
      zIndex = zIndex || (Vue.prototype.$ELEMENT || {}).zIndex || 2000;
      hasInitZIndex = true;
    }
    return zIndex;
  },
  set(value) {
    zIndex = value;
  }
});

互娱影像二面

• 主要是针对简历上的东西深入去挖
• 从工程化的角度怎么保证代码质量 => 前端规范可以做哪些事情
• m3u8播放器 (这块答得不是很好 m3u8文件为什么不能自动update ) =》 双播放器方案会不会有性能上面的问题
• commonjs可以tree-shaking吗？=> side-effect 和 tree-shaking 的关系
• webpack做过哪些东西
• sdk的分层架构设计
• mobx 和 redux 的区别
• 怎么样写一个高质量的sdk
• log 怎么上报的 => 怎么分析定位error

手写题:

// 控制并发
maxRequest(fns,max)

• 二叉树蛇形打印

互娱影像三面

• 吹水
• 项目介绍 项目成长 个人经历 个人成长 个人规划
• 视频聊天的延时 （300ms以内）
• 推拉流 => rtmp => ios 的推拉流的坑

国际化电商加面

影像团队offer没审批下来 只能转到国际化电商团队加面一轮

• 吹水
• 你看中的三个能力 （技术之外的）
• 项目介绍 项目成长 个人经历 个人成长 个人规划。。。

手写题

// 重试机制
function retry(fn, num, interval) {
  // todo
}


// ------------  test  -----------------------
const request = (url) => {
  return fetch(url);
};

const myRetry = retry(request, 5, 1000);

myRetry("https://api.github.com/users").then(
  (res) => {
    console.log("res", res);
  },
  (rej) => {
    console.log("rej", rej);
  }
);

function retry(fn, num, interval) {
  // transform fn to Promise
  return (...args) => {
    return new Promise((resolve, reject) => {
      const _retry = (info, num) => {
        if (!num) {
          return reject(info);
        }

        setTimeout(() => {
          fn(...args).then(
            (res) => resolve(res),
            (rej) => _retry(rej, --num)
          );
        }, interval);
      };

      return fn(...args).then(
        (res) => resolve(res),
        (rej) => {
          _retry(rej, --num);
        }
      );
    });
  };
}

抖音一面

• 狂问项目。项目架构，项目难点，项目优化
• web worker 会跨域吗？ 如果要传递很大数据怎么办？ (Web Worker 提供了一种转移数据的方式Transferable，允许主线程把二进制数据直接转移给子线程) （可以尝试 SharedArrayBuffer SharedWorker）
• 前端性能指标。fcp。。。 谁制定的？google
• 前端跨项目模块之间应用。pnpm 和 webpack5 联邦模块。
• webpack5 联邦模块实现原理？
• pnpm的优势？对比yarn
• pnpm的link原理？ (两种link 忘了 system还是file link hard link)
• webpack怎么实现tree-shaking的。tree-shaking的过程讲一下
• es新语法。symbol用过没？Reflect用来干嘛的？
• 装饰器用过没？装饰器用来干嘛
• es新语法提案 几个阶段？stage-[1-3]
• ts编译。tsc 和 babel结合ts-loader 的区别？
• koa洋葱模型中间件机制怎么实现的？ （形成一条Promise链）
• 讲一下浏览器的事件循环？node事件循环和浏览器事件循环是否一样？
• 说一下你实现的插件机制？有没有了解过依赖反转IOC方式去实现插件？
• class命名冲突怎么解决？css样式隔离怎么做？
• 暗夜模式怎么实现的？怎么实现多主题切换？

Web Worker 脚本加载与跨域:

• 默认情况下，Web Worker 加载的脚本文件 必须来自与主页面相同的源（即同一个协议、主机和端口）。如果试图加载跨域的 Worker 脚本，浏览器会阻止并抛出错误。
• 如果你想加载跨域的 Worker 脚本，你可以通过设置 CORS（跨域资源共享） 头来允许跨域访问。例如，服务器可以在响应中添加适当的 Access-Control-Allow-Origin 头，从而允许特定域的请求。

Transferable object

https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API/Transferable_objects

手写题：

找到数组中连续的子数组使得其值最大，输出最大值

[1,2,5,-7,8] => 9

function findMax(arr = []) {
  if (!arr.length) {
    return 0
  }

  let dp = new Array(arr.length).fill(0)
  // dp[i] 表示以 arr[i] 结尾的最大子序列和
  dp[0] = arr[0]
  for (let i = 1;i < arr.length;i++) {
    dp[i] = dp[i - 1] > 0 ? dp[i - 1] + arr[i] : arr[i]
  }

  let max = dp[0]
  for (let i = 1;i < dp.length;i++) {
    max = Math.max(max, dp[i])
  }
  return max
}

web worker

详情请查看js基础blog

node事件循环

详情请查看node相关blog

多主题样式

• css var变量
• 在元素:active时，叠加了一个透明遮罩层上去
• 基于媒体查询 prefers-color-scheme 的结果为 dark 时（即系统开启了暗夜模式时），来决定是否采用暗夜模式下的样式。

微信WeUI如何巧妙定义白天暗夜模式

toggle 日间模式与暗夜模式

// 以下代码兼容了随系统切换和让用户主动切换日间、暗夜模式的功能
// On page load or when changing themes, best to add inline in `head` to avoid FOUC
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
  document.documentElement.classList.add('dark')
} else {
  document.documentElement.classList.remove('dark')
}

// Whenever the user explicitly chooses light mode
localStorage.theme = 'light'

// Whenever the user explicitly chooses dark mode
localStorage.theme = 'dark'

// Whenever the user explicitly chooses to respect the OS preference
localStorage.removeItem('theme')

抖音二面

• react 的diff算法具体讲一讲？（单节点 和 多节点的diff） （同级的Fiber节点是由sibling指针链接形成，无法使用双指针优化） （Diff算法的整体逻辑会经历两轮遍历：第一轮遍历：处理更新的节点。第二轮遍历：处理剩下的不属于更新的节点。)
• diff时间复杂度？O(n)
• 讲一下react的fiber架构？
• 讲一下https 三次握手？什么时候对称加密 什么时候 非对称加密
• redux 和 mobx 的差别
• 如何实现一个低代码平台？（拖拽组件…）
• 低代码平台有哪些难点？（协议的制定）
• 你做过项目中的一些难点。

手写题：

• 之字型打印二叉树

• 异步输出题？ process.nextTrick 怎么实现的

function printf(node) {
  let res = []
  let queue = []
  queue.push(node)

  while (queue.length) {
    let curArr = []
    let curLen = queue.length
    for (let i = 0;i < curLen;i++) {
      let cur = queue.shift()
      curArr.push(cur.val)
      if (cur.left) queue.push(cur.left)
      if (cur.right) queue.push(cur.right)
    }
    res.push(curArr)
  }

  for (let i = 0;i < res.length;i++) {
    if (i % 2 == 1) {
      res[i] = res[i].reverse()
    }
  }

  return res.flat()
}

测试：

//   1
//   /\
//  2  3
//  /\ /\
// 4 5 6 7
//
// [1,3,2,4,5,6,7] 


class TreeNode {
  constructor(val) {
    this.val = val;
    this.left = null;
    this.right = null;
  }
}

const node = new TreeNode(1)
node.left = new TreeNode(2)
node.right = new TreeNode(3)
node.left.left = new TreeNode(4)
node.left.right = new TreeNode(5)
node.right.left = new TreeNode(6)
node.right.right = new TreeNode(7)


const res = printf(node)
console.log(res)

剪映一面

• xmlHttpRequest 和 fetch 的差异

• h5 和移动端通信 除了url schema 还有别的方式吗？（注入全局api） 怎么改变url => 通过 iframe
• fiber是什么？ fiber tree怎么更新的？
• virtual dom 介绍一下？有哪些优势？ virtual dom 在服务器的应用 => ssr
• ssr介绍一下？ssr的好处
• webpack loader 和 plugin 的差别
• xss 在服务器可以怎么预防攻击？
• 协商缓存 和 强缓存？ 和他们相关的response header
• 介绍一下前端模块化规范？es module 和 commonjs的区别？介绍一下umd？
• 判断元素是否在可见区域?

xmlHttpRequest 和 fetch

https://zh.javascript.info/fetch-progress

xmlHttpRequest 监测进度

• XHR 基于事件机制实现请求成功与失败的回调，Fetch 通过 Promise 来实现回调
• XHR中断请求的方式 (abort api) 和 Fetch (AbortController)
• XHR 监控请求进度（progress），fetch允许去跟踪下载进度，无法跟踪上传进度

１）下载的progress事件属于XMLHttpRequest对象

２）上传的progress事件属于XMLHttpRequest.upload对象。

// 下载
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com');
xhr.onprogress = function(event) {
  if (event.lengthComputable) {
    var percentComplete = event.loaded / event.total * 100;
    console.log(percentComplete + '% downloaded');
  } else {
    console.log('Download in progress');
  }
};
xhr.send();

缓存

强缓存 header： Cache-Control 和 Expires （都是服务器返回的）

协商缓存 header：Last-Modifed/If-Modified-Since Etag/If-None-Match

Last-Modifed 和 Etag 是服务器返回的

判断元素是否在可见区域

• offsetTop、scrollTop
• getBoundingClientRect
• Intersection Observer

el.offsetTop - document.documentElement.scrollTop <= viewPortHeight

// viewPortHeight = window.innerHeight;
// 元素距离顶部的距离 - 文档滚动的距离 <=  屏幕的高度

xss攻击在服务器上预防

1. 安全的Cookie：确保Cookie只能由服务器端访问，并且不包含敏感信息。 （HTTP-only）

2. HTTPS协议：使用HTTPS协议加密数据传输，以防止中间人攻击和窃听。

3. Content Security Policy

严格的 CSP 在 XSS 的防范中可以起到以下的作用：

• 禁止加载外域代码，防止复杂的攻击逻辑。
• 禁止外域提交，网站被攻击后，用户的数据不会泄露到外域。
• 禁止内联脚本执行（规则较严格，目前发现 GitHub 使用）。
• 禁止未授权的脚本执行（新特性，Google Map 移动版在使用）。
• 合理使用上报可以及时发现 XSS，利于尽快修复问题。

输出题

var a = 3

// 自执行函数作用域是window
!(function () {
  // a 会提升
  console.log(a) // undefined
  console.log(window.a) // 3
  var a = 5
  console.log(a) // 5
})()

手写题

• 版本号比较大小

function swap(arr, i, j) {
  let temp = arr[i];
  arr[i] = arr[j];
  arr[j] = temp;
}

function isBigger(item1, item2) {
  const arr1 = item1.split(".")
  const arr2 = item2.split(".")
  for (let i = 0;i < arr1.length;i++) {
    // 分割字符串转number进行比较
    // 注意：Number(undefined)  => NaN  (要避免这种情况 加上 || 0 )
    const num1 = Number(arr1[i] || 0)
    const num2 = Number(arr2[i] || 0)
    if (num1 > num2) {
      return true
    } else if (num1 < num2) {
      return false
    }
  }
  return false
}

function compare(arr) {
  for (i = 0;i < arr.length;i++) {
    for (let j = i + 1;j < arr.length;j++) {
      if (isBigger(arr[i], arr[j])) {
        swap(arr, i, j)
      }
    }
  }
}

// 测试
let arr = ["1.45", "1.5", "3.3.3.3", "6", "4.4", "6.1"]
compare(arr)
console.log(arr)

• 跳阶梯 （优化）

let map = new Map() // 用于剪枝

function dp(n) {
  if (n == 1) {
    return 1
  }
  if (n == 2) {
    return 2
  }
  if (map.has(n)) {
    return map.get(n)
  }
  let num = dp(n - 1) + dp(n - 2)
  map.set(n, num)
  
  return num
}

剪映二面

• 主要问项目（架构，难点，优化）
• 单元测试怎么mock函数 （a.js import b.js 对a文件做单元测试怎么模拟b中的函数）
• fps是什么？怎么监控fps？
• webassembly怎么使用？
• long task是什么？怎么捕获long task

long task

任何连续不间断的且主 UI 线程繁忙 50 毫秒及以上的时间区间

https://developer.mozilla.org/zh-CN/docs/Web/API/PerformanceLongTaskTiming

长任务会使主线程保持忙碌，延迟用户交互

var observer = new PerformanceObserver(function (list) {
  var perfEntries = list.getEntries();
  for (var i = 0; i < perfEntries.length; i++) {
    // Process long task notifications:
    // report back for analytics and monitoring
    // ...
  }
});
// register observer for long task notifications
observer.observe({ entryTypes: ["longtask"] });
// Long script execution after this will result in queueing
// and receiving "longtask" entries in the observer.

webassembly使用

const importObject = {
    imports: {
        imported_func: (arg) => console.log("I was imported. " + arg)
    }
}


fetch("http://localhost:3000/audiotest/test/simple.wasm").then(res => {
    console.log("res", res)
    return res.arrayBuffer()
}).then(bytes => {
    console.log("bytes", bytes)
    return WebAssembly.instantiate(bytes, importObject)
}).then(result => {
    console.log("result", result)
    result.instance.exports.exported_func(111)
})

fps 相关

参考 stats.js

JavaScript Performance Monitor

var stats = new Stats();
stats.showPanel( 1 ); // 0: fps, 1: ms, 2: mb, 3+: custom
document.body.appendChild( stats.dom );

function animate() {
	stats.begin();
	// monitored code goes here
  // 中间就是动画执行，每次就是一个frame
	stats.end();
	requestAnimationFrame( animate );
}

requestAnimationFrame( animate );

内部实现原理：

		begin: function () {
			beginTime = (performance || Date).now();
		},
		end: function () {
			frames++;
			var time = (performance || Date).now();
			if (time >= prevTime + 1000) {
        // 一秒钟多少帧
				const num = (frames * 1000) / (time - prevTime)
				fpsPanel.update(num, 100);
				prevTime = time;
				frames = 0;
			}
			return time;
		},

简化例子：

var frame = 0;
var lastTime = Date.now();

var loop = function () {
    var now = Date.now();
    frame++;
    if (now > 1000 + lastTime) {
        var fps = Math.round((frame * 1000) / (now - lastTime));
        console.log(`${new Date()} 1S内 FPS：`, fps);
        frame = 0;
        lastTime = now;
    };

    requestAnimationFrame(loop);
}

loop();

memory 相关

https://developer.mozilla.org/zh-CN/docs/Web/API/Performance/memory

• jsHeapSizeLimit

上下文内可用堆的最大体积，以字节计算。

• totalJSHeapSize

已分配的堆体积，以字节计算。

• usedJSHeapSize

当前 JS 堆活跃段（segment）的体积，以字节计算。

例子：

获取已使用的Memory

// 1MB would be 1048576 bytes
const memory = performance.memory;
const used = memory.usedJSHeapSize / 1048576
const total = memory.jsHeapSizeLimit / 1048576

console.log("Memory used: " + used + "MB")
console.log("Memory total: " + total + "MB")
console.log("Memory used: " + (used / total * 100) + "%")

手写题

顺时针螺旋顺序输出组件：
输入:
[
 [ 1, 2, 3 ],
 [ 4, 5, 6 ],
 [ 7, 8, 9 ]
]
输出: [1,2,3,6,9,8,7,4,5]

解决：

const directions = [
  [0, 1], // right
  [1, 0], // down
  [0, -1], // left
  [-1, 0] // up
]

function print(grid) {
  let visited = new Array(grid.length)
  for (let i = 0;i < visited.length;i++) {
    visited[i] = new Array(grid[i].length).fill(false)
  }

  let row = grid.length // 行
  let col = grid[0].length // 列
  let max = row * col
  let curIndex = 0
  let curPos = [0, 0]
  let direction = 0

  const print = (curPos) => {
    console.log(grid[curPos[0]][curPos[1]])
  }

  isLegalPos = (pos) => {
    if (pos[0] >= 0 && pos[0] < row && pos[1] >= 0 && pos[1] < col) {
      if (!visited[pos[0]][pos[1]]) {
        return true
      }
    }
    return false
  }

  while (curIndex < max) {
    print(curPos)
    curIndex++
    visited[curPos[0]][curPos[1]] = true
    let nextPos = [curPos[0] + directions[direction][0], curPos[1] + directions[direction][1]]
    if (!isLegalPos(nextPos)) {
      // 不合法的位置，换方向
      direction = (direction + 1) % 4
      nextPos = [curPos[0] + directions[direction][0], curPos[1] + directions[direction][1]]
    }
    curPos = nextPos
  }

}

抖音中台二面

• node 读取文件的最大值
• electron 打包这么大怎么办
• 小程序渲染 (基于 WebView 和原生控件混合渲染的方式) (目前原生组件均已支持同层渲染，建议使用 image 替代cover-image ) (通过一定的技术手段把「原生组件」直接渲染到 WebView 层级上，)
• 爬虫遇见白屏怎么办？ （使用puppeteer）
• js bridge
• long task

跳出研发的角度看事情

火山引擎一面

基础：

• 聊简历项目

• mobx的实现原理? mobx-react 的实现原理？

• 在一个c端场景，客户反馈说页面出现卡顿怎么定位到？ （通过打点上报log分析时间戳）
• 比new Date() 精度更细的获取时间的方法

算法：

写一个装饰器记录类函数的执行时间。 （注意区分同步/异步函数 cnotext）

实现：

const run = (target, name, descriptor) => {

  const originalMethod = descriptor.value; // 保存原始方法

  descriptor.value = function (...args) {
    let startTime = Date.now();
    // 调用原始方法 注意this指向
    const res = originalMethod.apply(this, args);
    if (res instanceof Promise) {
      res.then(() => {
        let endTime = Date.now();
        console.log('end', endTime - startTime);
      }).catch(() => {
        let endTime = Date.now();
        console.log('end', endTime - startTime);
      })
    } else {
      let endTime = Date.now();
      console.log('end', endTime - startTime);
    }

    return res
  };

  return descriptor
}

测试：

class Test {

  @run
  async task() {
    await sleep()
    console.log('task')
  }
}

let t = new Test()
t.task()

给一个number数组，输出数组每一项的非自己乘积 (时间复杂度n(O) 且不能使用除法)

例子：
input = [1,2,3,4]
output = [24,12,8,6]

解决：

function test(arr = []) {
  let total = 1
  let res = []
  for (let i = 0;i < arr.length;i++) {
    total = total * arr[i]
  }
  for (let i = 0;i < arr.length;i++) {
    // 题目规定不能用除法
    // 非自己的所有元素乘积 => 当前元素的所有左边元素乘积 * 当前元素的所有右边元素乘积
    res[i] = total / arr[i]
  }

  return res
}

优化：

function test(arr = []) {
  let res = []
  let left = [] // 元素左边乘积
  let right = [] // 元素右边乘积
  left[0] = 1
  right[arr.length - 1] = 1
  for (let i = 1;i < arr.length;i++) {
    left[i] = left[i - 1] * arr[i - 1]
  }
  for (let i = arr.length - 2;i >= 0;i--) {
    right[i] = right[i + 1] * arr[i + 1]
  }
  for (let i = 0;i < arr.length;i++) {
    res[i] = left[i] * right[i]
  }
  return res
}

react 题目

function App() {
  const [num, setNum] = useState(0)

  useEffect(() => {
    setInterval(() => {
      setNum(pre => pre + 1)
    }, 1000)
  }, [])

  const onClick = useCallback(() => {
    // 这里的输出是多少 => 0
    // 为什么useCallback能做到缓存这个num不改变，底层是怎么实现的？=> 闭包作用域
    console.log(num)
  }, [])

  return <div onClick={onClick}>test</div>
}

function App() {
  const [num, setNum] = useState(0)

  useEffect(() => {
    setInterval(() => {
      setNum(pre => pre + 1)
    }, 1000)
  }, [])

  const onClick = () => {
    // 也是0 
    // useMemo 和 useCallback 都是用来缓存
    // useMemo 缓存后TestEle就不会重新渲染了 onClick一直是最开始的那个 => 指向的num就是0
    console.log(num)
  }

  const TestEle = useMemo(() => <div onClick={onClick}>test</div>, [])

  return <div>
    {TestEle}
  </div>
}

阿里

面试官会对着一个问题不断深挖，促使你不断地优化你回答的方案

盒马hr最多接受三年两跳，遂只能中止盒马的面试流程，没有达到最后一面，GG （据了解不同团队的hr要求不一样 别的团队并没有这个限制）

盒马一面(笔试)

两道笔试题，一小时内完成

经典dfs搜索的题目，忘记记录已经走过的路径导致死循环

// 给定一个包含了一些 0 和 1 的非空二维数组 grid
//
// 一个 岛屿 是由一些相邻的 1（代表土地）构成的组合，这里的「相邻」要求两个 1 必须在水平或者竖直方向上相邻。你可以假设 grid 的四个边缘都被 0（代表水）包围着
//
// 给定两个位置，判断这两个位置否在同一个岛屿上

const direction = [
  [0, 1],
  [1, 0],
  [-1, 0],
  [0, -1],
]

let flag = false

function isSameIsland(grid, row1, col1, row2, col2) {
  if (!grid[row1][col1] || !grid[row2][col2]) {
    return false
  }
  let target = [row2, col2]
  // 记录已经找过的路径 不然会死循环
  let marked = new Array(grid.length)
  for (let i = 0; i < grid.length; i++) {
    marked[i] = new Array(grid[0].length).fill(false)
  }
  marked[row1][col1] = true
  for (let i = 0; i < direction.length; i++) {
    // 四个方向出发 深度搜索
    let next = [row1 + direction[i][0], col1 + direction[i][1]]
    if (isInGrid(grid, next)) {
      dfs(grid, next, target, marked)
    }
  }
  let result = flag
  flag = false
  return result
}

function dfs(grid, cur, target, marked) {
  if (!grid[cur[0]][cur[1]]) {
    // 不是岛屿
    return false
  }
  if (marked[cur[0]][cur[1]]) {
    // 该点已经走过
    return false
  }
  marked[cur[0]][cur[1]] = true
  let [x, y] = cur
  let [targetX, targetY] = target
  if (x == targetX && y == targetY) {
    flag = true
    return true
  }
  for (let i = 0; i < direction.length; i++) {
    let next = [x + direction[i][0], y + direction[i][1]]
    if (isInGrid(grid, next)) {
      dfs(grid, next, target, marked)
    }
  }
}

function isInGrid(grid, cur) {
  let [x, y] = cur
  if (x < 0 || y < 0 || x >= grid.length || y >= grid[0].length) {
    return false
  }
  return true
}

const grid1 = [
  [0, 0, 1, 0, 0, 0, 0, 1, 0], // row=0
  [0, 0, 1, 0, 0, 1, 0, 1, 1], // row=1
  [1, 1, 1, 1, 1, 1, 1, 0, 1], // row=2
]

let res1 = isSameIsland(grid1, 0, 2, 1, 5) // 返回 true

let res2 = isSameIsland(grid1, 0, 7, 2, 5) // 返回 false （注意 grid1 中 (1,7) 和 (2,6) 不算相邻）

console.log(res1)
console.log(res2)

tip: 也可以不用flag dfs返回true 就是最终的true

这道题可以变形为查找地图中一共有多少个岛屿

// 给定一个包含了一些 0 和 1 的非空二维数组 grid
// 一个 岛屿 是由一些相邻的 1（代表土地）构成的组合，这里的「相邻」要求两个 1 必须在水平或者竖直方向上相邻。你可以假设 grid 的四个边缘都被 0（代表水）包围着
// 判断有多少个岛屿

const direction = [
  [0, 1],
  [1, 0],
  [-1, 0],
  [0, -1],
]

function getIsland(grid) {
  if (!grid || !grid.length || !grid[0].length) {
    return 0
  }
  let total = 0
  let marked = new Array(grid.length)
  for (let i = 0; i < marked.length; i++) {
    marked[i] = new Array(grid[0].length).fill(false)
  }

  for (let x = 0; x < grid.length; x++) {
    for (let y = 0; y < grid[0].length; y++) {
      if (isInIsland(grid, x, y)) {
        dfs(grid, x, y, marked)
        total++
      }
    }
  }
  return total
}

function dfs(grid, x, y,marked) {
  if (!isInGrid(grid, x, y)) {
    // 不在地图中
    return
  }
  if (marked[x][y]) {
    // 已经来过了
    return
  }
  if (!grid[x][y]) {
    // 不是岛屿
    return
  }
  // 标记来过
  marked[x][y] = true  // marked 其实不是必须的
  // 标记为水
  grid[x][y] = 0
  for (let i = 0; i < direction.length; i++) {
    dfs(grid, x + direction[i][0], y + direction[i][1],marked)
  }
}

// 在岛屿中
function isInIsland(grid, x, y) {
  return !!grid[x][y]
}

// 在地图中
function isInGrid(grid, x, y) {
  if (x < 0 || y < 0 || x >= grid.length || y >= grid[0].length) {
    return false
  }
  return true
}

const grid1 = [
  [1, 0, 1, 0, 0, 0, 0, 1, 0], // row=0
  [0, 0, 1, 0, 0, 1, 0, 1, 1], // row=1
  [1, 1, 1, 1, 1, 1, 1, 0, 1], // row=2
]

let res1 = getIsland(grid1) // 3

console.log(res1)

实现对函数执行的流程控制

// 请实现以下的 LazyArray ，使下列的代码调用正确

function promiseFy(fn, num = 500) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      let res = fn()
      resolve(resizeBy)
    }, num)
  })
}

class LazyArray {
  // YOUR CODE HERE
  // 你需要实现以下方法： map / filter / delay / forEach

  constructor(arr) {
    this.arr = arr
    this.taskList = []
    this.num = null
  }

  filter(fn) {
    let finalFn = () => {
      this.arr = this.arr.filter(fn)
      return null
    }
    this.taskList.push(finalFn)
    return this
  }
  map(fn) {
    for (let i = 0; i < this.arr.length; i++) {
      let finalFn = () => {
        let item = this.arr[i]
        if (item !== null && item !== undefined && !isNaN(item)) {
          this.arr[i] = fn(item)
          return this.arr[i]
        }
      }
      this.taskList.push(finalFn)
    }
    return this
  }

  async forEach(fn) {
    while (this.taskList.length) {
      let task = this.taskList.shift()
      let res = task()
      if (res !== null && res !== undefined && !isNaN(res)) {
        if (this.num) {
          // 存在延时
          await promiseFy(() => fn(res), this.num)
        } else {
          fn(res)
        }
      }
    }
    return this
  }
  delay(num) {
    this.num = num
    return this
  }
}

const lazy1 = new LazyArray([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10])

const lazy2 = lazy1
  .filter((v) => v % 2 === 0)
  .map((v) => {
    console.log(`map ${v} to ${v * 5}`)
    return v * 5
  })
// 上一条语句执行时，不进行任何输出

// lazy2.forEach((v) => {
//   console.log('consume lazy2', v)
// })

// 上一条语句执行时，输出以下内容:
//  map 0 to 0
//  consume lazy2 0
//  map 2 to 10
//  consume lazy2 10
//  ......

// 进阶题目：

const lazy3 = lazy2.delay(500)
lazy3.forEach((v) => {
  console.log('consume lazy3', v)
})

// 上一条语句执行时，不会立刻产生「consume lazy3 ...」这样的输出
// 所有「consume lazy3 ...」这样的输出将在 500 毫秒之后产生

这里可以关注一下this的指向

举个例子：

  await promiseFy.call(this,()=>{
      // 我们使用某种手段使得
      // 此处的this是指向LazyArray实例
      fn.call(this,res)
  }, this.num)

结果：

const lazy3 = lazy2.delay(500)
lazy3.forEach((v) => {
  // 这里的this仍然是指向window 因为箭头函数本身并没有this
  // 不可以用bind call apply改变this  
  console.log('consume lazy3', v)
})

盒马二面 (电话 同事面)

40分钟左右

介绍 项目 和 做过最难的东西等

• git rebase 和 git merge
• npm包每个数字代表什么意思 (xx.xxx.xx) （如何发包）
• 你项目的依赖库是写死的还是动态版本？(写死的版本号真的是固定的吗？) 如何保证依赖库不出错？ （npm的知识 package-lock.json）
• 实现一个深拷贝 （对date Regex的处理 set解决循环引用）
• JSON.parse(JSON.stringify(obj))实现深拷贝的问题？如让 JSON.parse(JSON.stringify(obj))深拷贝循环引用不报错？
• 判断一个函数是不是async函数
• 判断一个对象是不是数组
• 判断一个对象是不是函数
• node stream的特点 最大的优势
• node 是单线程 如何利用多核cpu的优势？(cluster fork 主进程 和 工作进程)
• 主进程和子进程会共享一个端口，这是怎么做到的？（追问？IPC？父子通信？）
• 工程化做过哪些东西？对webpack的理解。
• promise.then(res=>{},rej=>{}).catch(err=>{}) 这里catch方式捕获错误和 rej捕获错误的区别是？

考察的问题都比较有代表性，下面探究一些没有答出来的问题。

深拷贝循环引用不报错

让 JSON.parse(JSON.stringify(obj))深拷贝循环引用不报错

const obj = {
  foo: {
    name: 'foo',
    bar: {
      name: 'bar',
      baz: {
        name: 'baz',
        aChild: null, //待会让它指向obj.foo
      },
    },
  },
}
obj.foo.bar.baz.aChild = obj.foo
// foo->bar->baz->aChild->foo 形成环


// TypeError: cyclic object value
// let res =  JSON.parse(JSON.stringify(obj))

// https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify
// https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse
// 解决：

const seen = [] 
let res = JSON.parse(
  JSON.stringify(obj, (key, value) => {
    if (typeof value === 'object' && value !== null) {
      if (seen.indexOf(value) !== -1) {
        // 已存在 变为空指针
        return null
      }
      seen.push(value);
    }
    return value
  })
)
console.log(res)

利用JSON.stringify函数的第二个参数replacer

replacer 可选

如果该参数是一个函数，则在序列化过程中，被序列化的值的每个属性都会经过该函数的转换和处理；如果该参数是一个数组，则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中；如果该参数为 null 或者未提供，则对象所有的属性都会被序列化。

Promise.catch的优势

https://www.css3.io/promise-catch-vs-reject.html

.catch()的作用是捕获Promise的错误，与then()的rejected回调作用几乎一致。

但是由于Promise的抛错具有冒泡性质，能够不断传递，这样就能够在下一个catch()中统一处理这些错误。同时catch()也能够捕获then()中抛出的错误，所以建议不要使用then()的rejected回调，而是统一使用catch()来处理错误

还有一个区别：throw不能用于异步调用中

如下代码所示，catch回调是不执行的

var p1 = new Promise(function(resolve, reject) {
  setTimeout(function() {
    throw 'Uncaught Exception!';
  }, 1000);
});

p1.catch(function(e) {
  console.log(e); // This is never called
});

而reject回调是执行的

var p2 = new Promise(function(resolve, reject) {
  setTimeout(function() {
    reject('oh, no!');
  }, 1000);

});

p2.catch(function(e) {
  console.log(e); // "oh, no!"
})

举个例子: Promise.catch then中的错误

  var p2 = new Promise(function (resolve, reject) {
    resolve(111)
  });

  p2.then(res => {
    console.log("res", res)
    throw '111'
  }, rej => {
    console.log("rej", rej)
    throw '222'
  }).catch(function (e) {
    console.log(e); // "111"   // 成功捕获
  })

如果catch不跟在then后面，无法捕获then中抛出的错误

  var p2 = new Promise(function (resolve, reject) {
    resolve(111)
  });

  p2.then(res => {
    console.log("res", res)
    throw 'oh, no!'
  }, rej => {
    console.log("rej", rej)
    throw 'oh, no!'
  })
  
  p2.catch(function (e) {
    console.log('11111',e); // 无法捕获
  })

.catch 不必是立即的。它可能在一个或多个 .then 之后出现。

pacakge写死的版本号真的是固定的吗

假如我们依赖roadhog，roadhog又依赖模块A、B等，我们安装roadhog时，npm会自动帮我们安装好roadhog依赖的模块A、B等。我们把roadhog锁死了，但是其引用的A模块仍用的是^括号写法（即没有锁死版本），所以假如A模块更新了，仍可能会出现问题

所以我们要对整个依赖树做锁定，那前后编译出来的应用版本就不会存在两次安装版本不一的问题了。

这就引出了我们的 package-lock.json 文件。它的产生就是来对整个依赖树进行版本固定的（锁死）

判断async函数

  async function test() {
    // ...
  }

  let name = test.constructor.name
  console.log(test.constructor.name) // AsyncFunction

  async function test() {
    // ...
  }

  const name =  Object.prototype.toString.call(test)
  console.log(name) // [object AsyncFunction]

node stream

流（stream）是 Node.js 中处理流式数据的抽象接口。 stream 模块用于构建实现了流接口的对象。

流可以是可读的、可写的、或者可读可写的。 所有的流都是 EventEmitter 的实例。

与其他数据处理方法相比，流有两个主要优势：

1. 内存效率： 不需要加载大量的数据到内存就可以处理
2. 时间效率： 一旦有了数据就开始处理，而不必等待传输完所有数据

流是一种处理读写文件、网络通信或任何端到端信息交换的有效方式。

可写流和可读流都会在内部的缓冲器中存储数据

stream API 的主要目标，特别是 stream.pipe()，是为了限制数据的缓冲到可接受的程度，也就是读写速度不一致的源头与目的地不会压垮内存。

举个例子：

const server = http.createServer(function (req, res) {
    const fileName = path.resolve(__dirname, 'data.txt');
    fs.readFile(fileName, function (err, data) {
        res.end(data);
    });
});
server.listen(8000);

使用文件读取这段代码语法上并没有什么问题，但是如果data.txt文件非常大的话，到了几百M，在响应大量用户并发请求的时候，程序可能会消耗大量的内存，这样可能造成用户连接缓慢的问题。而且并发请求过大的话，服务器内存开销也会很大。这时候我们来看一下用stream实现。

const server = http.createServer(function (req, res) {
    const fileName = path.resolve(__dirname, 'data.txt');
    let stream = fs.createReadStream(fileName);  // 这一行有改动
    stream.pipe(res); // 这一行有改动
});
server.listen(8000);

使用stream就可以不需要把文件全部读取了再返回，而是一边读取一边返回，数据通过管道流动给客户端，真的减轻了服务器的压力。

node如何做到主进程和子进程共享一个端口

https://zhuanlan.zhihu.com/p/112597848

Master 通过 cluster.fork() 这个方法创建的，本质上还是使用的 child_process.fork() 这个方法

cluster其实就是对child_process的一层封装

cluster其实就是对child_process的一层封装

cluster其实就是对child_process的一层封装

Nodejs 的 Cluster 模块采用了哪种集群模式？

• 方案一：1 个 Node 实例开启多个端口，通过反向代理服务器向各端口服务进行转发
• 方案二：1 个 Node 实例开启多个进程监听同一个端口，通过负载均衡技术分配请求（Master->Worker）

首先第一种方案存在的一个问题是占用多个端口，造成资源浪费，由于多个实例是独立运行的，进程间通信不太好做，好处是稳定性高，各实例之间无影响。

第二个方案多个 Node 进程去监听同一个端口，好处是进程间通信相对简单、减少了端口的资源浪费，但是这个时候就要保证服务进程的稳定性了，特别是对 Master 进程稳定性要求会更高，编码也会复杂。

在 Nodejs 中自带的 Cluster 模块正是采用的第二种方案。

如何多个进程监听同一个端口

fork()

其实我们只要在绑定端口号（bind函数）之后，监听端口号之前（listen函数），用fork（）函数生成子进程，这样子进程就可以克隆父进程，达到监听同一个端口的目的。

https://programtip.com/zh/art-28719

const cluster = require('cluster');
const http = require('http');
const numCPUs = require('os').cpus().length;

if (cluster.isMaster) {
  for (let i = 0; i < numCPUs; i++) {
    cluster.fork();
  }

  cluster.on('exit', (worker, code, signal) => {
    console.log(`工作进程 ${worker.process.pid} 已退出`);
  });
} else {
  http.createServer((req, res) => {
    res.writeHead(200);
    res.end('hello world\n');
  }).listen(8000);
}

上面的代码就简单的将cluster模块加入到了node.js项目中。但是仔细分析一下这段代码你可能会产生这些疑问：主进程仅仅fork出了子进程，并没有创建httpserver，说好的主进程接收请求分发给子进程呢？每一个子进程都创建了一个httpserver，并侦听同一个端口

对于cluster的分析，得出以下结论：

1. cluster在创建子进程时，会在环境变量中增加标识，以此来区分主进程和子进程

2. listen函数在实现时对主进程和子进程进行了区分，在不同的进程中会执行不同操作

3. nodeJS封装了进程间通信的方法，支持在进程间发送句柄的功能，句柄可以是一个socket对象，一个管道等等

4. 一个端口只能被一个进程监听，但是该端口可以建立多个连接(accpet是产生的套接字)，不同进程间可以共享这些套接字

5. 子进程的listen函数并没有监听端口，它在listen时将端口和地址等信息发送给主进程，由主进程进行监听。主进程在收到accept事件时，产生连接socket，并把它发送给子进程。子进程直接通过该socket跟client端进行通信

Socket是什么

https://www.jianshu.com/p/01b9a454de5a

socket原意是“插座”或“插孔”，在网络中每台服务器相当于一间房子，房子中有着不同的插口，每个插口都有一个编号，且负责某个功能。插口就是socket服务，插口的编号就是端口号，而插头也是一个socket服务。

socket的含义就是两个应用程序通过一个双向的通信连接实现数据的交换，连接的一段就是一个socket

socket套接字是对TCP/IP协议的封装，自身并非协议而是一套调用的接口规范（API）。通过套接字Socket，才能使用TCP/IP协议。

应用层通过传输层进行TCP通信时，有时TCP需要为多个应用程序进程提供并发服务。多个TCP连接或多个应用程序进程可能需要通过同一个TCP协议端口传输数据。为了区别不同的应用程序进程和连接，许多计算机操作系统为应用程序与TCP协议交互提供了称为套接字 (Socket)的接口，区分不同应用程序进程间的网络通信和连接。

盒马三面 (电话 同事面)

50分钟左右，已过

• 一个页面，两个模块同时发出请求，如何复用？ （宏观是同时，微观上其实还是有先后）
• 一个tab页面渲染大量数据。 （虚拟列表）
• 虚拟列表滚动时，item还没加载出来时白屏如何处理？ （骨架屏幕）
• 虚拟列表滚动条不准确如何处理？ （隐藏原生滚动条，实现自定义滚动条）
• 长度为100w的数组，数组每一项是长度64位的字符串，找到其中的最大的那一个 （top K 算法）
• 微信小程序双线程架构的优势和特点？

找到大数组中的最大的数

leetcode 上的解法

长度为100w的数组，数组每一项是长度64位的字符串，找到其中的最大的那一个

当数组非常大的时候，我们对整个数组进行排序是一项非常非常耗时的操作。

解决：

• 局部排序，不再全局排序，只对最大的k个排序。

冒泡是一个很常见的排序方法，每冒一个泡，找出最大值，冒k个泡，就得到TopK。

时间复杂度：O(n*k)

• 局部堆排序 （只找到TopK，不排序TopK）

先用前k个元素生成一个小顶堆，这个小顶堆用于存储，当前最大的k个元素。

接着，从第k+1个元素开始扫描，和堆顶（堆中最小的元素）比较，如果被扫描的元素大于堆顶，则替换堆顶的元素，并调整堆，以保证堆内的k个元素，总是当前最大的k个元素。

时间复杂度：O(n*lg(k)) k为堆里面的元素个数

（堆排序还有一个好处就是我们的长度为100w的数组可以切开放到不同的机器上，分布式思想，维护一个k大小的堆就行了）

微信小程序双线程架构的优势和特点

与传统的浏览器Web页面最大区别在于，小程序的是基于 双线程 模型的，在这种架构中，小程序的渲染层使用 WebView 作为渲染载体，而逻辑层则由独立的 JsCore 线程运行 JS 脚本，双方并不具备数据直接共享的通道，因此渲染层和逻辑层的通信要由 Native 的 JSBrigde 做中转。

lazada一面

• 错误异常监控。资源加载失败怎么监控 => 跨域js的 error 怎么监控。
• jsbridge 原理 => jsbridge安全性问题 => js 通过jsbridge发送多个消息传到app（url scheme），app只收到了一个，怎么解决？
• react hooks => useMeno是什么 => 怎么实现的 => 写过哪些自定义hooks
• 多个库依赖不同版本base库 比如1.0 2.0 ， 该怎么办？
• css tree 怎么附着在 dom tree 上面生成render tree => css附着过程的查找方式 dfs 还是 bfs ？
• let const 转es5 最终代码是怎么样的？
• 小程序 setData 优化。 observer怎么实现？
• m3u8 前端播放器你做了哪些工作？？ 断网续播怎么实现 => seek到正确位置？video.js播放器在移动端会有哪些坑？
• 工作流优化做了哪些工具？有指标吗？
• babel-preset-env 的坑
• babel-runtime 是要放在 dependencies 还是 devDependencies

监控资源加载失败

使用 window.addEventListener 捕获阶段

脚本错误量极致优化-监控上报与Script error

聊聊前端监控

onerror 的事件并不会向上冒泡

需要useCapture设置成true 在捕获阶段获得

那么如果区分脚本错误还是资源错误呢？我们可以通过 instanceof 区分，脚本错误参数对象 instanceof ErrorEvent，而资源错误的参数对象 instanceof Event。

ErrorEvent 继承于 Event ，所以不管是脚本错误还是资源错误的参数对象，它们都 instanceof Event，所以，需要先判断脚本错误。

/**
 * @param event 事件名
 * @param function 回调函数
 * @param useCapture 回调函数是否在捕获阶段执行，默认是false，在冒泡阶段执行
 */
window.addEventListener('error', (event) => {
  if (event instanceof ErrorEvent) {
    console.log('脚本错误')
  } else if (event instanceof Event) {
    console.log('资源错误')
  }
}, true);

监控跨域js的 error

对于不同源的脚本报错，无法捕获到详细错误信息，只会显示 Script Error

解决：

• 同源化 （将js文件与html文件放到同一域名下）
• 跨源资源共享机制( CORS ) （为页面上script标签添加crossorigin属性）

区分浏览器关闭和刷新

这个其实在绝大部分情况下都是没必要区分开的。

硬是要区分只能通过时间差

页面加载时只执行onload
页面关闭时先执行onbeforeunload，最后onunload
页面刷新时先执行onbeforeunload，然后onunload，最后onload。

我们可以在离开页面是判断 or 进入页面时判断

举个例子：

这里用进入页面时判断 （判断是刷新 还是 重新进入页面）

const now = new Date().getTime();
const leaveTime = parseInt(localStorage.getItem('leaveTime'), 10);
const refresh = (now - leaveTime) <= 5000;
alert(refresh ? '刷新' : '重新登陆');
window.onunload = () => {
     window.localStorage.setItem('leaveTime', new Date().getTime());
};

扩展知识：

visibilitychange事件是浏览器新添加的一个事件，当浏览器的某个标签页切换到后台，或从后台切换到前台时就会触发该消息

  document.addEventListener("visibilitychange", function (event) {
        if (document.visibilityState === "visible") {
          console.log('visible',event);
        } else {
         console.log('hidden',event);
        }
      });

ES6 的 let 实现原理

var funcs = [];
for (let i = 0; i < 10; i++) {
  funcs[i] = function () {
    console.log(i);
  };
}
funcs[0](); // 0

babel 编译之后的 es5 代码（polyfill）

var funcs = [];

var _loop = function _loop(i) {
  funcs[i] = function () {
    console.log(i);
  };
};

for (var i = 0; i < 10; i++) {
  _loop(i);
}
funcs[0](); // 0

其实我们根据 babel 编译之后的结果可以看得出来 let 是借助闭包和函数作用域来实现块级作用域的效果的

在不同的情况下 let 的编译结果是不一样的

babel-runtime

https://babeljs.io/docs/en/babel-runtime/

babel-runtime 在sdk 或者第三库中只需要放devDependencies，但在最终的一些项目，比如页面打包，要放dependencies中

css查找流程

浏览器CSS匹配从右到左进行查找 (查找时采用bfs算法 => 可以拿到所有匹配的子节点)

手写题：

deepClone() 深拷贝对象

写一个定时器

tip：pause 之后能够再次start

class Timer{
	start(){}
	pause(){}
	cancel(){}
}

解决

class Timer {
  constructor(num) {
    this.num = num;
    this.timer = null;
    this.hasStarted = false;
  }
  start() {
    if (this.hasStarted) {
      return;
    }
    this.hasStarted = true;
    if (this.timer) {
      // 处理pause之后再start
      clearInterval(this.timer);
    }
    this.timer = setInterval(() => {
      if (this.num < 0 || !this.hasStarted) {
        return;
      }
      console.log(this.num);
      this.num--;
    }, 1000);
  }
  pause() {
    if (!this.hasStarted) {
      return;
    }
    this.hasStarted = false;
  }
  cancel() {
    if (!this.hasStarted) {
      return;
    }
    this.hasStarted = false;
    this.num = 0
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
  }
}

测试

let t = new Timer(100);
t.start();
setTimeout(() => {
  t.pause();
}, 5000);
setTimeout(() => {
  t.start();
}, 9000);
setTimeout(() => {
  t.cancel();
}, 20000);

lazada二面

对项目的描述 难点 重点 梳理不清楚 表达不清晰 导致了最终gg

• 主要简历
• m3u8 和 mp4 的区别
• 刷新页面随机颜色不能重复 “#123434” => hash冲突
• webpack4 => webpack5 有什么变化
• webpack5 tree-shaking 需要配置什么
• immutable 做了什么
• rxjs 做了什么
• apaas 分层架构
• npm 发的包 线上出了问题 怎么办？ 除了降级

immutable

https://juejin.cn/post/6863832173703593997

immutable数据一种利用结构共享形成的持久化数据结构，一旦有部分被修改，那么将会返回一个全新的对象，并且原来相同的节点会直接共享。

每次修改一个 immutable 对象时都会创建一个新的不可变的对象，在新对象上操作并 不会影响到原对象的数据。

m3u8 和 mp4 的区别

m3u8是苹果公司推出的视频播放标准，编码格式采用UTF-8；mp4是有动态图像专家组MPEG制定的一种用于音频、视频信息的压缩编码标准。m3u8只是个文本文件，存储媒体文件路径，mp4是封装好的h264或h265媒体文件。

智能信息一面

• 项目架构？项目工作流？
• 播放器相关？
• web ktv 相关？
• lerna 和 pnpm 的区别？
• react组件间传值的方法？
• react 中类组件和函数组件的区别？ 类组件的缺陷？ （类组件抽取公共逻辑比较麻烦没有hooks好用 => 比如需要跨越多个生命周期的公共逻辑）

• 提取hooks的原则？ （公共逻辑且带有状态的，不适合写util函数的）

• useEffect 里面多个依赖，导致里面函数频繁更新怎么办？ （尽量减少依赖，更新函数内部用if判断是否要执行后续逻辑）
• 受控组件和非受控组件？ （用useEffect去处理副作用 还是 通过事件去处理副作用）
• store中 redo/undo怎么实现？ （redux ? mobx怎么进行状态回溯？）
• 怎么去设计store？ (分层 domain store 和 ui store)
• mobx的实现原理？ （Proxy 代理 set 和 get）

自定义 Hooks 场景

1.抽离业务逻辑层 （逻辑复用，关注分离）

2.封装通用逻辑 （实现代码的模块化和解耦）

3.监听浏览器状态

4.拆分复杂组件。

lerna 和 pnpm区别

lerna已经不再持续维护了

yarn安装依赖太慢了

yarn workspace 缺陷：

在 yarn + lerna 中的方案是配置自动抬升，这种方案会存在依赖滥用的问题，因为抬升到顶层后是没有任何限制的，一个依赖可能加载到任何存在于顶层 node_modules 存在的依赖，而不受他是否真正依赖了这个包，这个包的版本是多少的影响。

就是说，比如packages/项目 的package.json中没有依赖包，但是因为所有包都提升到顶层了，所以所有项目都可以使用没有依赖的包，这样单独安装项目后，就会报错。

子项目源码可以访问本不属于当前项目所设定的依赖包。

pnpm 则是通过使用符号链接的方式仅将项目的直接依赖项添加到 node_modules 的根目录下。

智能信息一面

• 根据简历去问
• mobx 和 redux 怎么技术选型
• react 和 vue 的差异
• canvas渲染的性能优化
• react 16/17/18 的区别

算法：

实现深度遍历查找

    const tree = {
      name: "a",
      children: [
        {
          name: "b",
          children: [
            { name: 'g' },
            { name: 'h' },
          ]
        },
        {
          name: "c",
        },
        {
          name: "d",
          children: [
            { name: 'j' },
          ]
        },
        {
          name: "e",
        },
        {
          name: "f",
        }
      ]
    }

    deepFind(tree, 'j')

解决：

	const deepFind = (tree, name) => {
      if (tree.name === name) {
        return true
      }
      if (!tree.children || !tree.children.length) {
        return false
      }
      for (let i = 0;i < tree.children.length;i++) {
        const child = tree.children[i]
        const result = deepFind(child, name)
        if (result) {
          return true
        }
      }
      return false
    }

实现自定义filter

    const arr = [1, 2, 3, 4]
    Array.prototype.myFilter = function (fn, context) {
      // 实现自定义 filter
      // fn 参数 为 item当前值 index索引 list整个数组
      // context 为 fn 的 this 指向上下文
    }
    const res = arr.myFilter(function (item, index, list) {
      console.log(item, index, list)
      return item > 2
    })
    console.log(res)

实现：

    Array.prototype.myFilter = function (fn, context) {
      if (typeof fn !== 'function') {
        throw new Error("fn is not a function")
      }
      const res = []
      const ctx = context || window
      for (let i = 0;i < this.length;i++) {
        if (fn.call(ctx, this[i], i, this)) {
          res.push(this[i])
        }
      }
      return res
    }

智能信息二面

• 主要还是问简历上的一些项目 (大厂非常重视指标，如果做了优化之类的工作，一定要有优化前和优化后的指标数据)
• CDN 查找原理 => 查看网络相关blog
• electron 和 小程序 的渲染的异同点
• js动画和css动画的区别？为什么js动画更消耗性能？
• canvas绘制原理？ （在canvas标签里面绘制比在dom树中绘制性能跟高）
• 浏览器绘制ui的底层原理
• 对http协议的认识？ http 1.1 和 2.0 的区别
• 有没有遇见过流量挟持问题？

腾讯

pcg一面

基础面

• 常见状态码 100 200 301 302 304 （临时重定向，永久重定向的表现有什么不一样）400 401 403 404 （401 403 的区别）500 503
• flex布局 grid布局
• 给你设计稿 怎么拆分页面 组件 布局
• 对单元测试了解
• 对ts的了解
• 对vue3的了解

http状态码301和302的区别

https://blog.csdn.net/ai2000ai/article/details/80242193

​ 详细来说，301和302状态码都表示重定向，就是说浏览器在拿到服务器返回的这个状态码后会自动跳转到一个新的URL地址，这个地址可以从响应的Location首部中获取（用户看到的效果就是他输入的地址A瞬间变成了另一个地址B）——这是它们的共同点。

​ 他们的不同在于301表示旧地址A的资源已经被永久地移除了（这个资源不可访问了），搜索引擎在抓取新内容的同时也将旧的网址交换为重定向之后的网址；302表示旧地址A的资源还在（仍然可以访问），这个重定向只是临时地从旧地址A跳转到地址B，搜索引擎会抓取新的内容而保存旧的网址。

什么时候需要重定向呢？

• 网站调整（如改变网页目录结构）；
• 网页被移到一个新地址；
• 网页扩展名改变(如应用需要把.php改成.Html或.shtml)。

这种情况下，如果不做重定向，则用户收藏夹或搜索引擎数据库中旧地址只能让访问客户得到一个404页面错误信息，访问流量白白丧失；再者某些注册了多个域名的网站，也需要通过重定向让访问这些域名的用户自动跳转到主站点等。

vue 的 computed 的原理

https://juejin.cn/post/6844904200539734023

// 注意这里 lazy watcher
const computedWatcherOptions = {lazy: true}


function initComputed(vm: Component, computed: Object) {
  // $flow-disable-line
  const watchers = (vm._computedWatchers = Object.create(null))
  // computed properties are just getters during SSR
  const isSSR = isServerRendering()

  for (const key in computed) {
    const userDef = computed[key]
    const getter = typeof userDef === 'function' ? userDef : userDef.get

    if (!isSSR) {
      // create internal watcher for the computed property.
      watchers[key] = new Watcher(
        vm,
        getter || noop,
        noop,
        computedWatcherOptions
      )
    }

    // component-defined computed properties are already defined on the
    // component prototype. We only need to define computed properties defined
    // at instantiation here.
    if (!(key in vm)) {
      defineComputed(vm, key, userDef)
    }
  }
}

这里遍历了 computed 里面的每一个属性，并且为每一个属性初始化了一个 Watcher 对象。这样，当我们在 computed 里面访问 data 里面的属性时，就可以收集到依赖了。注意到这里传入了 { lazy: true }，我们看看会有什么效果：

    this.dirty = this.lazy // for lazy watchers
    ...
    this.value = this.lazy
      ? undefined
      : this.get()

该属性仅仅是标记了当前数据是 “脏的”，并且不会立即求值。

然后我们看看 defineComputed 做了啥：

export function defineComputed(
  target: any,
  key: string,
  userDef: Object | Function
) {
  // 不考虑服务端渲染，这里为 true
  const shouldCache = !isServerRendering()
  // 只看 computed 值为函数的情况
  if (typeof userDef === 'function') {
    sharedPropertyDefinition.get = shouldCache
      ? createComputedGetter(key)
      : createGetterInvoker(userDef)
    sharedPropertyDefinition.set = noop
  }
  Object.defineProperty(target, key, sharedPropertyDefinition)
}

这里执行了 createComputedGetter 这个方法：

function createComputedGetter(key) {
  return function computedGetter() {
    const watcher = this._computedWatchers && this._computedWatchers[key]
    if (watcher) {
      if (watcher.dirty) {
        watcher.evaluate()
      }
      if (Dep.target) {
        watcher.depend()
      }
      return watcher.value
    }
  }
}

当我们第一次访问计算属性的时候会触发 get，由于 dirty 为 true，所以这里会走 watcher.evaluate 进行求值，并将 this.dirty 置为 false，这样下次再对 computed 进行求值的时候就不会执行 watcher.evaluate() 了，这样就实现了缓存功能。

  evaluate () {
    this.value = this.get()
    this.dirty = false
  }

而当 computed 依赖的数据变化的时候，会触发 Watcher 的 update：

  update () {
    /* istanbul ignore else */
    // computed
    if (this.lazy) {
      this.dirty = true
    } else if (this.sync) {
      this.run()
    } else {
      // 入队
      queueWatcher(this)
    }
  }

这里仅仅是把 dirty 又重置为了 true 以使得下次对 computed 进行求值的时候重新执行 watcher.evaluate()。

页面A 引用了 computed B，computed B 依赖了 data C

https://juejin.cn/post/6844903877699960846

data C 开始变化后

通知 computed B 更新，然后 computed B 开始重新计算

接着 computed B 通知 页面A更新，然后重新读取 computed

一条链式的操作？ C -》 B -》 A 这样的执行顺序吗？

答案：不是

其实真正的流程是，data C 开始变化后

1通知 computed B watcher 更新，其实只会重置 脏数据标志位 dirty =true，不会计算值

2通知 页面 A watcher 进行更新渲染，进而重新读取 computed B ，然后 computed B 开始重新计算

为什么 data C 能通知 页面 A?

data C 的依赖收集器会同时收集到 computed B 和 页面 A 的 watcher

为什么 data C 能收集到 页面A 的watcher?

在 页面 A 在读取 computed B 的时候，趁机把 页面A 介绍给 data C ，于是 页面A watcher 和 data C 间接牵在了一起，于是 data C 就会收集到 页面A watcher

所以computed 如何更新

被依赖通知更新后，重置 脏数据标志位 ，页面读取 computed 时再更新值

判断一个东西是不是对象

• Object.prototype.toString()
• instanceof 原理
• typeof 弊端

深挖简历

• loc 依赖反转为什么用 有什么用 还是会打包进sdk吗 （sdk相关）

• b端项目的文件结构

• 爬虫

• 框架

pcg二面

总结：描述具体项目的时候组织语言欠缺一点清晰，不能把一件事讲的非常清楚，没有很好地突出自己所做的东西的难点，和岗位的匹配度不够

主要是对简历的一些深入了解，对项目的考察

• 你做过最难的事情是什么
• 技术成长
• 技术思考
• …

PCG 商业广告一面

• 数组常用方法 => reduce? => sort api 会改变原数组吗？ 会。就地对数组的元素进行排序，并返回对相同数组的引用
• 数组 中 push api 的返回值 => 返回新的数组长度
• vue2/vue3 对数组的处理？ Object.defineProperty 和 Proxy 的区别
• reactServerComponent => 有什么用
• webpack 和 vite 的区别
• vite 中为什么生产环境不用 esbuild？
• http 和 https
• https 对称加密和非对称加密 => 为什么不直接用非对称加密
• react 和 vue 的区别
• react 16/17/18 的区别
• hooks 的好处

reactServerComponent

https://blog.logrocket.com/what-you-need-to-know-about-react-server-components/

https://www.freecodecamp.org/news/how-to-use-react-server-components/

reactServerComponent 是 React 的一个新功能，用于改善服务器渲染（Server-side Rendering）时的性能和交互性。

使用 reactServerComponent，可以将 React 组件的渲染过程放在服务器端完成，然后将渲染的结果发送到客户端。这样可以减轻客户端的负担，提高初始加载速度，并且可以在首次渲染后继续从服务器端接收更新的组件。

reactServerComponent 具有以下特点和用处：

1. 减轻客户端负担：React 组件的渲染过程在服务器端完成，客户端只需接收已渲染好的结果，无需再进行大量的计算和渲染。
2. 提高初始加载速度：由于渲染工作在服务器端完成，可以将渲染结果直接发送到客户端，从而加快页面的初始加载速度。
3. 支持组件的增量渲染：reactServerComponent 提供了服务端和客户端之间的通信接口，可以在首次渲染后继续从服务器端接收更新的组件，实现组件的增量渲染。
4. 提供一致的交互性：reactServerComponent 可以在服务器端处理用户的交互操作，并将更新的结果发送到客户端，从而实现与客户端渲染一样的交互性。

总的来说，reactServerComponent 通过在服务器端完成组件的渲染和更新，并与客户端进行交互，提供了更高效和更一致的服务器渲染体验。

RSC 和 SSR 的区别

RSC => React Server Component

With Server Side Rendering, we send the raw HTML from the server to the client, then all the client side JavaScript gets downloaded. React starts the Hydration process to transform the HTML to an interactive React component. In SSR the component doesn’t stay on the server.

with React server components, the components stay on the server and have access to the server infrastructure without making any network roundtrips.

SSR is useful for faster loading of the initial page of your application. You can use SSR and RSCs together in your application without any problems.

算法：

快速排序

不能原地排序

onst quickSort = (arr = []) => {
  if (arr.length <= 1) {
    // 注意这个结束条件
    return arr
  }
  // 注意：这里一定要int => 不然出现 arr[1.5] => 导致死循环
  let index = parseInt(arr.length / 2)
  let left = []
  let right = []

  for (let i = 0;i < arr.length;i++) {
    if (i !== index) {
      if (arr[i] <= arr[index]) {
        left.push(arr[i])
      } else {
        right.push(arr[i])
      }
    }
  }

  return [...quickSort(left), arr[index], ...quickSort(right)]
}

template 解析器

const data = {
  aaa: "11111111",
  bbb: "222"
}
let template = "abc abc"  
// 将template中中的值替换成data中的值
const res = test(template, data)
console.log("res", res)

解决：

// 正则(最快的方式)
function test(template = "", data = {}){
  let reg = /\{\{(\S+)\}\}/g
  return template.replace(reg, (...args) => {
    const [match, p1] = args
    return data[p1]
  })
}

const test = (template = "", data = {}) => {
  let res = ""
  let leftFirstIndex = []
  let flag = false
  for (let i = 0;i < template.length - 1;i++) {
    let char = template[i]
    let nextChar = template[i + 1]
    if (char == "{" && nextChar == "{") {
      leftFirstIndex.push(i)
      flag = true
    } else if (char == "}" && nextChar == "}") {
      let rightFirstIndex = i
      let lastLeftFirstIndex = leftFirstIndex.pop()
      // 截取
      let key = template.slice(lastLeftFirstIndex + 2, rightFirstIndex)
      let value = data[key]
      // 拼接
      template = template.slice(0, lastLeftFirstIndex) + value + template.slice(rightFirstIndex + 2)
      // 计算i坐标 => 光标是否要移动 
      // 考虑 => 字符串可能别之前少 可能比之前多
      let reduce = 1 // 减少的部分
      let add = value.length
      let num = add - reduce // 变化值
      if (num > 0) {
        while (num >= 0) {
          num--
          i++
        }
      } else {
        while (num <= 0) {
          num++
          i--
        }
      }
      flag = false
    } else {
      if (!flag) {
        res += char
      }
    }
  }
  return res
}

商业直播一面

主要还是一些常规的基础面试

时间：1h30min

• 什么是闭包？你在哪里会使用到闭包？
• 浏览器的事件循环
• 常见的状态码
• 网络安全
• pwa
• virtual dom 和 virtual dom diff
• https相关
• 4点15分 分针和时针的夹角 => 3点和4点之间的夹角 30° => 4点15分 时针会偏移数字4 30° * 1/4 = 7.5° => 一共 37.5 °

微任务宏任务输出

setTimeout(() => {
  console.log(1);
  Promise.resolve().then(() => {
      console.log(2);
  });
})

setTimeout(() => {
  console.log(3);
  Promise.resolve().then(() => {
      console.log(4);
  });
})

// 1 2 3 4 

控制并发

// fns 为请求函数
function multiRequest(fns, max) {
  const len = fns.length;
  const result = new Array(len).fill(false)
  let count = 0

  return new Promise((resolve, reject) => {
    while (count < max) {
      next()
    }

    function next() {
      let current = count++
      if (current >= len) {
        if (!result.includes(false)) {
          return resolve(result)
        } else {
          return reject(result)
        }
      }
      let fn = fns[current]
      Promise.resolve(fn()).then(res => {
        result[current] = res
        next()
      })
    }
  })

}

大数相乘

输入2个数字组成的字符串，模拟乘法的方式输出他们的乘积。

function bigCalc(a = '', b = '') {
  let long = ''
  let short = ''
  if (a.length > b.length) {
    long = a
    short = b
  } else {
    long = b
    short = a
  }

  let shortIndex = short.length - 1
  let longIndex = long.length - 1
  let jinwei = 0 // 进位
  let ten = 0
  let arr = []
  while (shortIndex >= 0) {
    let str = getOneStr(short[shortIndex], long, ten)
    arr.push(str)
    ten++
    shortIndex--
  }
  // 将arr全部加起来
  return getTotalStr(arr)
}

function getOneStr(one, str, ten) {
  let res = []
  let index = str.length - 1
  let jinwei = 0
  while (index >= 0) {
    let cur = one * str[index] + jinwei
    // console.log(cur)
    jinwei = parseInt(cur / 10) || 0
    let temp = (cur % 10) + ''
    res.unshift(temp)
    index--
  }
  if (jinwei) {
    res.unshift(jinwei + '')
  }
  while (ten) {
    res.push('0')
    ten--
  }
  return res.join('')
}

function getTotalStr(arr) {
  let res = []
  let jinwei = 0
  let maxLen = arr[arr.length - 1].length
  let maxIndex = arr[arr.length - 1].length - 1
  arr = arr.map((item) => {
    while (item.length < maxLen) {
      item = '0' + item
    }
    return item
  })
  while (maxIndex >= 0) {
    let cur = jinwei
    for (let i = 0; i < arr.length; i++) {
      cur += parseInt(arr[i][maxIndex])
    }
    jinwei = parseInt(cur / 10) || 0
    let temp = (cur % 10) + ''
    res.unshift(temp)
    maxIndex--
  }
  if (jinwei) {
    res.unshift(jinwei)
  }
  return res.join('')
}

测试

let a = '123'
let b = '12'
const res = bigCalc(a, b)
console.log('res', res)

// 0246
// 1230
// ------------
// 1476

商业直播二面

时间：40min+

如何使首屏加载更快？ （vendor移除非首屏的chunk js使用async 和 defer）

你做过那些性能优化？

给你一个网站如何具体设计缓存策略？强缓存 协商缓存？哪些资源需要强缓存？

hybrid app 内嵌h5 如何双向通信？ app => h5 和 h5 => app

Pwa离线加载的原理 ？怎么做到缓存的？

canvas动画的优势？ canvas 和animation相比较它的优势在哪里？

cdn的原理？当资源一上传的cdn它就一定能在最近的节点获取到吗？了解过cdn回源吗？

你搭建的工作流 在开发时和编译时分别做了哪些处理？

对pwa的了解

如何使首屏加载更快

• 组件懒加载

• 减少http请求

• 图片压缩 图片懒加载

• CSS Sprites 精灵图

• 使用CDN

• 合理利用缓存

• pwa

• 代码压缩

• 将样式表放在头部 将脚本放在底部

• gizp压缩

• Tree-shaking、Scope hoisting、Code-splitting

• SSR

• 提早解析 DNS <link rel="dns-prefetch" href="//oss-dev.ishowyu.com">

• 使用HTTP2