初级前端的面试之路（二）

如下若有不对或错误的地方，欢迎各位大佬指点，谢谢！

HTML/CSS 相关

回流和重绘

什么是回流？什么是重绘？

回流

当 Render Tree 中的一部分节点由于元素的尺寸大小、布局、隐藏/显示的切换等改变时，须要对 DOM Tree 进行从新的构建的，这就是回流。

重绘

当 Render Tree 中的一些元素须要更新部分属性，而且这些属性只是影响元素的外观显示，不影响布局的时候，就是重绘。

为何要用 Sass/Less/Stylus ？

这些 CSS 预处理语言可让 CSS 具备必定的编程风格，在我实际的开发体验中给我带来了许多便捷的地方，而且使用他们更有利于项目的后期维护。

• 能够定义变量，这对于设置不少重复性颜色来讲真的太方便了
• 能够嵌套式的书写（仁者见仁智者见智吧），我更喜欢 Stylus 的书写方式
• 提升了样式的复用性，避免重复书写许多公共样式
• 能够定义一些函数，这在移动端开发方面能够作媒体查询、适配等工做

HTML5/CSS3 新特性

简单回答了几个，不是太全面

HTML5

• 更多的语义化标签（header/nav/footer/section...）
• 音频、视频 API
• Canvas
• webSocket
• localStorage/sessionStorage

CSS3

• 新的选择器（属性、伪类、伪元素）
• 颜色新增 RGBA/HSLA 模式
• 过渡效果：transition，可实现动画效果
• 自定义动画
• 媒体查询
• 盒子模型

JavaScript 相关

谈一谈原型和原型链

首先，解释一下什么是原型：

每个 JS 对象在被建立的时候，就会与之关联另外一个对象，这个对象就是咱们所说的原型，每个对象都会从原型上继承属性

每个 JS 对象在被建立的时候，都具备一个属性：__proto__,这个属性会指向该对象的原型。要知道，原型也是一个对象，既然这样，那么他的__proto__ 指向 Object 的Object的原型

那么，Obeject 的原型的原型是什么？

答案应是：null

没法再往上层进行查找...这样经过__proto__向上一直查找所造成的链式结构，就是原型链。

浅克隆和深克隆

什么是浅克隆？什么是深克隆？

浅克隆中原始类型为值传递，对象类型仍未引用传递；深克隆中全部元素或者属性均可以进行彻底的复制，生成一个与原对象彻底不相干的对象，也就是新对象中的全部修改都不会在原对象中有所表现。

如何实现浅克隆？

• JS 内部实现了浅拷贝 Object.assign() ，第一个参数是最终复制的目标对象，后面的全部参数是咱们即将复制的原对象。（该方法适用于数组或者对象）

var newObj = Object.assign({},obj)
复制代码

• 原生 JS 实现

function shallowCopy(source) {
  let newSource = {};
  for(item in source) {
    if(source.hasOwnProperty(key)) {
      newSource[key] = source[key];
    }
  }
  return newSource;
}
复制代码

如何实现深克隆？

• 使用 JSON 序列化

newSource = JSON.parse(JSON.stringfy(source))
复制代码

可是该方法有一点的缺陷：

1. 会忽略 undefined
2. 会忽略 symbol
3. 不能序列化函数
4. 不能解决循环引用的对象

• 三方类库，相似 lodash 的 _.cloneDeep()
• 本身手动实现（简易版）

function deepClone(source) {
  if(typeof source !== 'object') {
    return '不是对象'；
  }
  let isArray = Array.isArray(source)
  let newSource = isArray ? [] : {}
  for(let key in source) {
    if(typeof source[key] !== 'object') {
      newSource[key] = source[key]
    }else{
      newSource[key] = deepClone(source[key])
    }
  }
  return newSource
}
复制代码

Vue 相关

Vue 中 created 和 mounted 有什么区别

creacted 没法获取 DOM 节点，可是 mounted 能够。二者均可以获取到 data 和 methods

React 相关

React 有哪些生命周期？

旧的生命周期：

加载阶段

• constructor()

加载的时候调用一次，能够初始化state

• getDefaultProps()

设置默认的props，也能够用dufaultProps设置组件的默认属性。

• getInitialState()

初始化state，能够直接在constructor中定义this.state

• componentWillMount()

组件加载时只调用，之后组件更新不调用，整个生命周期只调用一次，此时能够修改state

• render()

react最重要的步骤，建立虚拟dom，进行diff算法，更新dom树都在此进行

• componentDidMount()

组件渲染以后调用，只调用一次

更新阶段

• componentWillReceiveProps(nextProps)

组件加载时不调用，组建接受到新的 props 时调用

• shouldComponentUpdate(nextProps,nextState)

当组件接收到新的 props 或者 state 的时候，会调用，若是最终这个函数返回true，那么组件将会更新，不然不更新

• componentWillUpdate(nextProps,nextState)

只有在组件更新的时候调用，能够在此修改 state

• render()

建立虚拟 DOM，进行 diff 算法，渲染真实 DOM，更新 DOM 树都在此函数中进行

• componentDidUpdate()

仅在组件更新完成以后调用

卸载阶段

• componentWillUnmount()

组件渲染以后调用，只调用一次

新的生命周期

加载阶段

• constructor()

加载的时候调用一次，能够初始化 state，给事件绑定 this

• static getDerivedStateFromProps(props,state)

组件每次从新 render 的时候，能够在此函数中检查是否须要更新

• render()

建立虚拟 DOM，进行 diff 算法，渲染真实 DOM，更新 DOM 树都在此函数中进行

• componentDidMount()

组件渲染以后调用，只调用一次

更新阶段

• static getDerivedStateFromProps(props,state)

组件每次从新 render 的时候，能够在此函数中检查是否须要更新

• shouldComponentUpdate(nextProps,nextState)

当组件接收到新的 props 或者 state 的时候，会调用，若是最终这个函数返回true，那么组件将会更新，不然不更新

• render()

建立虚拟 DOM，进行 diff 算法，渲染真实 DOM，更新 DOM 树都在此函数中进行

• getSnapshotBeforeUpdate(prevProps,prevState)

触发时间: update发生的时候，在render以后，在组件dom渲染以前；返回一个值，做为componentDidUpdate的第三个参数；配合componentDidUpdate, 能够覆盖componentWillUpdate的全部用法

• componentDidUpdate()

组件加载时不调用，组件更新完成后调用

卸载阶段

• componentWillUnmount()

组件渲染以后调用，只调用一次

网络相关（HTTP）

HTTP2.0 作了哪些升级？

• 浏览器对于同一个域名下的请求数量是有限制的，HTTP2.0 引入了多路复用的技术，解决了此问题。
• 引入了新的编码机制，全部传输的数据都会被分割，并采用二进制格式编码
• Header 的压缩，减小了 header 的大小，而且还会在两端创建并维护索引表，用于记录出现过的 header，在之后的传输过程当中就能够快速寻找到对应的值
• 服务端 push，服务端能够在客户端某个请求后，主动向客户端推送其余资源

今天的两场面试体验都很好，UPUPUP~明天继续加油