面试

准备篇

算法：完整地精读《剑指Offer》，对里面的60+道题尝试复现，笔记记录技巧并尝试举一反三；9-10月集中刷 leetcode 140+道，按照力扣网站上的“探索”模块刷题效率更高；
专业技术：从 CSS、 JS 语法、HTTP 基础、三大框架、浏览器原理和前端安全等几个大方向去列复习提纲or脑图，系统地、有时间规划地复习记忆性的知识点，同时尝试将知识点与工作中的实际业务联系起来，在这个过程里你会发现除了巩固自己的知识点，还能建立个人的知识图谱，对自己的整体水平有更加清晰的了解，从而更有针对性地查漏补缺；
思考总结：除了基础技术知识的掌握，候选人的综合能力也是面试考察的重点。在“大前端”思维下，我们需要考虑：前端性能优化、Node.js 工具链、异常监控和部署打包等问题；在综合软技能上，我们需要提前总结以下几点：对业务系统的理解、研发流程的推进、开发难题的攻关和团队协作的实践等。

3 JS

ES6新的特性
介绍Promise
Promise有几个状态
说一下闭包

手动实现一个bind方法

介绍下Promise,以及它的使用场景，内部原理？
..call,.apply,.bind的作用，区别?
对象原型上的方法
- hasOwnProperty
- isPrototypeOf
- toString

5 React

React的生命周期

挂载阶段

constructor

render

componentDidMount

更新阶段

shouldComponentUpdate(nextProps, nextState)：利用此生命周期优化 React 程序性能

componentDidUpdate(prevProps, prevState, snapshot)

方法在getSnapshotBeforeUpdate方法之后被调用，有三个参数prevProps，prevState，snapshot，表示之前的props，之前的state，和snapshot。第三个参数是getSnapshotBeforeUpdate返回的,如果触发某些回调函数时需要用到 DOM 元素的状态，则将对比或计算的过程迁移至 getSnapshotBeforeUpdate，然后在 componentDidUpdate 中统一触发回调或更新状态。

卸载阶段

componentWillUnmount

componentWillReceiveProps 的触发条件是什么

好像要被废弃了

props change 会触发，这里更新 setState 是安全的，不会触发额外的 render

React16.3 对生命周期的改变

+: 新增  -: 删除  ?: 有变化

- componentWillMount
  render
  componentDidMount
- componentWillReceiveProps
+ static getDerivedStateFromProps
  shouldComponentUpdate
- componentWillUpdate
+ getSnapshotBeforeUpdate
? componentDidUpdate
  componentWillUnmount

现在最新版本 16.13.1

去掉了三个生命周期

willMount
willReceiveProps
willUpdate

新增了 2个

static getDerivedStateFromProps(nextProps, prevState)
- 不能访问 this
- 每次接收新的props之后都会返回一个对象作为新的state，返回null则说明不需要更新state
- 组件每次被rerender的时候
- 在组件实例化或接收到新的 props 时被触发
- updating state based on props
- 当我们接收到新的属性想去修改我们state
getSnapshotBeforeUpdate(prevProps, prevState)
- update 发生的时候，render 之后，dom 渲染之前
- 返回一个值，作为componentDidUpdate的第三个参数
- 这个方法在render之后，componentDidUpdate之前调用
- 此生命周期必须与componentDidUpdate搭配使用

介绍下React的 Filber 架构

React 15 的问题

大量的同步计算任务阻塞了浏览器的 UI 渲染

解决主线程长时间被 JS 运算占用这一问题的基本思路，是将运算切割为多个步骤，分批完成。也就是说在完成一部分任务之后，再将控制权交回给浏览器，让浏览器有时间进行页面的渲染。等浏览器忙完之后，再继续之前未完成的任务。

React Fiber 是一种基于浏览器的单线程调度算法.

Fiber 实现了自己的组件调用栈

在 React Fiber 中使用新的异步渲染……

异步渲染模式就是不阻塞当前线程，继续跑

大量的同步计算任务阻塞了浏览器的 UI 渲染

react 团队为了解决这个问题，提出了 Fiber reconciliation 的方案来代替之前的 Stack reconciliation。Fiber 相较于 Stack，采用了异步的方式将之前同步执行的计算过程做拆分，使得主线程不会一直处于被占用的状态，可以有时间去处理其他任务，比如 I/O 操作，交互反馈等。

画Filber渲染树
介绍React高阶组件(什么是高阶组件(HOC))

本身其实不是组件，而是一个函数，这个函数接收一个元组件作为参数，然后返回一个新的增强组件，高阶组件的出现本身也是为了逻辑复用

React如何进行组件/逻辑复用?
高阶组件: 属性代理反向继承渲染属性 react-hooks

