我又面试了，只要没拿到 offer ，面与不面都不开心，腾讯二面总是要这样对我，我哭了。。。能力一时半会是提不上来了，什么时候能让我面一个正常一些的。

一面 华师专场 30min 顶这巨大的头痛面的 差点凉凉

• 自我介绍
• 为什么要限制跨域访问，如何跨域？
• 介绍一下闭包
• 内存泄漏的表现是怎样的？垃圾回收是怎么进行的？内存整理的时候怎么维护内存地址的查找的？（记录的是偏移量）
• 介绍一下盒模型，更改宽度计算的属性是什么？
• 讲一讲 promise 和 setTimeout
• 一道题 关于 promise 和 setTimeOut 的代码，输出是什么？
• 链表的数据结构
• 一道题：链表是否成环
• 反问

二面 1h

• 自我介绍
• 现在有一个 10g 数据量大小的文件，每个数据是一个数组，现在运行内存只有 4g，要查找出前 100 个最大的数，怎么做？以及你这样的时间复杂度是怎样的？
• leetcode LRU 实现 get 和 put 方法，要求时间复杂度都为 O（1）
  呜呜呜，一开始那个 map 的 value 就搞错了，最后快面完了，面试官还有下一个面试，也没有机会再讲了。。。
• 反问 业务主要是腾讯云服务的销售部分

• 和简历相关的问题
  • 介绍项目的重难点
  • Taro 跨端的原理
  • 介绍一下 GraphQL
  • 比较一下React 函数组件和类组件
  • 你知道哪些 react hooks？介绍一下 useEffect、useCallBack、useMemo
  • 服务端渲染和浏览器端渲染
  • 微服务架构
  • RPC框架
  • 单元测试和功能测试
  • 响应式布局和自适应布局，如何做兼容性适配？
  • 项目所做的性能优化
  • 实习的收获
• 结尾
  • 为什么选择前端
  • 以后的规划，为什么选择就业
  • 怎么学习前端的
• 前端相关
  • promise、闭包
  • 手写函数：
  • sessionStorage, localStorage
  • React.Lazy
  • HOC 与 自定义 hook
  • 使用过 redux 吗，介绍一下
  • 用过 node.js 吗
  • 防抖、节流
  • webpack 的 loader 和 plugin
• 计算机基础
  • 进程和线程
  • tcp 与 udp
  • https
• 高频算法
  • 排序算法

感觉这个东西有些废图，但我又懒得搞图。

之所以想看v8垃圾收集机制，是因为在看闭包时产生的困惑，关于它如何做到销毁函数部分的的时候，还保留闭包。

首先，JS 有八种数据类型，除 Object 外为引用类型外，其它成为原始类型。原始类型的变量存储在 Stack 内，引用类型的变量的值存储在 Heap 内，此外对于 JS 引擎识别出的 Closure （并且在调试面板上也可以查看到 Closure 内的实际存储内容）的存储也是在 Heap。原始类型变量互相赋值时，是“按值传递”，引用类型互相赋值时，是”按地址传递“。

Stack 空间的回收，是通过 ESP （记录当前执行状态的指针）的移动来实现的，不涉及到垃圾回收器。Heap 空间的回收依靠垃圾回收器进行。

V8 会把堆空间分为新生代和老生代两个区域（名字怪奇怪的，还不如叫短时使用区域和长时使用区域呃呃），并且老生代分配的空间比新生代大很多（2 8 法则）。V8 分别使用两个不同的垃圾回收器，以便更高效地实施垃圾回收。副垃圾回收器，主要负责新生代的垃圾回收。主垃圾回收器，主要负责老生代的垃圾回收。

垃圾回收器共同的执行流程：

• 标记空间中的活动对象和非活动对象；
• 回收非活动空间对象的空间；
• 内存整理。

副垃圾回收器：
新生代中用 Scavenge 算法来处理。所谓 Scavenge 算法，是把新生代空间对半划分为两个区域，一半是对象区域，一半是空闲区域，新加入的对象都会存放到对象区域，当对象区域快被写满时，就需要执行一次垃圾清理操作。在垃圾回收过程中，首先要对对象区域中的垃圾做标记；标记完成之后，就进入垃圾清理阶段，副垃圾回收器会把这些存活的对象复制到空闲区域中（互换），同时它还会把这些对象有序地排列起来，所以这个复制过程，也就相当于完成了内存整理操作，复制后空闲区域就没有内存碎片了。经过两次垃圾回收依然还存活的对象，会被移动到老生区中。

主垃圾回收器：

全停顿：
由于进行垃圾回收的过程，JS要暂停执行，为避免明显的卡顿，将垃圾回收过程分割成若干片段，穿插标记（非）活动对象。称为增量标记（Incremental Marking）算法。

八股还是类似的八股，只不过我已经不记得了，sos

• get 和 post，post为什么不能缓存
• useEffect 和 useLayoutEffect
• 防抖和截流
• 闭包、闭包的应用
• HOC 与 高阶函数
• react fiber 或者原先的 react 架构
• 箭头函数
• bff
• 0.1 + 0.2 ；如何按位四舍无入？
• 同源策略和如何跨域携带 cookie
• 模块循环依赖，如何解决
• async defer
• 编程题：eventEmitter
• 反问：除了电商外，他们还有点评和物流的业务，组别之后分配。

武汉 飞书

• 自我介绍
  专业和做过的项目。提到 gatsby 更适合用来做 wiki 类的静态网站，OI Wiki 有大量的 md 文件，gatsby 社区中有将 md 转为 html 的插件，被问有没有了解其具体的转换过程，AST 的解析过程，我说不了解。
