前端面试

[WangYang-Rex]

HTML & CSS 部分

• css常用布局
  定位布局，流布局，浮动布局，flex和grid布局，包括还有三栏布局中的圣杯和双飞翼
  使用flex实现垂直水平居中

• BFC
  盒模型包括怪异盒模型，如何转换 box-sizing

• session、cookie、sessionStorage、localStorage等区别

• animation和transiton的相关属性
  为什么动画推荐用c3而不是js，主要是性能方面....浏览器怎么优化的动画

JavaScript部分

• JavaScript闭包

• 前端跨域
  CORS怎么实现的

• JavaScript继承
  原型继承、构造函数继承、组合继承、寄生组合继承优缺点和实现方式，es5如何实现super关键字

• JavaScript的节流和防抖

• js事件执行机制
  event loop，microtask，task queue
  然后事件委托、捕获、冒泡、目标阶段
  target和currentTarget

• this指向的问题
  四种绑定规则，new的执行过程以及箭头函数注意事项

• es6相关知识点
  promise的实现方式；
  generator怎么实现；

React部分

• react部分必考的肯定有生命周期

• setState是异步的还是同步的，几个参数，各有什么作用，延伸到componentShouldUpdate;

• 子组件和父组件componentDidMount哪一个先执行

• redux的一般流程
  react-redux的原理、高阶组件、以及redux-saga的实现原理

• 如何设计一些组件，原则是什么，你写过什么自豪或者眼前一亮的组件
  组合、复用、重复、测试、维护

• 全局组件的挂载
  a组件在b组件内，c组件在a组件内，如何让他渲染出来，a组件和c组件同级

// react v16+ 
ReactDOM.createPortal(this.props.children, this._container)
// react v16- 
ReactDOM.unstable_renderSubtreeIntoContainer(
  parent,
  getComponent(props),
  this.container,
  function callback() {
    if (ready) {
      ready.call(this);
    }
  }
);

• react组件的优化
  pureRenderMixin、ShouldComponentUpdate
  组件的设计和木偶组建的函数编写方式

• react组件的通信
  prop，context（顺道扯了react-redux的context实现方式）、redux

• react 的virtual dom和diff算法的实现方式

• MVC、MVVM了解么，数据双向绑定和单向绑定实现方式

• react-router实现方式，单页面应用相关东西

• react的ssr了解么？大概怎么实现
  webpack的配置项以及大概的实现思路和注意事项

浏览器

• 前端优化一般都做哪些
  雅虎的军规啥的。以及首屏优化。
  预加载，http head缓存，懒加载

• 浏览器缓存
  200 From cache和200 ok区别，强缓存，302

• post、get区别
  99%的人都理解错了HTTP中GET与POST的区别

构建工具

• 编写过webpack的扩展嘛，Plugin或者loader
  深入浅出webpack