父子组件之间如何通信
父组件向子组件通讯: 父组件可以向子组件通过传 props 的方式，向子组件进行通讯子组件向父组件通讯: props+回调的方式,父组件向子组件传递props进行通讯，此props为作用域为父组件自身的函数，子组件调用该函数，将子组件想要传递的信息，作为参数，传递到父组件的作用域中兄弟组件通信: 找到这两个兄弟节点共同的父节点,结合上面两种方式由父节点转发信息进行通信跨层级通信: Context设计目的是为了共享那些对于一个组件树而言是“全局”的数据，例如当前认证的用户、主题或首选语言,对于跨越多层的全局数据通过Context通信再适合不过发布订阅模式: 发布者发布事件，订阅者监听事件并做出反应,我们可以通过引入event模块进行通信全局状态管理工具: 借助Redux或者Mobx等全局状态管理工具进行通信,这种工具会维护一个全局状态中心Store,并根据不同的事件产生新的状态
Redux怎么实现属性传递，介绍下原理
React-Router版本号

hoc、render props、react-hooks的优劣如何？
- hoc
  - 不会影响内层组件的状态，降低耦合度
  - props 会被覆盖
- render props
  - 缺点：嵌套地狱
- hooks
  - 直观、容易理解
  - 学习成本高

function withSubscription(WrappedComponent, selectData) {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        data: selectData(DataSource, props)
      };
    }
    // 一些通用的逻辑处理
    render() {
      // ... 并使用新数据渲染被包装的组件!
      return <WrappedComponent data={this.state.data} {...this.props} />;
    }
  };
}

class Mouse extends React.Component {
  constructor(props) {
    super(props);
    this.state = { x: 0, y: 0 };
  }

  render() {
    return (
      <div style={{ height: '100%' }}>
        // 使用 render props 属性来确定要渲染的内容
        {this.props.render(this.state)}
      </div>
    );
  }
}

// 调用方式:
<Mouse render={mouse => (
  <p>鼠标的位置是 {mouse.x}，{mouse.y}</p>
)}/>

说说对React Hooks的理解
React Hooks当中的useEffect是如何区分生命周期钩子的
React实现的移动应用中，如果出现卡顿，有哪些可以考虑的优化方案

(1) 增加 shouldComponentUpdate 钩子对新旧 props进行比较，如果值相同则阻止更新，避免不必要的渲染，或者使用 PureReactComponent替代 Component，其内部已经封装了 shouldComponentUpdate的浅比较逻辑； (2) 对于列表或其他结构相同的节点，为其中的每一项增加唯一 key属性，以方便React的 diff算法中对该节点的复用，减少节点的创建和删除操作； (3) render函数中减少类似 onClick={()=>{doSomething()}}的写法，每次调用 render函数时均会创建一个新的函数，即使内容没有发生任何变化，也会导致节点没必要的重渲染，建议将函数保存在组件的成员对象中，这样只会创建一次； (4) 组件的 props如果需要经过一系列运算后才能拿到最终结果，则可以考虑使用 reselect库对结果进行缓存，如果 props值未发生变化，则结果直接从缓存中拿，避免高昂的运算代价； (5) webpack-bundle-analyzer分析当前页面的依赖包，是否存在不合理性，如果存在，找到优化点并进行优化。

6 Vue

双向绑定怎么实现的？

define.property proxy 脏检查机制

Proxy 比 defineproperty 优劣对比?
- 数据劫持
  - Vue 运用数据劫持 + 发布订阅,直接可以通知变化并驱动视图
  - 利用 Object.defineProperty 劫持对象的访问器,在属性值发生变化时我们可以获取变化,从而进行进一步操作
  - 在属性发生变化后通知订阅者
  - 解析器 Compile 解析模板中的 Directive(指令)，收集指令所依赖的方法和数据,等待数据变化然后进行渲染
  - Watcher 属于Observer 和Compile 桥梁,它将接收到的Observer产生的数据变化,并根据 Compile 提供的指令进行视图渲染,使得数据变化促使视图变化
  - Proxy 是 Object.defineProperty 的全方位加强版
    - Proxy可以直接监听数组的变化
      - defineProperty, 对数组进行操作(push、shift、splice等)时,无法监控
      - Proxy不需要那么多hack

7 网络

网站SEO怎么处理
介绍下HTTP状态码
403、301、302是什么
缓存相关的HTTP请求头
介绍HTTPS
HTTPS怎么建立安全通道
前后端通信使用什么方案
RESTful常用的Method
介绍下跨域
Access-Control-Allow-Origin在服务端哪里配置
csrf跨站攻击怎么解决
前端和后端怎么联调

8 性能

前端性能优化（JS原生和React）
用户体验做过什么优化
对PWA有什么了解

9 webpack

10 安全

对PWA有什么了解
对安全有什么了解
介绍下数字签名的原理

11 Web

前端路由
- hash
  - 监听 hashChange
- history
  - popstate 事件
  - history.pushState

题

题 1