• 括号匹配
  我用 c++ 写代码，面试官说可以用 JS 写，我说 JS 不知道怎么处理输入和没有栈结构(不确定语气。我是**，数组结构是有和栈一样功能的，push 和 pop。)面试官让我说一下思路，我答 ( 入栈，）匹配，能最后匹配掉且栈空则 true。他认为这样不能处理某种情况，又补充了最后一种情况，我解释了一下。

'()'
'(())()'
')(' // false
'())' // false
')()'

• taro 跨端跨框架的理解、h5 有没有用过 native 接口？
  我说跨端是垮 ios 、安卓、电脑，跨框架是可以用 react 和 vue 语法。他解释垮框架应该是一套代码（vue/react）可以编译成小程序代码、h5代码。
• https 握手过程？？
  我说没学过，只知道 https 是在 http 上加了一层 SSL 验证，等说了几句很浅薄的话。解释自己还没学计算机网络只看过图解 http 和 http 权威指南。他说那就不问这一块的了。
• 浏览器的渲染过程
  dom树 -> style -> layout -> layer -> (分块、漏答了） -> 绘制指令 -> 栅格化 -> 合成和显示。期间自己想说合成线程与 GPU 与浏览器之前的传输，表述不清，他说 GPU 这一块太远了。
• 看代码输出结果。promise 与 setTimeOut

setTimeout(() => {
    Promise.resolve(1).then((res) => console.log(res));
    console.log(4)
}, 0)

setTimeout(() => {
    console.log(2)
}, 0)

console.log(3)

// 3 4 2 1; 我
// 3 4 1 2; 答案

• JS的数据类型。基础数据类型与引用数据类型。
  我说8大数据类型，然后脑子一片空白不知道哪8大，说了 number symbol bigInt string（复杂数据类型）。（再骂一句，我是**）。基础数据类型 按值传递，引用数据类型 按地址传递。他补充基础数据类型a变，b不变，引用 a 、b一起变。
• 为什么通常把 script 放在末尾，css 放在 head 里？
  script 会阻塞渲染。但 script 具体放哪还是看情况，比如 script 中有 dom 的操作，比如 script 里有触发渲染来减少白屏时间。
• 你有什么想问的吗？
  问了为什么要设计 react hooks，除了语法层面更简洁外 。他说纤层化，将一个复杂的任务分成很多小的 task。react hooks 会产生很多 function ，v8 有关于 function 部分的优化，使得 react hook是成为可能，不至于由于大量的 function 变得很慢。

深圳 商业化技术 宿舍网好差啊 断网好多次 我哭了

• 自我介绍
• 项目中的高亮怎么做的？
• 数据类型的判断方法有哪些？手写一个 instanceOf
• 介绍一下浏览器的事件循环机制，setTimeOut 在哪个线程中？
• 看代码 说输出。
• 浏览器缓存 以及 sessionStorage 两个不同的窗口 相同的网址 可以互相访问吗？
• http 缓存。E-Tag 和 Last-Modifed 的比较，以及他们的优先级。如果你自己去处理缓存，你如何设置？
• 浏览器安全问题，xss 的防范，仔细问了有具体哪些。
• 跨域的解决办法。JsonP 的原理 ，jsonp 的缺点。
• Content Security Policy 了解吗？内容安全协议
• 有用过 webpack 吗？webpack loader 和 plugin 知道吗？你知道 webpack 的钩子函数的工作流程吗？
• 算法：最长无重复子串
• 反问（主要是 抖音上一些广告相关的页面，技术栈 react 、vue、react native、h5）

面完了想自杀，挺简单的，但是我一眼都没看react、css，都在看 js和浏览器，很多都忘记了。

• 自我介绍
• 项目和实习问了一点点。
• react hooks 有哪些？
• useEffect、useMemo、useCallback。useEffect 的 return。
• webpack loader 和 plugin
• react key
• 盒模型、box-sizing。
• position
• header、sideber、content 用css。flex。
• 写一个 button 组件。
  继剪完头发的另一个想自杀的原因。

美团 餐饮Saas 成都

一面

• 自我介绍

• 说一说你常用的 react hooks, 介绍一下 useEffect
  useEffect 的执行时机 componentDidMount, componentDidUpdated。扯了半天，我说在 useState 里面使用 localStorage 在build 阶段会出错，他说不可能吧。

• localStorage 和 sessionStorage。localStorage 与 path、port 相关吗？

• 强缓存和协商缓存？

• cache-control: no-cache 和 no-store ？ max-age = 0 与 no-cache?

• 跨域的方式？cors 的怎么工作的？
  提到了 cors 的简单请求与复杂请求，复杂请求的那个预请求的 method 不记得了。

• 想要跨域携带 cookie 怎么做 ？如何防止 cookie 劫持？cookie 为什么能做身份验证，后端是怎么做的？
  same-site none ；他说除了这个还有吗？（所以还有啥？？）。防 xss 攻击 httpOnly（其实还有 csrf）。猜测根据用户 id 按固定的算法生成一个随机数 cookie，把他和 id 一起存入数据库，后面即可以按照 cookie 查找用户。

• Linux 命令用过哪些? 8080 端口运行了哪些任务？如何杀死 node 进程？

• 知道虚拟内存吗？swap 分区知道吗？
  又瞎说了一些（虚拟内存可以从逻辑上扩充物理内存），他说算了算了，看看别的，😭。

• 看你写了 ES6。说一说 promise 的用法？reject 可以在 then 中被接收吗？try catch 内定义了一个 promise 但没有显示 reject 和 catch 可以被外层的 try...catch 捕获吗？
  ....你理解的不太对，之后自己去看看。

• 看你用了 ESLint，如果要在 commit 之前做一些验证，怎么做？
  package.json pre-commit eslint -某个命令做一下 eslint 检查看是否符合定义规范。

• 看你写了 TypeScript，TypeScript 了解吗？let a: unknown? a = {b: 1}, let b: typeof a?
  只知道 any type。。。

• 说说数组的API。

• 手写深拷贝。
  

• 反问：业务。

• 自我介绍
• 怎么接触前端的？为什么会想到要加入技术团队？学校的课程对你前端的帮助？
• 怎么学习前端的？
• 说几个你应用过的设计模式？（上一个问题自己提到了设计模式）
• 从输入 url 到生成页面发生了什么？
• 说几种阻塞渲染的情况？什么场景下 js 会放在 body 的首部而不是尾部？
  不知道 js 触发渲染的代码是怎么样的。。
• react 的发展历史？什么时候 react 被设计出来的？为什么要由 MPA 转向 SPA？
• react 的核心的理解？比如 virtual dom？
• react 的生命周期函数有？
• 如何理解前端的定位？
• 你对美团公司的印象？
• 你自己的优势，性格上技术上？缺点？
• 团队协作最重要的是什么？怎么避免沟通时你以为别人懂了但别人没懂的问题？
• 反问

• 介绍下项目的难点。项目中的链接跳转是怎么的？tabbar 的中英适配怎样做的？i18n 需要满足怎样的需求了解过吗？
• script 标签是会阻塞渲染吗？它为什么会阻塞渲染？难倒不能执行 js 的同时构建 dom 树吗？要防止这样的现象怎么做？async 和 defer 的区别？
• 小程序中能使用 window 对象吗？
• 小程序的渲染进程和 js 执行线程是分离的吗？为什么要分离？分离有什么优缺点？
• 介绍一下 graphQL ？有没有用 graphQL 作为后端写过？
• 讲一讲你写过的组件？根据 type 确定图标是怎么做的？有没有想过用别的方式（除 map 外）处理？import 这些 svg 资源时有没有做异步加载？异步加载和按需加载是一个东西吗？webpack 的一个插件 or 功能(?)是可以将一堆文件处理成对象的，两行代码就可以做到就不用写那么多 import 了。
• sem （？？）了解吗？一个 css 命名规范。
• 图标是用的 svg 吧？svg 的 xxx 知道吗？（他说是 svg 的一个属性，忘记了）？你的图标可以改颜色吗？
• 讲一讲 csrf 。如何防范？设置了 same-site：none 是不是就 csrf 成功了？还要干什么？
• 用过 react hooks 对吧？知道 componentShoudUpdate 这个生命周期函数吗？react hooks 中有吗？它对应的是什么？
• useState 可以在 for 或者 if 中用吗？
• 讲一讲 useCallback ？useCallback 什么场景下使用比较好？
• 反问

1. URL请求过程

首先，网络进程会查找本地缓存是否缓存了该资源，如果缓存了，返回资源给浏览器；没有的话，进行网络请求。

根据 URL 进行 DNS 解析，获取 IP 地址，利用 IP 地址和服务器建立 TCP 连接。建立连接后，浏览器构建请求行、请求头等信息，并与域名相关的 Cookie 等数据附加到请求头中，然后向服务器发送构建好的请求信息。

服务器收到请求后，根据请求生成响应数据（响应行、响应头、响应体等信息），并发给网络进程。网络进程（chromium多进程架构）接收到了响应头和响应行后，进行解析，如果状态码为 301（永久重定向）、 302（暂时重定向），则重定向至Location字段显示的网址。

如果是 200，根据响应数据类型进行处理。如果 Content-Type 是 application/octet-stream，按照下载类型处理。如果是 text/html ，则开始准备渲染进程。

2. 准备渲染进程

默认情况下，Chrome会为每一个页面分配一个渲染进程，但是如果是同一站点（根域名相同，geekbang.org ）下的两个页面，新页面会复用父页面的渲染进程，称为 process-per-site-instance。

3. 提交文档

是指浏览器进程将收到的 HTML 数据提交给渲染进程的过程。具体流程如下：

• 浏览器进程接收网络进程的响应头数据后，向渲染进程发起“提交文档‘的消息；
• 渲染进程受到消息后，与网络进程建立数据传输的”管道“；
• 通过管道完成传输后，渲染进程返回”确认提交“给浏览器进程；
• 浏览器收到消息后，更新浏览器界面状态，包括安全状态、地址栏、前进和后退的历史状态，并更新web页面。

4. 渲染阶段

按照渲染的时间线，分为如下子阶段：构建 DOM 树、样式计算、 布局阶段、分层、绘制、分块、光栅化、合成。

1. DOM树构建

HTML 文件经HTML解析器输出一颗包含节点和内容，但不包括样式的DOM树。

2. 样式计算

渲染引擎接收到 CSS 文本时，会执行一个转换，将它变成浏览器可以理解的结构----styleSheets。计算遵循 CSS 的继承与层叠规则。输出的内容是每个 DOM 节点的样式，并保存在 ComputedStyle 的结构中。

3. 布局阶段

构建一颗只含可见元素的布局树，对于不可见的的节点如 head 的内容、display none 的元素。

有了布局树后计算布局树节点的坐标位置。

4. 分层

将布局树（ LayoutTree ）转换为图层树（ LayerTree）。什么时候渲染引擎会为特定的节点创建新的图层？

• 拥有 z-index 属性的元素会被提升为单独的一层；

• 文字区域超过div的大小，文字部分会成为单独的一层；

• 如果设置的滚动条，滚动条也会成为单独的一层。

  5. 生成绘制列表

一些绘制的指令集合，比如绘制粉色矩形或者黑色的线等

6. 分块

有时候，有的图层很长，而视口只能展示一部分，没必要一下绘制出所有内容。基于这个原因，合成线程讲图层划分为图块，图块的大小是 256256 或者 512512。（如果下滑的话，渲染进程从那一步开始更新？栅格化前吧）

7. 栅格化操作

合成线程启动栅格化线程，在栅格化进程池中将(靠近视口的？）图块转换为位图。通常会使用 GPU 加速生成，生成的位图保存在 GPU内存中。而 GPU 操作是在 GPU 进程中，为跨进程操作。

8. 合成和显示

所有的图块（靠近视口的图块？）被栅格化后，合成线程会生成 DrawQuad 命令发送给浏览器进程，浏览器进程根据这个命令，将位图存到内存（浏览器进程的内存），最后将其显示到屏幕上。

记一些

• react hooks

function Counter() {
  let [count, setCount] = useState(0)

  useEffect(() => {
    let id = setInterval(() => {
      setCount(count + 1)
    }, 1000)
    return () => clearInterval(id)
  }, [])
  
  return <h1>{count}</h1>
}
// https://overreacted.io/zh-hans/making-setinterval-declarative-with-react-hooks/

• 为什么要 http -》 https
• 从输入浏览器到页面呈现。
• flex 布局

• label tag 和 input tag
• 浏览器多个标签页的通信
  • websocket 全双工通信
  • SharedWorker
  • localStorage
• a target
  • _self
  • _blank
  • _parent
  • _top
• data-* 全局属性 是一类被称为自定义数据属性的属性
• form action method get post 的区别
• token、cookie

一面

受到了无尽的打击，总有我准备不完的东西，脑子已经装不下那么多东西了，以及每天都在准备知识上的复习，实操上惨不忍睹。最可怕的是网上的唯一一篇面经，前两道题和我一样，当时瞄了一眼 promise 和 一个函数，看上去不是很难的样子，没在意，而且整个上午人也很焦虑，学不进去了，后果就是 promise 失败 + 1，拒信 + 1。

• (没有自我介绍，直接上来两道题) 题目一

setTimeout(() => {
    console.log(1)
  }, 0);
  
  const promise = new Promise((resolve, reject) => {
    console.log(2)
    reject(3)
    console.log(4)
  })
  
  promise
  .then(() => console.log(5))
  .catch(() => console.log(6))
  .then(() => {
    console.log(7)
    return new Promise((resolve, reject)=>{
        reject(11);
    })
  })
  .catch(() => console.log(8))
  .then(() => console.log(9))
  
  console.log(10)

• 题目二

const fn = (...args) => {
    let num = [];
    let str = '';
    for (let i = 0; i < args.length; i++) {
        console.log(args[i]);
        if(i === 0){
            str = args[0];
        }else{
            num.push(args[i]);
        }
    }
    let res = '';
    for(let i = 0; i < num.length; i++){
        res += num[i];
        // if(i !== num.length - 1){
            res += str[i+1];
        // }
    }
    res.slice(0, res.length);
    console.log(res);
    console.log('2+2+3=7');
  };
  const [a, b, c] = [2, 2, 3];
//   fn`'a' + ${a} + ${b} + ${c}= ${a + b + c} + 'n'`;
fn`${a} + ${b} + ${c}= ${a + b + c}`;

• linux 命令 如何重命名文件、如何登陆ssh、如何两台主机互相消息传递
• git 命令 git rebase 和 git pull 的区别
• graphql 和 restful 比较一下？现在有一种 type 为 student 和一种 type 为 teacher 如何查询以及查询后的区分（resolver alias）
• （项目一）一段字符串 a 中高亮出 b，怎么做？
• （项目二）你的项目难点就是调了几个 web API ？如何处理平台的差异？（权限请求）也就是一个 web API 解决了咯？
• （项目三）受控组件和非受控组件你讲一下？
• 反问（提到了他们的 storyTeller 产品）

二面（二面体验感好好，好想去这家公司，能不能给我个机会呜呜呜，不过最近宿舍网好差，有时声音都在卡）

• （再次不用自我介绍）看了面试官（都不知道上位面试官会给出什么样的评价……）和hr这边的评价后……你说一下你觉得挑战比较大的事情，可以是项目中，也可以是别的？
• 你期望在实习中获得什么？（还是你怎么选择一个公司？）
• Taro 跨端，你知道他是怎么做的吗？Taro 这边是写了很多测试代码……你项目中写过测试代码吗？
• react 的优缺点
• 看一道题 实现 JSON.stringfy （居然是我说思路，他写代码，有种代码自动生成的梦幻体验）
• 你为什么想到要参加那个开源活动？
• 反问1 问了实习生的工作，然后他详细介绍了他们公司的业务（私有云，介绍了公有云和私有云）、工作线（主线负责对外业务、内线做一些新方案的尝试、开源线把内部比较好的实践方案开源出来）
• 反问2 学习前端的建议。他建议1、不要把自己局限于前端，在初期。2、长期维护/跟进一个项目 3、可以做一些别人做不了的事，比如某个feature，网上还没有做过；比如某个方案已有但有问题（他说 gatsby 奇慢无比，我羞愧于我不知道），想他为什么会有这样的问题以及如何解决。这些工作，不一定说要产生什么商业效应，它可以是你觉得他很值得，他很有挑战性，哪怕他目前没人用，可是之后在某个工作场景那些经验都会是有用的。（我居然在听完这些之后再次燃起了技术热情（之前由于天天面试被浇灭了），想要好好学习，做更多更好的事情）

广告投放
好久没面了，还是面试一紧张就会脑子短路，感觉除了多面，习惯面试氛围+多准备提高熟练度，也没有其他救法了。
真的很想知道面试怎么才能大讲特讲啊。
八成挂了吧，😮‍💨，甚至都不想问面试官多久有反馈。笑拉了 秒挂。😮‍💨 10分钟后简历就被转走了。

• 自我介绍
  （又是扯那个本地h5 和 平台，问到了哪些要走本地，哪些要走平台，为什么不都走平台）
• react 和 vue，比较一下
• react hook 用过哪些。useEffect 和 useLayoutEffect 差别。
  到底什么情况下会触发差异，忘记了
• 写题 popupManager
  要不要this，看一看 那个eventEmitter 吧。
  let const var 变量提升
  sort 返回值
  object 属性先后
  for in 和 for of 区别，遍历次数一样吗？
  什么在函数外访问函数内变量？除了闭包还有吗？闭包的应用，写了一个防抖没写出来。
• flex flex-between 和 flex-around
• css 单位，rem 的应用
• 有没有测过首屏渲染的时间，start从哪里开始计算，end是哪里？。
• 反问（看我尽力表现对面试官感兴趣的样子，我自己都想笑）

the cascade

• origin: author styles or user stylesheet(browsers), ! important
• inline styles
• specificity: a notation for specificities
• If you make the two conflicting selectors equal in specificity, then whichever appears last wins.
  

不太记得了，可能不是很完全

• 不用自我介绍，开心😄
• 项目相关：讲一讲 graphQL ？（不太记得了。）如果要自己去将 mdx 转为 html？（反正我又说很乱，最后引到了 bable 上）
  graphQL 可以自定义数据，供之后的阶段查询。解析 mdx，生成数据结构，tag, title, content 等不同数据它可能数据项需要有 type 和 value 等一些项，还有确定 md 语法和 html 元素的对应关系，那个映射结果也要存下来。具体的实现或许可以通过 bable 工具吧？因为有 bable 很多遍历节点的 API，比如按节点类型遍历，比如在当前节点访问前后节点的 API。
• 后端相关
  用过后端框架吗？是数据持久储存吗？如何进行数据库的操作？查询是用的字符串查的吗？说 ORN 可以方便的使用各种数据结构。
  写过一个二手交易系统，用了 express 写接口，用了 mysql 做数据存储。用一个 mysql 连接的 JS 库进行连接后，将需要的参数传过去进行增删查改。
• 语言相关
  除 JS 语言外，还用什么？Java 用吗？c++ STL 了解吗？常见的数据结构？知道那些树结构？
  用过 C++ 写题，用过 C++ 做过一个简易的图书馆管理系统。用过 vector, stack, queue, unordered_map。queue, stack, 树结构（漏了很多）。二叉树，平衡二叉树，二叉搜索树。
• bable 相关
  ES5 转换成 ES6 的大致过程，词法分析后输出的是什么？
  词法分析-》语法分析-》语义分析……。token。他还说了一段，不太记得了，我为什么不录音wuwu。
  词法分析后生成各个token，比如一个表达式有声明部分，变量部分，值部分，然后看这些部分是否符合语法规范。对表达式的各部分进行合适的替换。替换之后在按照表达式的结构进行重组起来。
• 跨域问题
  什么是同站点？三个条件？跨域的解决办法？httpOnly 什么意思？samesite 什么意思？CORS 工作机制？www 与 XXX 属于跨域吗（记不清了，之后再补正）？
  相同的域名，相同的协议 http/ https 。他说还有端口号。我说不是 http 和 https 80 与 443 端口也指定了吗？有什么前端显示指定端口号的方法？他说在后端对于不同的 url 可能会用不同端口号，前端看不到，但实际上是不同的端口号。
  JsonP，CORS，代理。JsonP 就是在 script 内请求一个资源，并且设置一个回调函数，后端返回的 res 作为 callback 的参数执行。也解释了一下代理，懒得写了。
  只允许在 http 请求的时候使用，不允许 JS 访问 cookie。
  只接受相同 site 的请求，别的 site 请求发不出或者发出去了，服务端也不会给你需要的数据。比如我在 muxi 网站打开了华中师范大学的网站，设置了 samesite，cookie 是不会被发送给 ccnu 的。（讲的有些乱也不准确）
  发送请求时 head 内会有一个 origin 字段。后端返回时会有一个 access-control-allow-origin。如果 origin 是被允许的，则进行 CORS。
  我猜应该是属于跨域，不可以资源共享的。理由是 google 浏览器有个沙箱隔离，对于同站点用一个渲染进程，www 和 xxx 是会被认为非同站点，开启两个渲染进程的。他说和渲染进程没有什么关系。（我也知道，我只是把我上不了台面的推理拿出来了，谁让我对之前同站点的字眼视而不见。）
• 浏览器安全
  如何看待 google 的去 cookie 化
  认为它可以解决 XSS 和 CSRF 攻击。不太记得了。
• 浏览器缓存
  当浏览器访问一个网址的时候，会先查看缓存，如果先前已经请求过，回送的信息里可能有一些 expires 和 max-age 设置新鲜度，如果还新鲜就用这个数据，不新鲜就与服务器进行一个验证，因为有的时候不新鲜了数据可能也没有更改还可以再度使用。然后说有两个字段用来验证的，卡了一整说了一个 last-modified （我现在想起来了是 if-not-modified 和 if-none-match），还有一个不记得叫啥的。last-modified 就是纪录一下上次更改的时候，如果与服务器验证，这个时间后依旧没改，说明缓存可用。另外一个验证的是为了解决 last-modified 验证的一些弊端而提出的。比如秒的粒度不够，周期性重写，不重要重写这些都是不需要数据更新的。最后他说说的是 E-Tag 吧。我说对对对2333。
• 浏览器存储 cookie ……
  localStorage, sessionStorage。localStorage 针对站点存在，sessionStorage也是，但生存周期只在会话期，窗口关了，数据就没了。他说还有 cacheStorage 。我问 cacheStorage 和那个 IndexDB 有什么关系吗？他说 cacheStorage 适用于 server Worker （？）一些场景做存储，虽然用 IndexDB 也可以，但 IndexDB 纯粹是二进制数据存储，cacheStorage 可以更适用别的？
• element 和 node 的区别
  element 是 node 的子集。他补充举个例子就是 html 中的 注释属于 node 但不是 element 。但不排除一些浏览器也会把注释也翻译为一个 element。
• dom 的一些操作了解吗？dom 的 innerText 和 contentText 的区别？（dbq 问了两遍也没记住）
  类和 id 等一些查询获取节点，appendChild，innerHTML …… 不太清楚。他说其中一个是 W3C 标准，一个是某些浏览器自带的，说我不要用浏览器自带的。
• 箭头函数
  箭头函数与普通函数的区别？如何自己实现箭头函数？
  this 的指向不太一样，箭头函数是捕获外部的 this 。他说可以 let that = this 就可以捕获了，我说我想起了 react 函数组件的定时器数据由于 this 指向变化而异常显示的问题，也是通过这个方式来解决的。他说可以去看看 React 的闭包陷阱，闭包陷阱可以解决很多类似的问题。
• for of 用过吗? async 和 await 用过吗？其实现的原理是什么？bable 将 async / await 转换成 ES5 是怎样的？
  没。promise 和 生成器。const fn = await promise 。fn 就是一个 generator.next ，利用生成器的暂停和恢复执行化异步为同步。他说是for of 和 async await 都是一些迭代器。让我去写一个 async 和 await 然后 bable 翻译一下。（好的，我之后就去看冴羽的那篇文章）
• promise 的状态？catch 之后还可以 then 吗？
  未决议 resolve reject 。应该是可以的，catch 内也会出错，所以设置 then 来捕获 catch 的 error。
• react 相关
  用 react 和 vue？react hooks 用了多久？说下自己用过的 hooks？说一下 useMemo 的使用场景？
  去年暑假。useState, useEffect, useMemo, useCallback, useRef。计算量极大的情况下，比如由 a 和 b 计算出一个值，这个计算过程要几秒（我夸张了），使用它才比较划算。因为 useMemo 本身函数要内存空间，还有依赖列表，也会形成闭包，不会被销毁，这些都是优化的代价。
• 平时是如何学习前端的？
  写项目，查不懂得。看 js 的书。看周边的技术如状态管理，路由方案，写 demo。
• 常用的技术论栏
  stackOverflow medium 前端大牛的个人网站 知乎 （漏了掘金和 github MDN developers.google 不好意思）
• 反问
  业务？面试官讲了很多，不细说了，写累了。

面试官有点意思，一直表达说不用这么认真，我就随便问问，还说react的面试题他没准备。

• 自我介绍
• cookie session storage
• css div 的水平垂直居中几种办法
  缩小放大
• 事件循环机制
• js 基础数据类型，区分array 和 object 的几种办法
• react 生命周期
• react props 和 state
• 单向数据流
  • 子组件如何更改父组件的值
• react 18 新的变化 setState 和 事件机制啥的
• 爬楼梯和数组拍平 2选一
  被看到编辑器里我准备的手写题了，好尴尬。
• 反问
  • 网盘应用对前端来说有什么难点
    权限管理，计算，资源。

每个函数都有一个 prototype 属性，是该构造函数（Person） new 所创建的实例 person1 proto 属性指向的叫实例原型，记为 Person.prototype ，该实力原型可以的 constructor 属性为该 构造函数。
person1._proto_ === Person.prototype
Person.prototype.constuctor === Person

• 自我介绍
• 木犀课栈项目相关：为什么选用 Taro ？Taro 和 react 差异？如果 qq 小程序进行了更新，不对原先的版本支持，Taro 的更新没有跟上要怎么处理？关于消息提醒部分，如果进入个人主页后，断网了，但是有人给你评论了，如何在恢复网络的时候就请求接口或许消息通知？
• 美食 h5 相关：详细介绍一下它的重难点？对于你说的摇动检测在你用了 shake npm 包后，要对他进行配置吗？还是直接用？
• OI Wiki 相关：讲一下国际化支持为什么难做？（我有空一定要补上这个项目总结）
  这三个问题就已经废了很大的口舌了。
• react 父子组件通信有哪些方式？子组件想要向父组件传递消息怎么做？
  参考链接，和我想的差不多，但是当时那个状态提升的写法回忆了很久。。。
• 网络的分层？TCP 握手？为什么要三次握手？TCP 和 UDP 的区别？
• 讲一讲进程和线程？
• 浏览器线程有哪些？js 执行是在哪个线程？
• 讲一讲 v8 的垃圾收集？（是由于我说 js 要 v8 引擎执行才被问的，但 v8 不是个线程，然后不知道 js 到底在哪个线程。。。）
• 算法 （一道 easy 但是由于对 js 刷题不熟，搞的很焦灼）
• 反问
  腾讯文档在北京的业务主要是 ppt 、 表单收集、模版之类的。深圳是 word、excel 等。

一面 这一面的时间还比较短 30min

• 自我介绍
• 跨域的方式
• http 缓存
• 侧边栏（可收起）和主内容自适应布局，用 BFC 触发？？（我现在问 css 必死？？？
• react 生命周期
• react 虚拟 dom，你知道虚拟 dom 它的结构吗？
• setState 之后 this.state 获取到最新的值（好久之前的事了。。。可以用 setTimeOut 。
• 反问（面试官所在的部门是直播平台相关的）

二面 过去几天了，记我没答上的。 “双打”

• 一个有1000 item 的列表，想要点赞怎样事件绑定？
  我说了用事件委托，他问为什么用事件委托，事件委托有什么优点？
• 打乱数组算法
• 优雅的去重算法

完整代码

• 参考
• 先看调用

var _marked = regeneratorRuntime.mark(helloWorldGenerator);

function helloWorldGenerator() {
    // 1. wrap 之后返回一个 generator 具有原型上继承有 next 方法
    return regeneratorRuntime.wrap(
        function helloWorldGenerator$(_context) {
            while (1) {
                switch ((_context.prev = _context.next)) {
                    case 0:
                        _context.next = 2;
                        return "hello";

                    case 2:
                        _context.next = 4;
                        return "world";

                    case 4:
                        return _context.abrupt("return", "ending");

                    case 5:
                    case "end":
                        // 8. 最后一次直接执行 stop 没有参数传入，value 为 undefined
                        return _context.stop();
                }
            }
        },
        _marked,
        this
    );
}
// function* helloWorldGenerator() {
//     yield 'hello';
//     yield 'world';
//     return 'ending';
// }
var hw = helloWorldGenerator();

console.log(hw.next());
console.log(hw.next());
console.log(hw.next());
console.log(hw.next());

调用的时候关键的是通过 wrap 函数返回一个 函数，进入 wrap 函数查看，

• wrap 函数

   function wrap(innerFn, outerFn, self) {
        var generator = Object.create(outerFn.prototype);

        var context = {
            done: false,
            method: "next",
            next: 0,
            prev: 0,
            // 6. 'ending' 作为 arg 传入
            abrupt: function (type, arg) {
                var record = {};
                record.type = type;
                record.arg = arg;

                return this.complete(record);
            }, 
            complete: function (record, afterLoc) {
                if (record.type === "return") {
                    this.rval = this.arg = record.arg;
                    this.method = "return";
                    this.next = "end";
                }

                return ContinueSentinel;
            },
            stop: function () {
                this.done = true;
                // 7. 第三次的 next 最终返回值在此处，返回给 70 行 record arg
                return this.rval;
            }
        };

        generator._invoke = makeInvokeMethod(innerFn, context);

        return generator;
    }

wrap 函数返回了一个 generator 函数，该函数有继承自 outerFn 的 next 方法。这也是 next 能被执行的原因。

• 再看 mark 函数和 makeInvokeMethod

var mark = function (genFun) {
        var generator = Object.create({
            next: function (arg) {
                // 关键的地方
                // 2. this 指向调用对象，即 wrap 中的 generator
                return this._invoke("next", arg);
            }
        });
        genFun.prototype = generator;
        return genFun;
    };

经过分析，最后执行的是 function invoke 。invoke 函数其中的一个 value 结果来自 Babel 编译出的 helloWorldGenerator$ 函数调用后的返回结果。

• 关于生成器内部的构成
  • 参考：js 忍者秘籍第6章
  • 关于生成器的执行完成与否，以及生成器每次 next 返回结果的控制是通过 wrap 函数 context 变量中的 done,next,prev 等一些值维护的。根据 context 的值在 invoke 函数中进行 executing, compeleted, yield 各种状态的转换。
  • 为什么 next 能多次执行？主要原因是形成了一个闭包，保存了某些变量不被销毁。在 chrome 浏览器中调试这段代码，可以查看闭包的存在。（不过我倒是没看懂为什么闭包存下来的变量是那两个，之后有时间再瞅瞅）

• 自我介绍
• 分享一下你实习或工作期间遇到挑战和收获
  • 这个是干什么的，讲一讲难点在哪，怎么解决的，获得了什么结果。
• 掌握的前端技术有哪些
• 为什么投递我们公司
• 如何学习前端和如何进行知识管理。看了哪些书。
• css布局 并排3个盒子 2先缩小 1，3不动。2缩小到一定值，3开始缩小，1、2不动。
• 滑动到某个地方固定，css 和 js 怎么做。
• js 每秒输出一个数。串行执行promise数组。
• this 指向规则。
• 401 和 403
• redux 原理，除了redux，还有哪些状态管理的库。
• 编程范式 函数式编程和oop编程，他们的特点和优缺点。
• 设计模式 发布订阅模式（说redux实际就是发布订阅模式）
• typescript 怎么做类型推到的。 原理
• 你在前端比较深入的一个领域
  • 函数式编程 柯里化了解吗
• 介绍你遇到最难的项目（反复鞭尸我233，真的裂开了）
• 反问
  自知已经凉了，问了很多。
  1.如何评价面试表现，有什么面试改进建议。 回：问了也白问。
  2.业务和技术栈。
  3.当你问难点的时候，你认为什么回答是好的？
  回：技术选型，独立负责。
  追问：如果没有技术选型的发挥空间，做一个虚拟列表这种难度是否够？
  回：只要讲清楚怎么做的也ok。
  4.怎么设计面试问题
  应届会问一些基础，比如编程范式、比如设计模式和js基础吧。其它就跟着自我介绍和简历来。

• 自我介绍
• 项目亮点
• 同源限制。script 和 link
• CDN 原站点？中间站点？
• DNS 查询过程
• 用过什么库？
• 单测。error，不是针对语句，而是针对接口？
• 选择器组件。传一个初始值的传法？
• deepClone 。自引用问题？
• 为什么选择前端？

• HTTP 缓存
  • 参考：MDN HTTP/Caching 、HTTP 权威指南
  • 缓存 Get 请求的流程
    查看是否有缓存-》浏览器缓存新鲜度检查 -》与服务器验证
  • Expires 和 Cache-Control
    Expires 是一个绝对时间，依赖设备时间的准确性。
    Cache-Control 的 max-age 是一个时间长度，在该时间范围内再次请求，视为新鲜。还有 s-maxage 用于控制公共缓存。如果不新新鲜，或者设置了 Cache-Control: no-cache / must-revalidate 则与视情况与服务器校验。must-revalidate 和 no-cache 的区别半天看不懂，我死了。stackoverflow
    must-revalidate 是像正常情况那样缓存不新鲜，与服务端验证，为了防止有些浏览器不走这种流程使用过期的缓存而加以强调。no-cache 就是不检查新鲜度，直接验证。
  • If-Modified-Since, Last-Modified 和 If-None-Match, ETag
    如果服务器响应了 Last-Modified 和 ETag 字段，需要使用这两者进行验证，两者共同通过验证，返回 304 Not Modified。
    ETag 的相比 Last-Modified 的优势
    1. last-modified 只能以秒粒度
    2. 对于周期性重写的文件，更改内容不变。或者做了一些不重要的修改如注释的修改，也没必要重装数据？。
• 浏览器数据存储
  • localStorage
  • sessionStorage
  • IndexDB
• 反向代理 与 CDN
  负载均衡，最近资源响应，提高响应速度。

1. AMD

define('MouseCounterModule', ['jQuery'], $ => {
  ...
})

2. CommonJS

// module.js
modules.exports = {
  onClick: ...
}
const someName = require('module.js')
someName.onClick ....

3. ES6 import、export

• tree shaking
• 语法简单、基于文件
• 异步加载

• �let const
• 变量的解构赋值
• class 语法糖 继承不太记得了……
• promise
• generator
• async, await

• 问题来源
  • XSS
  • CRFS
  • Cookie
    • 使用
    • 安全性：secure, HttpOnly（不能用 js 访问 cookie), same-site = strict, expires, max-age
• 跨域解决
  • JsonP
    • 使用原理
    • post 请求。创建 iframe input 这种表单进行 post 请求。
    • script crossorigin: anonymous 不发送 cookie等信息
  • CORS
    • access-control-allow-origin
  • 反向代理 由代理转发请求
    • 正向代理 隐藏客户端身份
    • 反向代理 隐藏服务器信息
• 同源消息传递
  • postMessage

WXG 一面

史上最长面试，1h45min，是我太菜。。呜呜呜，不过现在前端面试是玩出花了吗？？

• 自我介绍
• 每个项目都问了一遍，当然主要是我在讲。
• 写道题 可以多次买卖的股票交易题
• 现在让你开发一个微信 h5 页面，从安全性和用户体验上讲讲你要怎么做？
• 场景是我要登陆腾讯校招网站，要扫描二维码进行qq授权，你知道这个校招网站是怎么知道授权通过后进行页面跳转的吗？要怎么做？
• 你了解 iframe 吗？�判断几个网址是不是 same-origin ？
• 观察者模式知道吗？
• 你有没有用过 webpack ？（ webpack 太伤了）
• 你看过什么源码？
• 你在团队内有什么贡献？
• 你是怎么学习前端的？
• 反问

CSIG 一面

不知道是我的问题还是正式批的问题？觉得正式批都得一面挂。而且今天连着面三场，我也面不动了。

• 自我介绍
• 跨域的解决办法，jsonp 的原理
• react 虚拟dom 了解吗
• 顺时针输出二维数组的题目
• 介绍一下你项目中挑战比较大的点？
• 宏任务与微任务
• 浏览器安全之类的，xss 具体要过滤哪些字段你知道吗？
• 你的职业规划？你要学后端的哪些？比如？

CSIG 二面

休息了一周，面试的感觉都大不相同了，有种放松+水平直线下降的感觉。。。。从今天开始又要好好学习了。。。

• 自我介绍
• 详细问了问我们团队是怎样的
• 软件工程的课程体系？你学的怎么样？你算法怎么样？
• 一道算法设计题：一个日志系统，记录了用户的登入登出时间，要求查找出在线人数最多的时间点。
• 你了解设计模式吗？单例模式知道吗？
  context 那啥叫状态模式。。。
• 闭包介绍一下，闭包可以解决什么问题？如何避免内存泄漏？
• 你看过什么源码吗？
• 反问（csig 腾讯云 安全产品 控制台 react）

又到腾讯 hr 面了，腾讯 hr 这次可不可以对我好一些呜呜呜
腾讯这边流程好乱，hr 没面直接流程灰掉了……

等下再记 眼睛有点累

阿里系还是一如既往会问很多东西，不过一直都觉得阿里面试官态度都挺好的。

• 项目（说两个你觉得很有挑战的）
• js 基础类型、继承类型和引用类型。
• this
• 原型链和继承
• 内存泄露！！
• 回调地狱和promise！！
• cors 怎么解决！
• https 和 tcp 三次握手，为什么要三次！
• 强缓存和协商缓存
• 401 和 403
• 浏览器事件机制
• 0.2 + 0.1
• webpack
• react 问了啥，讲着讲着忘记了。
  virtual dom 状态更新？
• 画一个扇形 css radius 怎么计算。
• 水平垂直居中
• margin 塌陷 bfc。（忘记了到底是哪些属性）
• 输入到页面呈现发生了什么（面试官：不用太详细）
• 反问
  react-》小程序。remax。

这个面试官经历和我还蛮像的，大二就接触前端，不过人家大二就实习了、安稳工作了三年(>﹏<)。我现在多么希望可以把房子租出去，面试都挂，回家摆烂。但是我想这也做不到……我只能仰卧起坐……

• 从非原理的角度，谈谈你对react和vue的看法
• bigFish / umi 。你有没有对阿里/公司内的一些轮子有深入的理解？
• react 事件机制、事件委托
• react 17 和 18 的事件机制有什么变化，react 17 和 18 有什么变化。
• react serverComponent
• 有没有什么关注的社区推出什么新技术
• 红包（数额、人数、金额随机）
• 反问
  聊的还不错，面试官说他关注 SWC、esbuild （类babel），和可以用重搭博客作为技术场景等等之类的……

• slice
  • v. 切割
  • When you slice an onion, it makes your eyes sting.
  • 给定起点和终点切割数组，原始数组不改变。
  • arr.slice([begin[, end]])
• splice
  • v. 拼接，接合（胶片等）；移接（基因）
  • He taught me to edit and splice film.
  • 像剪片子一样，可以对数组进行删除、增加、替换，数组发生变化
  • array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
• split
  • v. 分离
  • A rebel faction has split away from the main group.一帮反叛者从核心组织中分裂了出去。
  • 以某个符号为分割，有秩序的分裂，不改变字符串。
  • str.split([separator[, limit]])

一度面不下去的一场，断网3次，没有什么八股文，很多编程和广度比较大的问题，以至于期间必要要靠喝水来缓解一下，“可以让我喝口水吗”端起水杯开始喝水。

• 自我介绍
• �你的 h5 项目为什么要就近推荐？学校的人不是知道哪个食堂离自己近吗？你们团队的定位是怎样的？你们开发产品的出发点是怎样的？你们产品经理的角色是怎样的？
• react 与 原生 js 比较一下？你觉得 react 替我们做了什么事？
• 一道编程题

// 要求实现点击 li console.log('1/2/3/4')
// 用原生和 react 分别实现一下
// 如果是 li 节点是可动态增删的，要怎样事件绑定？他说是 ul 处 target xxx 就能适应动态了。 
<ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
</ul>

• 由上题引发出的问题？为什么必须要有 key 值？
• 一道编程题

// 要求三个函数同步执行，执行的结果存入数组。
let res = []
function a(){}
function b(){}
function c(){}

• 一道编程题，你平常是怎么网络请求的？写一写？那个 fetch 是怎么封装的？
• ajax 和 fecth 的区别？如果我对 ajax 用 promise 封装一下的话？那它们还有什么差别？
• 讲一讲你做的比较难的组件？如果你把整个中英文本的 object 对象全部传入的话？那它不是每次的参数都有一堆不需要的值？它需要的只有对象里的某一个？那它不是要每次状态变化的时候 render 一遍？为什么不按需传入？（怎么按需传入？？？现场思考一下按需传入怎么搞吗？还是追问你的按需传入是什么意思）
• 由上一题引出的？你知道 react 有什么优化的方式吗？React.Memo 是怎么工作的？（答到这里，整个人脑子都不好使了，没有完整的讲，直接省略成了 react.memo 让我可以进行正确的相等性比较而不是引用比较)
• 你平常是怎么学习前端的？
• 反问

• 自我介绍
• 你们团队多少人？你们专业多少人？什么是学工积极分子？你们学院学前端的人多吗？学后端的呢？
• 如果学弟学妹问你如何入门前端，你怎么说？自己有没有模范过某个网站的静态页面？css 的命名 你是驼峰还是下划线？
• 介绍一下 css 的盒模型
• 如何理解 http 的无状态？
• 说一说 http 的 header 字段有哪些？
• 在已知 a 节点的情况下，把 b 节点加到 a 节点之后怎么做？
• 介绍一下闭包？闭包的具体应用场景？内存泄漏如何监控？
• 为什么选用 Taro ？Taro 是怎么实现跨端的？
• 木犀课栈的登陆状态怎么销毁？没有存 cookie 吗？
• react diff 了解吗？
• react 状态管理了解哪些？如果要用 redux 写一个列表渲染怎么写？
• 你的测评是自己认真写的吗？
• 2-3年内的职业规划？
• webpack 的 loader 和 plugin 的理解？

这一面时间比较短 20分钟

• 自我介绍
• 讲一讲你觉得最难的一个项目，它的难点？
• 在项目中是怎么学习的？（还是是怎么学前端的？）
• react 的函数组件和类组件
• react 的事件处理机制
• 以后的计划，是考研还是工作？作出这样选择的原因？

为了省issue，我把蚂蚁金服-数字金融线的面试放这了，问了比较多，我只写些我没答上的吧
一面

• 进程与线程
• nginx 内部的线程管理
• 操作系统 一个页面的大小 ，页面存储方式
• 数据库 建立索引后，查找加快，那个key 是怎么存储的（B+树）
• http 和 https

二面

• 自我介绍
• 介绍项目难点
• 介绍一下 Taro 以及 Taro 的优缺点
• 你有没有遇到兼容性的问题？（讲糊了。。。被问要做一个页面上视频播放的功能，要在哪一层兼容。。。）
• http 和 https。说几个非对称密钥加密算法。
• tcp 和 udp
• 由 前序+中序 建树的算法（口述算法，没口述好。。。）
• 你以后的规划？
• 你意向在哪个城市实习？
• 反问

virtual dom 和 key 值

参考链接

• daily-interview-question
• react-doc-reconciliation
• how-exactly-is-reacts-virtual-dom-faster

virtual dom

尤大大的那篇回答讲的真好！不过我第三点倒是没怎么懂。以我看懂的大概来来说，用原生js写的话，各种 dom 操作会很复杂，参见网上的 demo。所以前端就要开发出一套框架来，可以更快捷编写前端页面。

至于框架的各种设计原则，我还不能理解，但是无论是何种框架，必然涉及到数据或者说UI更新的时候渲染问题。pure js 的数据和UI的更新思路是获取到目标节点，将新创建的节点 append 上去。如果框架使用最简单的更新方式可以是获取 body 元素，将所有新生成的节点作为 innerHTML，重新构建 dom 树，造成整个页面 rerender。

如果每次小的变动都重构 dom 树，比如一个 span 的文本发生变化，就把原先的 dom 树销毁，会对性能造成很大的影响。所以为了优化，react 引入了一层 virtual dom 的比较，获取到变动的节点，仅做必要的更新（具体过程暂时不懂，之后做补充），但 diff 算法是用 js 执行，所以有一句话是说“用 js 的计算换取 dom 树性能消耗”（可以参看浏览器的渲染过程思考这个问题）。总结一下，virtual dom 是为了相对 innnerHTML 的那类做法做的优化，并且不同的框架会有不同的优化方式，就是回答里的第三点。

key

首先 key 值需要是一个 stable 的值，如果理解这个 stable 呢？参考这两个 demo1、demo2,前者用 index 做为 key 值，对于不同的 todo，key 值不是（仅）与其自身相关的，而是一个 index，是一个不稳定的 key 。每次的列表渲染前后，key 值列表都是一样的序列，对于 todo 中的 id, createdAt 值是来自参数，所以即使 key 值不变，在进一层比较后，会更新文本节点，而不会销毁重建，一定程度上实现了节点复用；但对于 input 来说，进一层比较后发现和之前一模一样，直接完整的节点复用了，造成了错误。而后者，key 是来自 todo 中的 id，每次的列表渲染 input 不会错误。并且如果不写 key 值，react 会默认使用 index 作为 key。

其次，key 值是起到了性能优化的作用，关于如何起作用的，待我看过 diff 过程再来补。具体的 diff 过程仍旧不明白，不过看官网那篇 reconciliation 文字，大概意思是说，在加了 key 值后，列表元素经过重排后，通过新旧比较后，key 相同的话，节点会通过移动复用，而不会销毁重建。

diff

中文的好像就只有这几篇相关的吧。blog1, blog2, blog3。看的也不是很懂，大概意思是说，react diff 只对树只进行同层级比较，不进行跨层级比较。同层级比较就是 n 个节点，比较 n 次，O(n) 和单颗树的遍历相同的复杂的。垮层级比较，一个双重循环 O(n^2)，循环内节点编辑操作（创建、删除、移动)为 1 - n 步。所以复杂度为 O(n^3)。同层级比较的基于不同类型节点有不同树结构的假设，发现同一层级类型不同，销毁这颗子树即可。

