前端开发面试题

本文章仅仅用作记录面试过程中被问及却没有回答上来，或者回答的不清晰的面试题。

html部分

html语义化是什么？为什么要语义化？

答案：1.语义化就是根据内容的结构化，选择合适的标签，便于开发者阅读和写出更优雅代码的同时，让浏览器的爬虫和机器很好的解析。

2.为了在没有css的情况下，也买你也能呈现处很好的内容结构，代码结构；为了用户体验：例如title,alt用于解释名字或解释图片信息，label标签的活用；有利于seo：和搜索引擎建立良好的沟通，有助于爬虫抓取更多有效信息，爬虫依赖于标签来确定上下文和各个关键字的权重；方便其他设备解析；便于团队开发和维护，语义化更具可读性，可以减少差异化。

hhtml5新增了哪些标签，css3新增了什么？

答案：html5新增标签有语义化标签：header,nav,article,aside,section,figure,details,embed,footer;媒体标签:video,audio,另外还有canvas等等。css3新增了border-color,border-image,border-radius,box-shadow;background-size,background-origin,background-clip,文字阴影，自动换行，动画效果transform,animation,过度效果:transition。

什么是BFC?它有什么作用？

回答：BFC指的就是块级格式化上下文，它是一个单独的渲染区域，只有block-level box参与，它规定了内部的block-level box如何布局，并且与这个区域外部毫不相干

规则：内部的box会在垂直方向，一个接一个的放置；box垂直方向的距离有margin决定，属于同一个bfc的相邻box的margin会发生重叠；每个格子的margin box的左边，与包含块的border box的左边相接触，及时存在浮动也是如此；bfc的区域不会与float box重叠；

创建BFC：float的值不是none,position的值不是static或者relative,display的值是inline-block,tabel-cell,flex,tabel-caption或者inline-flex,overflow的值不是visible。

作用：1.利用bfc避免margin重置；2.自适应两栏布局；3.清除浮动；

怎么清除浮动？

回答：1.为父元素添加overflow:hidden(目的是触发bfc);2.添加一个标签，并设置clear:both（缺点是语义化差）;3.使用after伪类清除浮动（低版本不支持）；4.使用before和after双伪类清除

浏览运行机制

重排和重绘分别是什么？

回答：重排：也叫回流，当渲染树的一部分必须更新并且节点的尺寸发生了变化，浏览器会是渲染树中受到影响的部分失效，并重新构造渲染树。

重绘：实在一个元素的外观被改动所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，是元素呈现处新的外观，比如改变某个元素的背景颜色/文字颜色/边框颜色等等

触发重排的方式：1.添加或删除可见的dom;2.元素的位置改变；3.元素的尺寸改变（外边距，内边距，边框厚度，宽高，等几何属性）；4.页面渲染初始化；5.浏览器窗口尺寸改变；6.获取某些属性时也会重排，它会导致队列刷新，这些属性包括：offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle() (currentStyle in IE)。

优化：

js基础

。。。

框架部分

vue部分

什么是虚拟dom?

回答：真是dom在面对频繁修改样式和结构的场景下，会频繁的触发回流和重绘，使得性能开销巨大，而vue和react中使用虚拟dom，是建立一个和dom树对应的虚拟dom对象（js对象），以对象嵌套的方式来表示dom树，那么每次dom的更改就变成了js对象属性的更改，这样一来就能查找js对象属性的变化，要比查询dom树的性能开销要小。

优缺点：优点：1.保证性能下限；2.无需手动操作dom;3.跨平台

缺点：无法进行极致优化：虽然虚拟dom+合理的优化，足以应对绝大部分应用的性能需求，但在一下性能要求极高的应用中，虚拟dom无法进行针对性的极致优化。

Proxy 与 Object.defineProperty 优劣对比

回答：

proxy可以直接监听对象而非属性；

proxy可以直接监听数组变化；

proxy有多达13种拦截方法，不限于apply,ownkeys,deleteProperty,has等等，这是object.defineProperty不具备的；

proxy返回的是一个新对象，我们可以只操作新的对象达到目的，而defineProperty只能遍历对象属性直接修改；

proxy作为新便准将受到到浏览器厂商的重点持续的性能优化，

object.defineProperty的优势：

兼容性好，支持ie9，而proxy存在浏览器兼容问题，而且无法使用polyfill磨平

vue是如何实现对象和数组的监听

vue2是通过遍历数组和递归遍历对象，object。difinePropety也能对对象和数组进行监听。