css兼容性有哪几种处理方案，
css3新属性有哪些
怎么理解margin越界的问题
js的继承方式有哪些
深拷贝怎么实现
js的事件轮训机制有了解吗
说说call,apply,bind
聊聊es6的promise
为什么要用async，await
vue生命周期
vue双向数据绑定原理
vue的异步更新，以及nexttick
vue路由有哪几种方式，是如何实现的,以及注意事项
vuex的使用，及其原理
http与https的区别
从输入URL到页面展示发生了什么
redux的原理
项目中遇到过什么问题
有没有封装过组件，插件
webpack怎么进行打包的
项目中是怎么优化的
xss怎么处理的
基本上就这么多技术性的的问题，你们觉得难吗（是不是很简单，大佬见了都不信哈哈，），答案我就不写了，
然后就开始问我是如何管理前端组的
任务是如何分配
项目是怎么样协同开发的
如何兼顾产品经理和前端负责人的工作以及时间安排
你是怎么样担任产品经理的角色的

题2

二叉树路径总和（leetcode 112) 宇宙条
function 组件和 class 组件
- function就是无状态组件
  - 不会被实例化，整体渲染性能有提升
  - 适合做纯展示型组件
  - 不能访问 this 对象
  - 无法访问生命周期
  - 只能输入 Props
  - 没有副作用
为什么Vue中组件的data返回一个函数？
- 组件会被实例化很多次，如果是plain object，就会引用同一个地址
- 一个实例的 data 修改了会影响到另一个实例，使用函数的话，每个实例会维护一份被返回对象的独立拷贝
介绍一下 Vue 计算属性，和 data、methods、watch 的异同
- computed声明的属性，可以被模板调用
- watch 会监听一个响应式属性的变化，可以做一些事情
- data 函数返回一个包含响应式属性的对象
- methods 事件监听函数
CSS权重规则？
数组去重
- 有 5 种办法
  - 双层 for 循环
    - 对象和 NaN 不去重
    - 复杂度 O(n ^ 2)
  - Array.sort() 加一行遍历冒泡
    - 对象和 NaN 不去重
    - 数字 1 不去重
  - Array.filter() 加 indexOf
    - 对象不去重
    - NaN 会被忽略
  - Object 键值对去重
    - 全部去重
  - ES6 中的 Set 去重
    - 对象不去重
    - NaN 不去重
- lodash 的去重
  - 和使用 Set 去重的结果一致
  - 当数组长度大于等于 200 时，会创建 Set并将 Set 转换为数组来进行去重
  - 当数组长度小于 200 时，会使用类似前面提到的双重循环的去重方案，另外还会做 NaN 的去重

题3

1 如何实现文件上传的功能
2 知道xss吗，介绍一下，如何避免
3 HTTP1 SPDY HTTP2的对比
4 react是如何实现数据绑定的
5 什么情况不应该用箭头函数
6 你是如何理解HTML语义化的
7 浏览器如何渲染页面的
8 数据结构学过什么
9 网络安全xss，csfr是什么，怎么样解决安全
10 用户页面打开很慢，有哪些优化方式
11 二叉搜索树的原理
12 对JS单线程的理解
13 HTTP/2有什么新特性
14 如何反转链表
15 前端防连击throttle和debounce
16 HTTP缓存
17 HTTP1.1中Etg和f-None-Match哪个权重比较大
- Etag就像一个指纹，资源变化都会导致ETag变化，跟最后修改时间没有关系，ETag可以保证每一个资源是唯一的
- ETag的优先级比Last-Modified更高
- If-None-Match 和 If-Modified-Since
18 TCP和UDP的区别
19 vue diff算法
20 reflow和repaint
21 URL长度限制
22 vue的props和slot的使用，区别
23 MVVM实现原理
24 如何实现订阅者发者模式
25 vue的双向绑定原理
26 cookie和session的区别
27 数据结构有哪些，红黑树和二叉树的区别，二叉搜索树与二叉平衡树
28 七层网络协议，每层干嘛的
29 tcp三次握手，四次挥手
30 函数式编程-柯里化
31 了解webpack如何打包吗
32 闭包的作用理解，以及那些地方用过闭包，以及闭包的缺点，如何实现闭包
33 正则实现千分位
- (number + '').replace(/(\d)(?=(\d{3})+$)/g, '$1,')
34 BFC
35 css性能优化，就动画效果，如何从js，cs角度减少回流？
36 如何有一个很多的列表，像头条的新闻列表，用户看得多了，列表越来越大，怎么样处理，思考一下
37 如何判断是否为数组？（instanceOf和constructor可以，但是有原型链断裂的风险，Object.toString.call()最稳定）
38 手写一个快速排序
39 手写一下深拷贝，答案提示：JSON.parse(JSON.stringify(obj)) 用JSON实现深拷贝
40 js的this理解，如何改变this的指向
41 数组去重
42 css实现自适应正方形
- 有用vw
- 用padding百分比撑开容器但是max-height会失效
- 用伪元素垂直方向的padding，为啥不用margin margin有塌陷需要触发BFC

面经

金三银四魔都两年半前端面经

老码农的字节跳动前端面试总结

先笔试