浏览器性能

参考链接

• web dev
• 页面性能

缩短白屏时长

• 通过内联 JavaScript、内联 CSS 来移除这两种类型的文件下载，这样获取到 HTML 文件之后就可以直接开始渲染流程了。
• 但并不是所有的场合都适合内联，那么还可以尽量减少文件大小，比如通过 webpack 等工具移除一些不必要的注释，并压缩 JavaScript 文件。
• 还可以将一些不需要在解析 HTML 阶段使用的 JavaScript 标记上 async 或者 defer。
• 对于大的 CSS 文件，可以通过媒体查询属性，将其拆分为多个不同用途的 CSS 文件，这样只有在特定的场景下才会加载特定的 CSS 文件。<link media="orientation:landscape" />

性能分析

图片优化

• 使用适合的图片格式，如图标类的使用 vector graphics （如 svg）；复杂的图片选择 raster graphics （如png、jpeg）。
• 使用插件将图片压缩（如 mozjpeg）
• image CDNs

图片懒加载

• 设置 img 的 loading lazy 属性。
• 作为 background-image url。在构建 render-tree 的时候，浏览器检测到该样式不应用于当下时（eg: hover)，不会请求该资源。

• pureComponent
• shallow comparition
• compare in javascript
  ？？？

• 自我介绍
• 项目中的那一部分对你来说比较难？
• 你用过哪些 es6 语法？
• 介绍一下箭头函数？最内层的 this 捕获那一层的？箭头函数的缺点？
• 介绍一下 promise？promise.all 和 promise.race 的区别？
• http 和 https 的区别？除了加密传输外还有吗？
• react 组件的消息传递？
• react 周边的用过什么？react 单向数据流，你知道是什么吗？redux 用过吗？
• http 状态码
• http 缓存？E-Tag 和 Last-Modified 区别？它们是怎么生成的？
• 一道 js 题目 写一个函数A，它接受一个函数参数B，B 可能依据参数生成随机数，也可能是无参数生成随机，调用A后返回一个函数C，函数C参数相同的返回结果总是一致的。（我又忘记了 obj key 和 value 的写法了，太说不过去了，自我反思。懒得写代码了）
• 一道 算法题 括号匹配（我没有写 map 代码丑陋）

