fe-5.6

二面
1. 自我介绍；
2. 项目介绍，遇到的问题等等；
3. React相关的；
4. Webpack相关；
5. 了解的新技术；
6. 反问；
三面
1. 自我介绍；
2. 项目介绍；
3. 针对项目经历提出的场景问题；
4. Iphone X等新机型的适配问题；
safe area

js基础、ES+新特性；

let、const块级作用域
模板字符串
解构
支持module
proxy

React相关的，hooks、性能优化；
hooks对应周期

componentDidUpdate，不传参
componentWillUnmount
- useEffect return的函数

性能优化：
跳过不必要的更新pureComponent
useMemo、useCallback
列表使用key

Webpack相关；
6. 反问；
两道编程题

// 判断字符串是否包含指定子字符串
// 提取st出来，讲原本字符串的st后面**掉在做匹配
var constvalidate = function (text, pattern) {
 var marker = pattern.replaceAll('*', '')
 var len = pattern.length - marker.length
 var list = text.split(marker)
 let res = false
 if (list.length > 1) {
     let count = 0
     list.map((j, index) => {
         if (2 + j.length >= pattern.length && index > 0) {
             res = true
         }
         if (index > 0) {
             count = 2 + j.length
         }
         if (count >= pattern.length) {
             res = true
         }
     })
 }
 return res
};
console.log(validate("tesstdf", "st**")); // true
console.log(validate("tesstd", "st**")); // false
console.log(validate("sbesst", "st**")); // false
console.log(validate("stesst", "st**")); // true

函数柯里化

// 函数柯里化
function sum(...args) {
return args.reduce((a, b) => a + b)
}
function curry(fn) {
var args = []
return function tmp(...newArgs) {
if (newArgs.length) {
  args = [...args, ...newArgs]
  return tmp
} else {
  const res = fn.apply(this, args)
  args = []
  return res
}
}
}
var add = curry(sum)
console.log(add(1, 2, 3)(3)(33, 232)(22, 32)());

二面
1. 自我介绍；
2. 项目介绍，遇到的问题等等；
3. React相关的；
4. Webpack相关；
5. 了解的新技术；
6. 反问；

const fruits = {
data: 'banana',
next:{
data: 'apple',
next:{
data: 'orange',
next:{
data: 'pear',
next: {
data: 'grape',
next: {
data: 'watermelon',
next: null
}
}
}
}
}
};

function flat(arr){
   return arr.reduce((prev, current) => {
      if (Array.isArray(current)) {
        return prev.concat(flat(current))
      } else {
        return prev.concat(current)
      }
   }, [])
}
const arr = [1,2,[7,9,[12,5,[87]]]];
console.log(flat(arr))

三面
1. 自我介绍；
2. 项目介绍；
3. 针对项目经历提出的场景问题；
4. Iphone X等新机型的适配问题；
safe area

反问；
基础题：
1、你如何理解Redux，说说它的核心概念？讲讲Redux中的reducer为什么每次必须返回一个新的对象
Redux核心是全局的单一store、通过action触发异步相关操作、store更新数据、并通过mapStatetoprops映射在组件中从而触发更新
浅比较，性能较好

2、React为什么要使用虚拟DOM？说说虚拟DOM的原理

3、webpack的打包的核心流程
内容转换 + 资源合并

初始化阶段
构建
- 编译对应entry
- 调用loader处理每个ast对象
- 完成依赖关系图
生成
- 输出thunk
- 写入文件

plugin中遵循了Tapable事件通知
loader针对每个moudle做的处理

4、谈谈浏览器事件循环
分为微任务和宏任务
防止浏览器中异步io造成假死
宏任务：set、ui交互、io
微任务：promise、nextTick

5、什么是闭包，闭包的作用
js中有全局、局部两种变量

6、Vue是怎么实现数据绑定的

7、React Hooks原理

8、useCallback 和 useMemo 的区别

9、webpack中plugin和loader的作用

10、javascript中继承有几种实现方法

原型链继承
- prototype
借用构造函数继承（伪造对象、经典继承）
- People.call(this)
实例继承（原型式继承） …
- new
组合式继承 …
- 原型链+构造
寄生组合继承 …
6.es6继承
- class a extends B

编程题：
1、写一个方法控制 Promise 并发数量，函数格式如下： function promiseConcurrencyLimit(limit: number, tasks: Array<() => Promise>)

var promiseConcurrencyLimit = (limit, tasks) => {
  var count = 0
  tasks.map(j => {
  })
}

2、打印一个页面上的所有标签类型，如：[“html”, “head”, “body”, …]

var data = {}
var dfs = (node) => {
  if (!node) return
  if (node.nodeType === 1) {
    data[node.nodeName] = true
  }
  var children = [...node.childNodes]
  children.map(k => dfs(k))
}
dfs(document)

二面：
1、React 函数组件为什么props只会接受第一次的值，父组件的参数更新后，子组件的props为什么不会变化
浅对比
2、谈谈前端项目常见的优化手段
3、现场封装一个useToast

三面：
1、webpack中plugin和loader的实现原理

2、项目出现线上错误怎么排查前端问题

3、谈谈rollup和webpack的区别，rollup的优势
rollup的构建产物实在同一个作用域执行，特别适合类库打包
webpack主要是万物组件转换成不同的bundle
esbuild：共享内存、多进程、go语言编译执行

4、es module和commonJS的区别
es module是es6的模块规范
commonjs是node的模块规范

5、谈谈webpack异步加载原理和分包策略

6、谈谈webpack按需加载
组件触发到函数时调用require，
里面包含了jsnop请求，并push到webpack的全局数组中

7、谈谈SSR原理，怎么实现SSR+CRS混合渲染

8、谈谈前端性能监控，有哪些常见的监控指标

首屏
白屏
unhandlerejecttion
DOMContentLoaded
onerror
window.addEventListener(‘error’)

9、虚拟滚动的实现思路

10、mobx的实现原理

watcher
reactive

11、前端的资源预加载是怎么做的

12、手写debounce、throttle

// 按照事件触发时重新delay执行
var debounce = function (fn, delay) {

}


// throttle  按照一定周期内才响应
var throttle = function (fn, delay) {
  var last, timerId
  return function () {
    const [context, args] = [this, arguments]
    const now = Date.now()

    if (last && now - last < delay) {
        clearTimeout(timerId)
        timerId = setTimeout(() => {
            last = now
            fn.apply(context, args)
        }, delay)
    } else {
        fn.apply(context, args)
        last = now
    }
  }
}

二面1. 自我介绍；2. 项目介绍，遇到的问题等等；3. React相关的；4. Webpack相关；5. 了解的新技术；6. 反问；

三面1. 自我介绍；2. 项目介绍；3. 针对项目经历提出的场景问题；4. Iphone X等新机型的适配问题；safe area

二面
1. 自我介绍；
2. 项目介绍，遇到的问题等等；
3. React相关的；
4. Webpack相关；
5. 了解的新技术；
6. 反问；

三面
1. 自我介绍；
2. 项目介绍；
3. 针对项目经历提出的场景问题；
4. Iphone X等新机型的适配问题；
safe area