利用html css 编写样式，div垂直body居中、div内的text垂直居中，div高度等于body宽度的一半（第一题就难住我了，充分暴露了我css功底极差的问题，跪，但终究还是写了点）
第二题判断if([] == false) {} , if({} == false) {} , if([]) {} 不会，跪（最后一面小哥给我讲下，人不错，good）
利用宏任务，微任务的知识点判断程序输出（easy ok)
bind函数实现(ok)
throttle函数实现（ok，可以用任务队列也可以只维护一个function，我用的队列）
给定一个不含重复数字的数组arr,指定个数n,目标和sum,判断是否含有由n个不同数字相加得到sum的情况（ok, leetcode 40 变种，数字不得重复使用）

以上大概用了三十分钟，之后开始一面

一面

来的是个小哥，年纪比较小，无形中给我一种挫败感，看题速度极快，之后继续出题：

二叉树路径总和（leetcode 112)
function request(urls, maxNumber, callback) 要求编写函数实现，根据urls数组内的url地址进行并发网络请求，最大并发数maxNumber,当所有请求完毕后调用callback函数(已知请求网络的方法可以使用fetch api)

写代码不怕，最短时间给出程序，相互讨论下，至此一面结束，赞

二面

问：介绍下项目前端架构、项目难点答：简单介绍下，面试官很感兴趣，讲了大概有三十分钟

问：react如何进行性能优化答：function component + redux、immutable、pure component , shouldComponentUpdate ...

问：https握手机制答：不太懂

https握手机制，先建立tcp连接，主要是三次握手，具体细节我也忘了，主要是互发ack包跟syn包，确认连接，建立通信，https则是在http基础上建立ssh加密层，主要是公私钥非对称加密，tcp连解建立以后浏览器与服务器相互交换公钥，同时浏览器会检验服务端的证书是否合法。确认完毕，双方传输，对传输内容使用公钥加密，并接受内容使用私钥解密

问：CDN原理答：cache、负载均衡、资源同步

问：CDN获取最近节点资源的算法是什么答：不懂

问：requestAnimationFrame 和setTimeout 、setInterval的关系答：都可以用作动画 requestAnimationFrame还可以埋点监测应用卡顿

requestAnimationFrame 和setTimeout 、setInterval的关系，答案是没有关系，前者是浏览器帧渲染的钩子函数，一般不渲染不触发，做动画比较合适因为这个函数在每帧渲染的开始与上一帧结束的时候触发，能最大限度的利用浏览器的渲染流程，至于网上有人说的调用时间比较准确其实不对的，一个渲染帧也是有时间间隔的，根据task的不同每个渲染帧的时间都不同也就ftp都不太一样，requestAnimationFrame同样会延时，后者是浏览器的定时任务，用来定时在浏览器event loop中追加macro task，如果前面的任务运行时太长，会出现延后的情况

问：react fiber 了解多少答：Vritual DOM & FiberNode 利用调度器分批次在不同的tick内渲染 (答的不好)

问：你以前做过性能优化方面的开发，介绍下答：通过探针抓取performance数据，判断资源请求、白屏、首屏时间、页面卡顿，以及编写代码抓取页面错误、慢加载、代理用户事件进行行为分析等等。

问：sum(100, 200)(300)(...)...(...)() curring化实现答：写代码，简单

等等还有很多，知识点非常全面，充分暴露了我这个老码农只会搬砖，网络知识一窍不通、框架深度不够的弱点。

二面结束已经5点，面试官说回头HR会有安排（100%没戏了）

整体看，笔试题偏向基础，不难，只要工作中活学活用lodash，通过笔试没问题

但非笔试部分比较难，考察面试者的表达能力，能否通过简单的描述让面试官了解你的工作，以及工作中遇到的问题等等。

码农不仅要会写代码，在框架、网络、算法上也应该深入学习。

总体收获颇丰，虽然面试第二天就收到了拒信，但并不意外，这点字节HR做的不错。

面试失败肯定是能力不足，这点没有任何疑问。

LiuL0703 面试总结

面试总结

回顾一下二月到三月之间经历的面试，分别面了百度快手美团滴滴阿里妈妈头条 shopee(新加坡) 如下会列出面试过程中问的比较多的一些问题，希望可以帮到有需要的同学，如果都可以答上来，那么前两面应该差不多了三四面就看运气了。

⭐️ 个数用来表示频次

HTML CSS

H5新增的标签 ⭐️⭐️
flex布局 flex : 1 ⭐️⭐️⭐️⭐️⭐️ flex 默认值 0 1 auto auto 尺寸根据自身宽高属性进行调整 1 个无单位数当做flex-grow = 1 1 个宽度值当做flex-basis 的值
position ⭐️⭐️⭐️⭐️
水平垂直居中 ⭐️⭐️⭐️⭐️
左边固定右边自适应 ⭐️⭐️⭐️⭐️
- 左边绝对定位，右边 margin-left
- 左边 float 右边 margin-left (block 块级盒子宽度自适应填满)
- 左边 flex: 0 0 100px 右边 flex 1 1 auto
- float + BFC 右侧盒子不会与浮动的元素重叠
- grid

三栏布局
- 通过 flex
  - 中间元素先渲染
  - 利用 flex的 order 属性 -1 在前面
- 绝对定位
  - 中间元素在 DOM 前面，设置左右 margin
  - 两侧绝对定位
  - 中间元素可以先加载
