2023入职大厂前的面试准备2023年前端寒冬，总结了自己成功入职大厂前的面试准备大纲；搭建属于自己的能力模型和知识网络

搭建属于自己的能力模型，查漏补缺

一、专业知识

1、网络知识

http：juejin.cn/post/684490…
OSI7层模型
- 七层模型，亦称OSI（Open System Interconnection）。参考模型是国际标准化组织（ISO）制定的一个用于计算机或通信系统间互联的标准体系，一般称为OSI参考模型或七层模型
- 物理层：底层数据传输；如网线、网卡标准
- 数据链路层：定义数据的基本格式，如何传输，如何标识；如网卡MAC地址
- 网络层：定义IP编址，定义路由功能；如不同设备的数据转发
- 传输层：端到端传输数据的基本功能；如TCP、UDP
- 应用层：各种应用软件，web应用
- 会话层：控制应用程序之间会话能力；如不同软件数据分发给不同软件
- 表示层：数据格式标识，基本压缩和加密功能
TCP5层模型
- 物理层-数据链路层-网络层-传输层-应用层

2、运营知识

3、安全知识

csrf：tech.meituan.com/2018/10/11/…
xss：tech.meituan.com/2018/09/27/…

4、业务知识

5、数据结构与算法

动态规划
- 动态规划基础
- 背包问题
- 打家劫舍
- 股票问题
- 子序列问题

回溯算法

 result = []
 def backtrack(路径, 选择列表):    
     if 满足结束条件:
         result.add(路径)
         return
     for 选择 in 选择列表:                
         做选择
         backtrack(路径, 选择列表)
         撤销选择

二、专业技能

1、开发语言

javascript

js单线程：juejin.cn/post/684490…
原型/继承
执行上下文/作用域链
闭包：juejin.cn/post/684490…
this/call/apply/bind
深浅拷贝
ES6/方法源码实现

promise：解决回调地狱问题

 // 源码实现
 // 定义Promise的三种状态常量
 const PENDING = 'PENDING'
 const FULFILLED = 'FULFILLED'
 const REJECTED = 'REJECTED'
 class MyPromise {    
     constructor (handle) {        
         if (isFunction(handle)) {            
             throw new Error('must accept a function')        
         }        
         this._status = PENDING        
         this._value = undefined        
         // 添加成功回调函数队列        
         this._fulfilledQueues = []        
         // 添加失败回调        
         this._rejectQueues = []           
         // 执行handle        
         try {            
             handle(this._resolve.bind(this), this._reject.bind(this))
         } catch (err) {
             this._reject(err)
         }
     }
     _resolve (val) {
         const run = () => {
             if (this._status !== PENDING) return
             // 依次执行成功队列中的函数，并清空队列
             const runFulfilled = (value) => {
                 let cb;
                 while (cb = this._fulfilledQueues.shift()) {
                     cb(value)
                 }
             }
             // 依次执行失败队列中的函数，并清空队列
             const runRejected = (error) => {
                 let cb;
                 while (cb = this._rejectedQueues.shift()) {
                     cb(error)
                 }
             }
             /* 如果resolve的参数为Promise对象，则必须等待该Promise对象状态改变后,                当前Promsie的状态才会改变，且状态取决于参数Promsie对象的状态            */
             if (val instanceof MyPromise) {
                 val.then(value => {
                     this._value = value
                     this._status = FULFILLED
                     runFulfilled(value)
                 }, err => {
                     this._value = err
                     this._status = REJECTED
                     runRejected(err)
                 })
             } else {
                 this._value = val
                 this._status = FULFILLED
                 runFulfilled(val)
             }
         }
         // 为了支持同步的Promise，这里采用异步调用
         setTimeout(run, 0)
     }
     _reject (err) {
         if (this._status !== PENDING) return
         // 依次执行失败队列中的函数，并清空队列
         const run = () => {
             this._status = REJECTED
             this._value = err
             let cb
             while (cb = this._rejectedQueues.shift()) {
                 cb(err)
             }
         }
         // 为了支持同步的Promise，这里采用异步调用
         setTimeout(run, 0)
     }
     then (onFulfilled, onRejected) {
         const {_value, _status} = this
         return new MyPromise((onFulfilledNext, onRejectedNext) => {
             let fulfilled = value => {
                 try {
                     if (!isFunction(onFulfilled)) {
                         onFulfilledNext(value)
                     } else {
                         let res = onFulfilled(value)
                         if (res instanceof MyPromise) {
                             // 如果当前回调函数返回MyPromise对象，必须等待其状态改变后在执行下一个回调
                             res.then(onFulfilledNext, onRejectedNext)
                         } else {
                             //否则会将返回结果直接作为参数，传入下一个then的回调函数，并立即执行下一个then的回调函数                            onFulfilledNext(res)
                         }
                     }
                 } catch (err) {
                     onRejectedNext(err)
                 }
             }
             let rejected = error => {
                 try {
                     if (!isFunction(onRejected)) {                        onRejectedNext(error)
                     } else {
                         let res = onRejected(error)
                         if (res instanceof MyPromise) {
                             // 如果当前回调函数返回MyPromise对象，必须等待其状态改变后在执行下一个回调
                             res.then(onFulfilledNext, onRejectedNext)                        } else {
                             //否则会将返回结果直接作为参数，传入下一个then的回调函数，并立即执行下一个then的回调函数
                             onFulfilledNext(res)                        }                    }

                 } catch (err) {
                     onRejectedNext(err)
                 }
             }
             switch (_status) {
                 case PENDING:
                     this._fulfilledQueues.push(onFulfilled)
                     this._rejectQueues.push(onRejected)                    break                                case FULFILLED:
                     fulfilled(_value)
                     break
                     case REJECTED:
                     rejected(_value)
                     break
             }
         })
     }
     // 添加catch方法
     catch (onRejected) {
         return this.then(undefined, onRejected)
     }
     static resolve (value) {
         if (value instanceof MyPromise) return value
         return new MyPromise(resolve => resolve(value))
     }    static reject (value) {
         return new MyPromise((resolve, reject) => reject(value))
     }    static all (list) {
         return new MyPromise((resolve, reject) => {
             let values = []
             let count = 0
             for (let [i,p] of list.entries()) {
                 this.resolve(p).then(res => {
                     values[i] = res
                     count++
                     if (count === list.length) resolve(values)
                 }, err => {
                     reject(err)
                 })
             }
         })
     }
     // 添加静态race方法
     static race (list) {
         return new MyPromise((resolve, reject) => {
             for (let p of list) {
                 // 只要有一个实例率先改变状态，新的MyPromise的状态就跟着改变
                 this.resolve(p).then(res => {
                     resolve(res)
                 }, err => {
                     reject(err)
                 })
             }
         })
     }
     finally (cb) {
         return this.then(
             value  => MyPromise.resolve(cb()).then(() => value),
             reason => MyPromise.resolve(cb()).then(() => { throw reason })
         )    
 }}
 ```

new的实现

 // 1、创建一个新对象
 // 2、this指向构造函数
 // 3、构造函数有返回，会替换new出来的对象，如果没有就是new出来的对象
 let my_new = function (func) {
     let o = Object.create(func.prototype) // 创建对象        
     let k = func.call(o) // 改变this指向，把结果付给k        
     if (k && k instanceof Object) {
         //判断k的类型是不是对象
         return k
     } else {
         return o
     }
 }

防抖(debounce)：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时

 function debounce (fun, delay) {
     return function () {
         let that = this
         clearTimeout(fun.id)
         fun.id = setTimeout(function() {
             fun.call(that, arguments)
         }, delay)    
     }
 }

节流(throttle)：规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效

 throttle (fn, delay = 0) {
     if (!fn || typeof (fn) !== 'function') {        
         fn = function (){}        
         console.error('入参的函数为空或非函数')    
     }    
     let last_time = 0    
     return function () {        
         // 函数当前执行的时间        
         let now_time = new Date().getTime()        
         // 若函数当前执行时间距离上次函数执行时间未大于delay，函数不执行        
         if (now_time - last_time > delay) {            
             fn.apply(this, arguments)            
             // 更新函数最后一次执行时间            
             last_time = now_time        
         }    
     }
 }
 ```

