前端面试真实题目分享（一）

1.vue中为什么需要虚拟dom（vnode），那为什么不直接操作真实DOM呢

• vue 的更新机制 (差异化更新) 对比新旧虚拟dom, 找出不同的部分, 进行更新视图

  1.真实的dom太复杂, 对比起来性能太差，虚拟dom使用js对象的方式,模拟真实的dom结构{type:‘div’,className:‘box’,children:[]} 属性的量大大的减少了, 没有真实dom的那么多无效的属性, 对比起来性能高很多。

  2.直接操作DOM触发多次浏览器重绘及回流,会频繁的让解析器进行DOM结点的计算。那么用虚拟DOM可以让数据变动带来的节点变化一次计算完毕，不需要多次进行DOM节点的计算，减少了页面的回流与重绘次数，提高页面渲染速度,降低内存损耗。

2.vue中父组件和子组件在执行时的生命周期是什么？

• 初始化与挂载

 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

当父组件进行到beforeMount阶段时候，开始解析模板，就发现需要去构建子组件,所以会触发子组件的生命周期，当子组件执行到mounted时,子组件已经挂载到了父组件上，父组件随之进入到自身的mounted阶段,将自身挂载

• 更新

  父beforeUpdate->子beforeUpdate->子updated->父updated
  

• 销毁

  父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
  

3.你对文档流的理解？

• 什么是文档流与文本流

  • 文本流,简单来说就是元素内部的一系列的字符的排列规则。

  • 文档流指的是HTML中元素在计算布局排版的过程中,所有处于文档流中的元素会自动的从左到右(非块级元素),从上到下(块级元素)的排列规则。

• 元素在排版中的定位类型有：

  • 文档流:块级格式化的块级盒子, 行内格式化的行内盒子以及相对定位的块级盒子和行内盒子
  • 浮动(float)
  • 绝对定位(position:absolute/fixed)

• 脱离文档流是什么？哪些情况会？

  • 脱离文档流的方法有浮动(float)和绝对定位(poistion:absolute/fixed)。

  • 脱离文档流,指的是元素脱离正常元素的布局排版规则,其他处于文档流中的盒子在计算布局排版时,会自动无视已脱离文档流的元素来进行定位。

• 浮动和定位脱离文档流的区别？

  • 浮动会使元素脱离文档流,但是不会脱离文本流,其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，

  • 绝对定位会使元素脱离文档流,同时也会脱离文本流,其他盒子与其他盒子内的文本都会无视它,不让位置，保持原样

  • 绝对定位是不占位置的，它会像PS的图层一样单独做一层，至于第几层你可以通过z-index:这个属性来设置。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。当对象超出浏览器窗口，会显示滚动条。