每次卡壳或者忘记某一个点或词时候，我都会本能的快速绕过，停下来思考真的很难。要是思考了一会还不知道的话，我只会原地结冰冻结。🧊

• 自我介绍
  sdk 怎么实现的。
• cache from memory 和 cache from disk
• promise.allSettle
• xss
• 302 能被前端劫持吗
• 浏览器缓存
• vue 和 react ！！！！！！！
  （ps 和 服务端渲染 这两个是真的又大又难又重要）
• vue 2 和 vue 3
• vue 2 依赖收集的结构
• 从输入到页面呈现 （真的忘了，怎么才能拥有好的背诵能力😢）
• defer 和 async
• 页面阻塞有哪些情况
• 页面优化有哪些？哪个效率高
• 反问
  问了我的职业规划和框架偏好业务偏好。介绍了他们公司的前端团队工作内容。

• 参考链接
  • javascript info
• 代码实现

一面
（我居然还能爬起来面试？？我还活着？？主要是我以为只有半小时的）

• 自我介绍
• 用 Taro 会有什么问题？怎么解决？？Taro 跨端是怎么实现的？babel 具体的语法转换过程知道吗？
• 项目三 说一下 ESLint 和 Prettier 的理解
• 项目二 说一下难点
• 项目一 说一下难点（每次都说得乱七八糟，等我精神了，我就理一理）
• graphQL 在 Gatsby 中起了一个什么样的作用？
• react hooks 和 类组件比较一下。
• 有没有用过 webpack
• 跨域讲一下？如何防范 xsrf？
• 说一下 http 缓存。强缓存和协商缓存的区别？E-Tag 是怎么生成的？
• 比较一下 302和303（？） 。
• https 了解吗？为什么证书能做身份的验证知道吗？
• js 的值是静态的还是动态的？（那个名词忘记了），js 什么时候是动态的？

