面试之路|如果你是前端面试官，你准备问什么？

前言

最近在准备面试，当然是要做一些准备工作。有明确的心仪公司，并且还有内推渠道
无论如何，都会告诉自己一定要好好准备。还要对自己说 只许成功不许失败哦！

如果你是面试官，你准备问什么？

现在我就想进入一场模拟考试，自己考自己。面对这些很经典的问题，我会怎么回答呢？
这个期间我会一直写自己的答案，我想到什么，我怎么回答。也是对自己的一个认知，
万幸的是，我还要机会查漏补缺。

CSS3

• 什么是盒子模型？

  border 边宽
  padding 填充
  margin 边距
  content 内容
  
  符合w3c标准的盒子模型 容器的宽高就是内容的宽高
  IE浏览器下 容器的宽高就是内容的宽高+ margin + padding + border
  

• CSS3 典型布局

  flex 布局  display：flex  父容器用jusiitngy :center item-agin :atuo
  div 布局   主要是float position
  grid 布局
  table 布局 
  

• CSS3元素垂直水平居中

  一般分为两种 ：定宽高 和 不定宽高
  定宽高
  float + 定位
  .box{
     postion:absolute;
     with:100px;
     height:100px;
     top:50%;
     left:50%;
     margin-top:-50px;
     margin-left:-50px;
  }
  还可以用translate
  替换margin 改为 translate3d（-50%，-50%）
  line-hieght+height 也是可以的 但一般用于文字
  
  不限宽高
  flex 布局 jusiitngy :center item-agin :center
  grid
  

• CSS3 有哪些新特性

  文字阴影 text-showdown
  css动画 transform animations 渐变效果 毛玻璃
  背景图 background-position size等
  边框 透明度 opacity
  一般要假 浏览器兼容前缀的 -webkit 等
  

• CSS动画渲染原理

  首先要说一下回流重绘问题
  又要说一下浏览器渲染原理
  浏览器会解析html 渲染一个dom树 和cssom 
  解析节点的为止以及节点的样式
  当元素动态性的发生改变
  就会回流 此时性能消耗较大
  回流不一定重绘 但是重绘一定会回流
  可以举例说明 display:none visbility opacity
  display:none 节点是不存在了 这里会导致回流重绘 节点的监听事件都没有了 性能消耗大 
  viability 节点存在 节点的监听事件也都有 不会回流但是会重绘 比display:none 好一点
  opacity 节点存在 没有动态修改 节点监听事件都有 不会回流重绘 性能最好
  
  使用transform animations 会开启css3 硬件加速 （动画最终是有GPU 渲染的）
  脱离文档流 可以减少回流重绘
  

• BFC及其作用

  什么是BFC？字面意思是块级格式上下文。
  常见的body 这个根元素就是。还有我们经常用overflow将元素变成BFC 元素
  BFC 有什么特性呢
  边距重叠
  
  以下这些操作会触发BFC
  float
  overflow
  flex
  opacity
  

• CSS伪元素

  :before
  :after
  这两者经常用于消除浮动
  
  :hover
  鼠标移上移下 
  
  :first-child 
  选择器
  
  :: 双引号的伪类 我忘记了
  

JavaScript

• JavaScript 编译原理

  var a = 2
  首先会词法分析 （AST）让js 编译器认得
  js编译器 又会问（LHS 查询）作用域 （模模糊糊 说不清）
  

• this

  js 运行在浏览器指向的是windows 
  node.js 指向的是gobal(单词忘记怎么拼了)
  
  this 那个元素调用就指向当前元素的作用域中
  用call apply bind
  可以改变this
  

• 继承

  继承是一个复制 重复利用
  原生有7中继承 ES6有一种 
  构造函数  
  原型链  _prto_ protyper
  class类 super（）
  
  //子类继承父类
  class person{
     this.name = 'fannie' 
  }
  class b exend person(){
      cuscreater(){}
      super()
      console.log(this.name)
  }
  
  构造函数继承
  function Person(){
    this.name = 'fannie';
    this.age = 18
  }
  
  let a = new Person()
  console.log(a.name)
  

• 闭包

  js 一切都是闭包
  很典型的回答就是 函数里面调用函数 
  内部函数的变量 不可以外部访问 形成一个闭包 而内部函数可以访问外部
  
  function golike(){
      let name = 'fannie'
      function getAge(){
          let age = 18
          return name + age
      }
      getAge()
  }
  let a = golike()
  console.log(a)
  

• 作用域

  let a  = 1
  function b (){
      var b1 = 2
      console.log(a)
      console.log(b1)
  }
  b()
  console.log(b1)
  
  b 可以访问父作用域
  但是父作用域 不可以访问子作用域
  
  作用域好比一座公寓
  某一间房子找物品 只能同层找 或者是往上找 一直找到顶楼 
  

• 原型与原型链

  每一个对象都是有原型的 prototype
  都有 _proto_ 
  原型有它的原型 这样形成了链式
  a.protyper()
  

• apply call bind 的区别

  apply 参数是单个的
  call  参数是数组
  以上都是立即执行的
  bind 不是立即执行的
  

• event loop

  事件的轮询
  

es6

• async/await 异步操作
• premise
• class
• 解构
• AMD 模块化
• vue优化

vue

• 数据双向绑定原理
• 组件传参
• 什么是组件化
• 生命周期

webpack

• 基本流程
• loader与plugin 区别
• 常用的插件
• 分析webpack 热更新原理
• 如何配置多应用
• 打包压缩

Http

• 三次握手四次挥手
• 哪四层物理层
• http2 多路复用

浏览器

微信小程序

前端优化