- 浮动
  - 双飞翼
    - 利用负 margin
  - 圣杯
- 利用 BFC
  - 中间元素无法先加载

动画 animation ⭐️
盒模型 ⭐️
rem, em, vh 等 ⭐️⭐️⭐️
- rem 单位相对于一个根字体尺寸的倍数
- 让根字体尺寸等于屏幕宽度的 1/100 + 'px'，onresize 事件
BFC IFC ⭐️⭐️
- 块格式化上下文生成块级盒子的区域
- BFC 在页面中是独立的容器，内部元素与外部元素互不影响
- 不会与旁边的 float box 发送重叠
- 技术 BFC 高度，float 元素也会参与计算
- 如何生成BFC
  - overflow: hidden/auto/scroll
  - postion absolute/fixed
  - display: flex/inline-block
  - float 不为 none
- 应用
  - 浮动元素导致父元素高度塌陷
  - 自适应布局
  - 外边距垂直方向重合
0.5 px 竖线怎么实现？

JavaScript

基本数据类型和判断方法 ⭐️⭐️⭐️
typeof 和 instanceof ⭐️⭐️⭐️
null 和undefined ⭐️⭐️⭐️
hoisting ⭐️⭐️⭐️⭐️⭐️
scope ⭐️⭐️⭐️⭐️⭐️
this ⭐️⭐️⭐️⭐️
原型及原型链 ⭐️⭐️
new 操作符 ⭐️⭐️⭐️
Promise 以及常见的api用法和一些基于Promise的扩展题头条快手都让实现一个promise.allSettled 对比 async await ⭐️⭐️⭐️⭐️
generator ⭐️⭐️
跨域以及OPTIONS ⭐️⭐️⭐️
闭包及作用缺点 ⭐️⭐️⭐️⭐️
数组的常用的方法 ⭐️⭐️⭐️⭐️
ES6 ⭐️⭐️⭐️⭐️
Event Loop 以及会给出一段代码让说一下输出顺序 ⭐️⭐️⭐️⭐️⭐️
call apply bind区别实现其中一个 ⭐️⭐️⭐️
防抖节流 ⭐️⭐️⭐️⭐️
数组乱序 ⭐️⭐️
正则 ⭐️⭐️⭐️
快排归并 ⭐️⭐️
commonjs 和 es6 module 区别
let 和 var 的区别

Promise是属于微任务吗？「不 promise.then属于微任务」

Vue

由于对Vue不是很熟问的比较少

Vue的双向绑定 ⭐️⭐️⭐️⭐️⭐️
- 数据劫持 + 依赖收集 + 发布订阅
- 数据劫持
  - 会吧目标对象上的每个 key 属性转换为 getter/setter，劫持各个属性的 setter 和 getter
    - Object.defineProperty(obj, prop, descriptor)
  - 发布订阅
    - 数据变动时，发布消息给订阅者【之前依赖收集得到的】，通过重新渲染视图
- 依赖收集
  - render 的时候，会读取对象的值，触发 getter 进行依赖收集
- 总结
  - 更新视图 setter -> watcher -> update(patch + 使用队列异步更新)
proxy和 defineProperty ⭐️⭐️⭐️
- proxy 可以直接监听对象而非属性，还可以直接监听数组的变化
- defineProperty 需要遍历对象属性
computed和watch ⭐️
- comupted 计算属性，依赖其他属性，有缓存，
- watch 监听其他值的变化就会执行回调
怎么做组件复用 slot mixin这些优缺点 ⭐️⭐️⭐️⭐️
Vue-router实现原理 ⭐️⭐️
- hash模式监听 hashChange事件
- history模式监听 popstate 事件，变化时重新渲染，使用 pushState和reaplce 改变栈信息
Vue源码 ⭐️⭐️⭐️⭐️

virtual DOM 虚拟DOM实现原理?
- 本质上是 JS 对象，真实 DOM 的更新
- 状态变更时，记录比较新树和旧数的差异
- 把差异更新到真实的DOM中
  - 是对真实 DOM 的一种抽象映射，映射到真实的 DOM 要经历 VNode 的 create(使用 JS 对象模拟 DOM 树)，dom diff(比较两颗 DOM 树的差异)，patch(把差异应用到 DOM 上)
  - 为什么需要虚拟 DOM
    - 减少对真实 DOM 的操作，因为会影响重绘和回流
  - 关键点
    - 创建
    - 更新：虚拟 DOM 转化为真实 DOM
    - diff：比较新旧 virtual dom tree 的差异，然后用 patch 的部分去局部更新 DOM
Vuex单向数据流解释下
- action -> state -> view
- view -> action -> state
- 一个循环
mvvm
- m model 数据层
- v 视图层
- vm 对绑定属性的监听，当数据变化，view 层会得到更新，监听 view 层表单元素的变化，更新对应 vm 层的数据

组件通信
- props/$emit
- EventBus
- vuex
- $attrs/$listeners
- project/inject