typescript
html
css
- 重排、重绘：juejin.cn/post/684490…
- 盒模型：标准盒模型、IE盒模型
- BFC：juejin.cn/post/696086…
- flex布局：www.ruanyifeng.com/blog/2015/0…
- css选择器
- position
- 1px

2、框架、工具

vue
- MVVM：数据劫持 + 发布订阅模式 juejin.cn/post/684490…
- 生命周期
- 虚拟DOM diff算法
- vuex：state存储数据、mutations更新数据的方法、actions更新state数据、getters对state中的数据进行预处理
- keep-alive：juejin.cn/post/711425…
- 组件通讯
weex
node
- express、koa对比
- 浏览器的event loop和node的event loop的区别
- node中的event loop：zhuanlan.zhihu.com/p/54882306
- node的文件操作
webpack
- babel
- AST
- chunk
- loader
- plugin
- tapable：/juejin.cn/post/684490…
- webpack运行流程
- webpack性能优化：juejin.cn/post/684490…
- 结合项目经验，weex结合mpvue通过代码构建在小程序端的统一：

3、架构设计/技术选型

现状分析，求真务实
生命周期

4、性能、质量优化

秒开率
代码重复率、圈复杂度、注释率、可维护性
代码监控、错误监控
交互体验

5、开发调试

敏捷开发
CI/CD持续集成/持续部署
代码度量平台
自动化测试

三、通用能力

1、解决问题

思维方式：具体、务实
戴明环PDCA

2、项目管理

如何从3-5前端项目SE -> 10+前端项目SE -> 前后端小项目SE -> 中大型项目SE
技术项目：weex多端统一项目、CI/CD流水线搭建项目、前端工厂系统项目、代码度量平台项目、前端工作台系统项目
产品思维：产品管理系统搭建、运营配置系统搭建、规则引擎、toB系统toC化

3、学习能力

读书、掘金、公众号、博客、github

4、创新能力

四、组织影响力

1、方法论建设

专业能力、项目能力、通用能力、组织影响力

2、知识传播

PPT分享、文章

3、人才培养

周期性谈话
因材施教
切记“自以为是”
能力模型，逐一突破
有规划