二面（因为今天面了三场，感觉这三场每两场有三个重复问题的样子，产生了一种幻灯片播放的错觉）

• 自我介绍
• 说一下哪个项目对你来说挑战比较大？
• 你什么想做前端？你为什么选择了 OI-Wiki 的项目？
• 有遇到跨域吗？jsonp 的原理
• 浏览器安全，xss 怎么对输入过滤？
• http 缓存 304？
• http 2.0 你知道吗
• JS 模块化介绍一下？
• 你了解 promise 吗？你知道 promise 的工作原理吗？promise的状态
• 除了 webpack 的打包工具外，你还知道哪些？
• 你看过哪些源码？react 源码看过吗？
• redux 了解吗
• 你的未来的规划？
• 你现在在面哪些公司？你有没有 offer ？(我还以为你是终面了呢。。）
• 跨端方案你知道哪些？比较一下 flutter 和 react native
• 你知道一些绘制渲染相关的API吗？？
• 比较一下 react 和 react native
• 数据结构与算法，常见的排序算法，快排的时间复杂度？
• 反问（问了要几面，要技术面3-4面+hr面，问了业务，是全民k歌的一些页面，他们主要是跨端之类的）

拒了三面，有一点点后悔。。。面试好累。。。
啊，hr小姐姐忘记了我拒面试了，又找我约面试了耶

三面 这场面试还挺魔幻的，不过没有通过额

• 自我介绍
• 介绍一下你项目的技术栈，react 的 mvvm 了解吗？react 的怎么做批量 dom 操作的？等等一些其它问的挺细的
• 如果你现在遇到了一个原理性问题不清楚的问题，你要怎么做去解决他？你平时真的这么做过吗？
• （上一个问题引出）现场解释一个 gernerator es6 -> es5
• （上一个问题引出）介绍一下闭包，闭包的用处
• 你平常哪个科目学的比较好？
• 一个算法设计题。场景就是用户你开机xx秒，超过了xx用户，时间复杂度，空间复杂度。
• （上一个问题引出）如何自己实现一个 vector，可以随机存储，以及链式删除。
• 据我所知，你上次拒了我的面试，为什么又想要面了？（。。。感觉这也是我被拒的原因之一，不要被面试官知道拒了面试后又去面试哈，感觉结果还是会受影响的。。。）
• 你现在面试感觉咋样？（？？？）
• 反问，问了跨端。。。当时不知道问什么好，这个问题问的很 low。。。

• 参考链接
  • KCD Blog: usememo-and-usecallbac
  • overreacted: how-are-function-components-different-from-classes
• 什么时候使用 useMemo 和 useCallback
  • 两者差别
    useCallback 局限于函数类型，useMemo 可用于各种类型 如组件、数组。
  • 为什么要优化
    js 的引用比较机制，导致是同一个函数都会被认为不同的函数，垃圾收集后重新分配是没有必要的。
  • 性能优化的代价
    由于使用了 useCallback 这本身就是个函数，需要额外的空间，并且由于依赖的收集，形成的闭包也有内存消耗，并且由于闭包，不会垃圾回收，然而新建还会进行。
  • 昂贵的计算才去使用这两个 hook
  • React.Memo 高阶组件，props 前后相同，渲染复用
• 函数组件和类组件的区别
  没太懂啊 先用简单的话糊弄，hooks 可以在不适用 class 的情况下 使用 state 。至于hooks 和 class 的性能区别，是不确定的，只不是它们意味这两种编程规范。
  好，我懂了一些。先前的 react class 组件，render 函数的 state/props 是依赖于 this 指向的，如果我们设置了一个定时器，定时器内显示一个 props name，在定时时间内修改这个 name，最后显示出来的 name 是最新的，而不是我们当时生成定时器的 name 值，这造成了错误。
  改进 class 组件的这个 bug，可以 const {user} = this.props; setTimeout(() => this.showMessage(user), 3000);捕获当时 props，不随 this 动态更改。更一致的做法，是在 render 函数内 const props = this.props 来捕获当前的 props 。函数组件不会产生 class 组件的这个 bug，也是由于在 render 函数内捕获当前 props 的原因，保持 UI 与 数据一致。

selectors reference

combinators

• > .parent > .child 子节点
• + p + h2 相邻兄弟节点
• ~ li.active ~ li 普通的兄弟节点

pseudo-class selectors

• :first-child .media:first-child 代表具有 media 类名的第一个元素

pseudo-element selectors

• ::after with ::after you can insert an element into the DOM at the end of container

float

max-width

.container {
  // max-width 意味着如果屏幕的宽度小于1080，则 container 的宽度和屏幕一致；否则 container 的宽度固定在1080px
  max-width: 1080px;
  margin: 0 auto;
}

理解浮动

float CSS属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。

清除浮动

left: 元素被向下移动用于清除之前的左浮动。

• 方式一

<main class='main'>
  ...
  <div style='clear:both'></div>
<main>

• 方式二

<main class = 'clearfix'>
   <div class='media'></div>
   ...
   <div class='media'></div>
</main>

.clearfix::after{
    display: block;  // 块级元素
    content: " ";
    clear: both;
}
/* prevent margin collapse */
/* with ::after you can insert an element into the DOM at the end of container */
.clearfix::before,
.clearfix::after{
    display: table;
    content: " ";
}
.clearfix::after{
    clear: both;
}

the way to center

水平居中

• 行内元素居中 text-align: center;
• 单个块级元素居中 width: 100px; margin: 0 auto;
• 多个块级元素居中
  • display: flex; justify-content: center;
  • text-align: center;// 父级 display: inline-block

垂直居中

• 单行文本 height: 100px; line-height: 100px
• 多行文本
  • display: table; display: table-cell; vertical-align: middle
  • <table> <tr><td>multiline text</td></tr> </table>
• 单个块级元素
  • display: flex; align-items: center;
  • 其它
• 多个块级元素
  • display: flex; flex-direction: column; // 与row 相对 justify-content: center;
  • 其它

百度 北京 一面与二面

一面

• 自我介绍
• 移动端 css 的适配？根据手机屏幕的大小如何做？
  用相对单位。但根节点的 foot-size 的设置，不是很确定，等下去看看。
• 垂直局中怎么做？
• 闭包介绍一下？内存泄漏知道吗？如何解决？
• 浏览器存储有哪些？
• 说一下任务队列与事件循环？
• 对同步与异步的理解？Ajax 请求是异步的吗？
• 从输入 url 到页面呈现发生了什么？
• 浏览器的多进程架构，有那些进程？
• 深拷贝与浅拷贝知道吗？（口述）如何实现深拷贝？如何保持深拷贝后原型链的继承？
• new 的内部实现？如果 new fun 是有返回值的呢？除了 new 外有什么修改影响 this 指向的？
• bind 与 apply、call 的区别。
• 跨域的解决？详细介绍其中一种？ cors 对于 get 和 post 的处理是一样的吗？
• 一道算法 easy 难度
• 反问

二面

• 自我介绍
• 搜索后高亮你是怎么做的？npm 包他的实现是怎样的？
• 美食 h5 的搜索有提示框吗？历史记录是怎么做的？
• 组件抽取中，那个组件的实现最难？轮播图组件做过吗？
• 如何实现（双栏）的瀑布流布局？
  她说纯 css 是不能实现的，是用 js 网络请求 image 图片，然后计算高度，渲染。纯 css 真的不行吗？等下看看。
• 如何实现等高的三栏布局？
• 两道算法
• 介绍一下重绘和重排以及那些情况会触发重绘和重排？height 变化会？
• 反问

• 自我介绍
  怎么学前端？那个项目对自己最难？那个项目自己贡献最大？

• 说一下从输入url到生成页面发生了什么？
  后来反问得到反馈他说，说的粒度太大，不是很详细，说之后可以看的更详细一些。

• 说一说 http 缓存

• 说一下跨域, 跨域的解决方式？除了 jsonp cors 反向代理还有吗？
  刚查了一下，还有 window.postMessage 和 domain.name + iframe 等等。

• 说一下 get 和 post 的区别
  安全性，url 和 head。数据操作上一个是查询一个是更改或新建。后来他说 get post 除了安全性外还有数据量大小的问题。

• 浏览器一些新特性？web Worker 知道吗？后来他说 web work 可以用作一些代理请求

• 如果老板打开一个你写的项目，但是打开的很慢？你如何分析？
  资源加载的优化，css的优化，他又问如果自己的 chrome 上打开很快，老板的手机就是很慢？怎么分析，怎么优化？我固执的说是网络资源加载太慢还有浏览器的渲染层不一样。他说问的可能有些发散，回到 JS。

• JS 规范的发展方向？
  ES6 新语法，说了一些，不知道怎么回。

• 项目中为什么要使用 TypeScript？关于 TypeScript 为什么能做类型检查？它的底层了解过吗？

• 如何看待 GraphQL？项目中有做后端上的 GraphQL 的工作吗？

• 用 taro 的时候，有没有对它做过性能分析？因为它作为一个跨端应用？

• 前端工程化：webpack 和 babel 了解吗? webpack 的作用？
  webpack 动态资源加载，避免引用顺序上的 error 。webpack 可以删除注释等压缩代码的体积。webpack 可以提前整合资源，节约渲染的时候时间消耗（感觉我在瞎说）。

• 平时算法与数据结构有学习吗？刷题吗？

• 平常会花多久的时间学习前端？

• 有什么兴趣爱好

• 自己有什么特点？

• 做过什么社会实践

• 做过最大胆的一件事是什么

• 有什么长期坚持的一件事吗？或说兴趣爱好

• 最近有和什么人发生矛盾并和好吗？

• 毕业后的前端规划？3年内，5年内

• 反问 实习生的日常工作，对实习生的期待，我有什么需要补足的基础（ 原生 node 操作，以其其它补在问题后面）

• HTTP/1

  • TCP 连接限制。浏览器对于同一域名只允许最多 6 个 TCP 持久连接。
  • 队头阻塞。TCP 通道中某个请求由于某些原因没有及时返回时，会阻塞后面的请求。

• HTTP/2

  • 多路复用机制（二进制分帧层）

• HTTP/3

  • IP、TCP、TLS/SSL -> IP、UDP、QUIC

• TCP 三次握手
  发送端发送带有 SYN 标志的数据包给对方。对方接收到后，回送一个带有 SYN 和 ACK 标志的数据包以示传达确认信息。最后发送端再发送一个带有 ACK 标志的数据包，代表握手结束。

• TCP 四次挥手
  客户端（假如客户端发起）发送带有 FIN 标志的数据给对方。服务端接受后，回送带有 ACK 的数据包表示确认并同意断开。服务端发送带有 FIN 标志的数据包给客户端，请求关闭连接。客户端发送 ACK 已示确认。（服务端收到后关闭连接，客户端 2SML 没收到回复，关闭连接）

设备测试的时候录了一下声音，发现自己有气无力，面试过程中尽量调整一下语气吧233。好像是一场很摆烂的面试😮‍💨，面试官看着我喝水好像露出了诧异的表情2333，我是真的累啊😭。

• 项目
  哪些走本地哪些走服务端，有哪些考虑方面
• 性能测试
  performance api
• react ssr
• useCallback 和 useMemo
• 代码：redux combine。 是不是有其它坑？
• 反问
  （当时卡了一下（当时没想到婉转的说法），其实我是想问的是，怎么设计面试问题的，以及面试考察标准。）

• 自我介绍
• 做项目算做的比较早的，为什么想要那么早做项目？
• 学校修了哪些课程？哪些课程对你帮助比较大？
• 你是软件工程专业的，在你们专业内工程化的方面会讲吗？
• 你觉得哪个项目对你的提升最大？谈一谈你最近的那个项目，他给你的提升是知识掌握上的还是 react 深度上的？
• 有没有项目回顾的习惯？有没有做过一些功能之外的工作，比如让这个项目可交付性增强或者做一些性能上的检测？有什么性能监测工具？
  接下来是一些计算机网络、安全、一个小的案例分析的考察
• IP 层的工作
• 我用我家的电脑发一个消息到你电脑上，这个消息是怎么到达的？
  之后你可以去问问你们老师这个问题。。
• TCP 与 HTTP 的关系。TCP 层做的是什么？HTTP 层做的是什么？
• 你做的项目肯定有登陆相关的，如何防止密码和账号被窃取以及窃取后的安全保障措施？
• utf-8 1000w 的字符集，查找第一对相同的字符。1，最坏情况下他的内存消耗，算出具体值和单位。2，如果要优化，怎么优化，以及优化后能降低一个数量级吗？
• 你的职业规划 2-3年的。
  广度、深度 or 产品上发展？
• 反问
  面试官提到当自己要把这个产品交付出去的时候，希望它是经过一系列措施来保障它是没有 bug 的，而不是有 bug 很正常的一种心态，归结为自己做的东西要是能拿的出手的。听了后还挺有感触的，感觉自己过去不够负责任。。。自我反思。

hr面 也一并放这吧，hr面被挂了。。只记了一些
1、你在前端岗位有什么优势？说几点
2、你的性格特点别人的评价以及自我的认知？和兴趣爱好
3、前端的职业规划
4、你为工作所做的努力 三点？