Vue中的key到底有什么用？ ⭐️⭐️⭐️
- key是为Vue中的vnode标记的唯一id,通过这个key,我们的diff操作可以更准确、更快速
- 和 diff 算法有关
- key 的唯一性可以，可以降低查找的时间复杂度
- 如果不加key，vue 会复用节点，导致之间节点的状态被保留，引起 bug
生命周期 ⭐️⭐️⭐️⭐️ Vue 的生命周期，就是 Vue 实例从创建到销毁的过程。
开发者提供给我们的钩子函数，方便在特定阶段添加相关业务代码。
- beforeCreate
  - 实例还没有创建
  - 在 initState 之前调用
  - initState 的作用是对 props、methods、data、computed、watch等属性做初始化处理
  - 当前阶段不能访问 data、methods、computed、watch等
- created
  - 实例创建完成
  - 可以使用数据，更改数据不会触发 update 函数
  - 无法和 DOM 交互，但是可以通过 vm.$nextTick 来访问 DOM
- beforeMount
  - 执行 vm._render() 函数渲染 VNode 之前，执行 beforeMount
  - 虚拟 Dom 已经创建完成，即将开始渲染
  - 发生在实例挂载之前
  - 修改数据不会触发 updated
- mounted
  - 执行完 vm._update() 把 Vnode patch 到真实 Dom 后，执行 mounted 钩子
  - 挂载完成后，可以通过 $refs访问 DOM
  - 数据完成双向绑定
  - 可以在此阶段向服务端请求数据，渲染数据
- beforeUpdate
  - 发生在更新之前，即虚拟 Dom 重新渲染之前被触发
  - 可以在此阶段进行修改数据，不会造成重渲染
- updated
  - callUpdatedHooks 函数，vm._watch 是专门用来监听 vm 上数据变化进行重新渲染的，是一个渲染相关的 watcher，只有 vm._watch 执行完毕后，才会执行 updated 钩子函数
  - DOM 更新完成之后
  - 避免在此期间更改数据，造成无限循环更新
- beforeDestroy
  - 实例销毁之前
  - 可以在这个阶段清除定时器
- destroyed
  - 实例销毁之后
  - 数据绑定被移除
  - 监听被移除
- 只有 beforeCreate 和 created 钩子才可以在服务端渲染期间调用

React

生命周期以及render和commit阶段 ⭐️⭐️⭐️⭐️⭐️
Fiber意义解决了什么问题怎么实现的 ⭐️⭐️⭐️⭐️
React Hooks的优缺点为什么需要 ⭐️⭐️⭐️
React的性能优化以及key的作用 diff的过程 ⭐️⭐️⭐️ ⭐️
setState同步异步问题 ⭐️⭐️⭐️⭐️ ⭐️
- 有时表现出异步,有时表现出同步setState只在合成事件和钩子函数中是“异步”
  - 相同的状态属性多次更新会合并成一次，最后一次会保留
- 在原生事件和setTimeout 中都是同步的。
组件复用 HOC render props mixin 对比 ⭐️⭐️⭐️ ⭐️
Context 及Redux等状态管理工具 ⭐️ ⭐️
React的Provide和consume是因为什么产生的？
React和Vue的区别 ⭐️⭐️⭐️
给定条件实现custom hooks ⭐️ ⭐️
useLayoutEffect 和useEffect区别 ⭐️ ⭐️
Suspense 和Concurrent Mode ⭐️

网络

XSS和CSRF以及如果防止可以延伸到react中的$$typeof ⭐️⭐️⭐️
- xss 输入过滤，输出转义
同源策略 ⭐️⭐️⭐️
HTTP请求头以及状态码等等 ⭐️⭐️⭐️⭐️
HTTP缓存和浏览器缓存 ⭐️⭐️⭐️⭐️
发起一个HTTP请求的全过程 ⭐️⭐️⭐️⭐️
HTTPS建立连接的过程和作用 ⭐️⭐️⭐️
HTTP2 ⭐️⭐️⭐️
对称加密和非对称加密(大都和HTTPS一起问了) ⭐️⭐️⭐️
GET POST OPTIONS ⭐️⭐️⭐️
Cookies Session LocalStorage Service worker ⭐️⭐️
四次挥手因为 TCP 是双工的当有一方要关闭连接时，会发送指令告知对方，我要关闭连接了。这时对方会回一个ACK，此时一个方向的连接关闭。但是另一个方向仍然可以继续传输数据，等到发送完了所有的数据后，会发送一个FIN段来关闭此方向上的连接。接收方发送ACK确认关闭连接

算法和其他

总体来说没有碰到hard的基本都是easy或Meduim难度比如 : 最大子列和倒数第k个链表二叉树反转二叉树最大深度树形对象中找某个元素输出路径等等

其他的比如

浏览器中输入一个网址到完整展示到页面发生了什么 ⭐️⭐️⭐️⭐️
给定条件自己设计组件等 ⭐️⭐️⭐️
性能优化(因为简历有写)所以问的最多也最详细牵扯到项目基本每个公司都会问深挖细节很多⭐️⭐️⭐️⭐️⭐️
png jpg webp等图片区别 ⭐️
看过那些源码什么的 ⭐️⭐️

其他

大厂职级

美团 2-3+
蚂蚁 6+
头条 2-1

思考

做了两年前端开发，平时就是拿 Vue 写写页面和组件，简历的项目经历应该怎么写得好看？

简历常用例句集合

对前后端分离模式，可视化开发深入理解，对 Vue 和 react 有丰富的开发经验，具备一定的框架设计能力。
对 Javascript 中闭包、函数式语言等概念有清晰的认知，对常见库的源码实现有了解。
熟悉 Node.js 开发，熟练使用 npm, webpack, gulp 等工具。熟悉前端性能的优化，熟悉使用 Chrome，Safari 等前端调试工具。
熟悉常见的前端调试工具，能够高保真还原设计稿，具备良好的代码风格以及接口、架构设计能力。熟悉 JS 性能优化，熟练解决各种浏览器兼容问题。
深入理解 W3C 标准与 ES 规范，熟悉 HTML、CSS、JavaScript 等 Web 基础以及常用浏览器兼容方案。
熟练掌握 PC 端和移动端的布局方式，如响应式布局以及流式布局，并能根据业务需求，封装高复用、可维护性好的前端组件。
熟练掌握浏览器渲染原理以及机制，对至少一种主流前端框架有深入应用并能够深入理解其设计原理。
参与开发、持续改进前端页面设计平台，通过通过开发工具、改进流程，保证前端业务开发的高效性。
使用FTP服务器实现CDN分级推送，实现用户上传文件预加热流程，提高50%缓存命中率。

阿里 p6 senior developer

具有独挡一面的能力，能够高质量完成工作，能把握一个系统/团队的整体实现，在推行过程中能提炼新的方法或方案，或对现有方案提出改进建议并被证明有效。通常是 3 年+ 工作经验的同学。

具有独挡一面的能力，能高质量的完成模块级的工作。
熟练掌握工作中使用的技术栈，并能了解它们的实现原理。
能够在一个需求从开发-上线整个生命周期中找到痛点，并能使用技术的手段解决，提升效率。
能在模块维度对问题或需求做出分析和拆解，并做出相对合理的实现方案。
熟练掌握基础的数据结构和算法，代码符合规范，逻辑清晰。
有较好的技术选型能力

面试前或平常会刷面试题吗 ?

工作年限多项目经验丰富的话算法要求低一些，二分、冒泡、快排、链表 /二叉树遍历理解透彻基本就够了，总结项目相关技术。

渠道

看准网
BOSS直聘
拉钩
内推

猎头

100ofer

独角兽

估值超过10亿美金的独角兽公司

一线大厂

字节跳动/头条（上海）
蚂蚁金服（上海）
腾讯（上海）
阿里（上海）
饿了么。PS：阿里旗下。
拼多多。PS：工资高，加班多（11、11、6）。
美团点评（上海）。PS：上海的大众点评业务比美团业务多一些。
携程。
百度（上海）
京东（上海）
华为（上海）

二线大厂

爱奇艺（上海）。PS：百度旗下，独立运营；爱奇艺总部在北京，上海也有分部。性价比较高。
哔哩哔哩。
阅文集团。PS：腾讯旗下，独立运营。

独角兽公司

蔚来。PS：自动驾驶领域。

小而美的创业公司

即刻（主要产品：即刻App）

三线大厂

平安系列（平安科技、平安寿险、平安产险、平安金融等，各自独立，可分开投简历）
喜马拉雅
蜻蜓FM
小红书
趣头条
巨人网络。PS：游戏领域。
三七互娱
盛大网络。PS：游戏领域。

外企-上海

微软
高通
Cisco（思科）
Intel（英特尔）
EMC（易安信）
SAP（思爱普）
ThoughtWorks

互联网金融

中国银联
陆金所
中安在线
东方财富

其他公司

触宝科技。PS：触宝输入法、触宝电话。

传统行业（不仅限于IT领域）

三大电信运营商：中国移动、中国电信、中国联通
各大银行

上海互联网厂

拼多多
爱奇艺
携程
美团点评
B站
小红书
喜马拉雅
虎扑体育
唯品会
安居客
东方财富
二三四五
哈罗出行
沪江
盒马
阅文
叮咚买菜
驴妈妈
趣头条
众安
平安集团
Teambition
七牛
银联商务
毒APP
依图
Vipkid
Vipjr
掌门一对一
哒哒英语
51talk

字节 - senior - jd

1、熟练掌握JavaScript，CSS，HTML，DOM、绘图、动画、协议、安全、网络、性能优化等前端技术，对主流前端框架（ React \ Vue \ Angular 等）至少一种有深入应用并深入理解其设计原理

2、熟悉MVC，MVVM，flux，redux等相关工程知识

3、熟悉W3C，ECMAScript，CommonJS，ES6等相关技术标准

4、具备移动端开发能力，能解决移动端兼容性问题及性能问题，熟悉主流移动浏览器的技术特点

5、熟练掌握 Grunt、Gulp、Webpack、FIS 其中任意一项构建工具的使用和配置

6、熟悉 Node.js Web 应用开发，有Node.js，koa，express项目开发经验

7、能对具体的产品进行性能优化，实现极致的页面加载、执行和渲染时间

8、参与过大型互联网产品的设计和研发工作，整体负责过一个线上系统的技术选型、规划与开发，能独立完成复杂前端系统或大型框架设计

9、注重产品质量，具有良好的代码风格、接口设计与程序架构

10、关注业界发展，对最新的前端技术有浓厚的兴趣及独特的见解，关注前端前沿技术研究，通过新技术服务团队和业务

11、优秀的团队合作能力，拥有良好的主动性与推动力，优秀的分析问题和解决问题的能力

12、至少拥有以下一种能力： A.在理解前端开发流程的基础上，结合前端实际建立提升工作效率的工具。 B.在理解产品业务的基础上，提升产品的用户体验，通过技术驱动业务的发展，能有独立的产品想法

字节三年社招岗位前端面试 - 看准网

笔试一轮，面试三轮，hr一轮。三年社招岗位，难度很大。面试难度超过阿里（同时间段面试过两个阿里部门，个人感受全方位难度超过阿里）。笔试没啥好说的，就是算法+算法+原理+实现。接下来是面试，每一轮面试的面试官都会要求当场手写算法和实现，看着写。

第一轮面试，问的问题主要是react实现原理，diff算法实现机制，redux实现与数据流向，复杂模数据对象深度对比实现，vue设计的核心原理(主要是虚拟dom的实现，渲染机制的实现，双向数据监听，模板引擎的具体实现)。node问了通信机制，内存优化，v8的垃圾回收（new space 和 old space的算法实现原理是什么）。最后该问了项目工程化，也就是webpack，loader实现机制和原理，项目优化，如何加快打包速度，如何做到tree shaking。一共面试一个半小时左右。最后手写一个发布者订阅者实现。

二面应该是一个算法面试官老师，只问算法和设计模式，当场就让我手写算法题，一共问了四个算法题，都很难，我只完整写出一个，有两个有点思路说了一下，最后一个一点思路都没有。网上搜索不到，leetcode变种题。这方面，猎头给我说过，至少刷400+以上leetcode。接下来就是设计模式，问设计模式会哪些，说的设计模式在工作中怎么用的，都解决了什么问题，为什么要这么用，可否继续优化。一共一小时十五分钟左右。

第三轮，面试官老师特别和蔼可亲，气氛非常轻松。主要考察知识点广度，聊了我做的一些模块，发布的npm包，一些程序设计思想。广度方面主要聊了一些前端测试，前沿技术等，重点聊了一下工具链模块开发。还问了一些平常的学习方法这些。一共一小时多一点时间吧。再接下来就是hr面试了。感觉只要不作死，基本上都过了。主要是之前在上一家公司都做了些啥，怎么待实习生的，怎么做技术提升的。为何离职自己职业规划。最后通知offer发放。

总体来说，面试体验非常好，从跟猎头接触到最后offer发放，整体流程都给人非常舒服的感觉。面试官，问问题，循序渐进，由简入深，一步一步引导。整体过程感觉自己所有一个应聘者是很受尊重的。

为什么前端面试官问的问题都是各种原理呢？

比如
（1）问：双向绑定的原理是什么？答：因为里面有脏检查技术。问：脏检查技术的原理是什么？答：内部不断地检查变量的状态变化。问：是怎样检查的？答：。。。。
（2）问：mvvm 原理是什么？答：M-模型 v -视图层 c-控制层，逻辑展现分离；
问：我问的原理是什么？答：。。。
（3）问：http 原理是什么？答：超文本传输协议，没了问：工作原理，答：地址解析 - 封装HTTP请求数据包-封装成TCP包，建立TCP连接（TCP的三次握手） - 客户机发送请求命令-服务器响应，返回数据-服务器关闭TCP连接。问：为什么通过这几个步骤后就可以、？答：。。。。
(4)ajax原理是什么？答。。。。
。。。。
最后面试官总结：你停留在会做的层面上，但是没有更深入的去了解他，掌握它！

回答流程如下：

如果是英文词汇就先翻译成中文
一句话描述该技术的用途
描述该技术的核心概念或运作流程
口述该技术的代码书写思路
该技术的优点
该技术的缺点
如何弥补缺点

比如 CORS 的原理

WHAT？
- 跨域资源共享
- 浏览器的同源策略
- 浏览器接受到了响应，没有给客户端
HOW？
- 设置响应头
- 分为简单请求和非简单请求
  - 简单请求只需要设置
    - Access-Control-Allow-Origin
  - 非简单请求要发预检请求
    - 预检请求了解服务端支持的操作
      - Access-Control-Allow-Methods
  - 发送 Cookie
    - Access-Control-Allow-Credentials
  - 预检请求的有效期
优点
- 简单配置就能跨域
缺点
- 某些老旧的浏览器不支持 CORS
- 解决办法是使用 JSONP

面试

准备篇

1 数据结构与算法

2 设计模式