一般小公司的面试环节，比较关心框架的熟练程度，以及独立开发组件的能力
但大厂通常有五轮以上的面试，而且对js基础语法很是看重
于是我总结了一些关于js基础的面试对话，有的当时没答上来，就在总结的时候就加了点料
忽然觉得又该读一遍犀牛书了...
一、面试
问：你知道js是由哪三部分构成的么？
答：有js的语法核心ECMAScript，还有文档对象模型DOM，以及浏览器对象模型BOM。
问：那你觉得dom的作用是什么？
答：喵喵喵？？？
问：我换一个问法吧，如果没有DOM，会对开发有什么影响？
答：那根本没法开发啊。前端的主要工作有两个，一个是高保真的实现UI设计稿，一个是高效率的从后端获取数据并渲染到页面上。如果没有DOM，就不能渲染页面了。
问：但实际上所谓的渲染页面，就是返回一堆html，你觉得html和DOM有区别么？
答：html说穿了就是一个字符串，浏览器解析html并抽象成一个树结构的文档对象，以方便js操作，这个文档对象这就是dom。
问：好的，现在我有一个ul标签，里面有5个li标签，怎样才能在最后一个li标签后再插入一个li标签？
答：用getElementById或者getElementsByClassName之类的方法获取ul节点，然后用append()插入li标签。
问：append()是jQuery的方法吧，如果不用jQuery呢？
答：啊咧？append()是jQuery的方法么？
答：哦哦，那就用appendChild()方法，而且得先用createElement()创建标签。
问：如果要加在第一个li前面呢？
答：那就用prepend()
问：嗯？
答：哎呀，prepend()也是jQuery的方法，应该用prependChild()
问：喵喵喵？？你特么在逗我？有这个方法吗？
答：开个玩笑开个玩笑，其实是insertBefore()方法。
问：没错，insertBefore()可以在目标元素前面插入一个新元素，如果要把元素放在目标元素之后呢？
答：emmmmm...insertAfter()?
问：js中并没有这个方法！再好好想想？
答：还是用insertBefore()方法，第二个参数传入目标元素的下一个元素，也就是targetElement.nextSibling
问：dom操作挺熟练哈，工作中经常这么搞么？
答：（擦一擦汗）没有没有，工作中vue用的比较多，数据驱动，不怎么关心DOM
问：常用vue，那你一定知道虚拟DOM了吧？说说看呢
答：每一次DOM的变动，浏览器就得重新渲染一次页面。为了提高页面的性能，就应该尽量减少DOM的变更次数。现代框架通常会用一个对象来保存目标DOM节点的标签名、属性、内容、子节点等信息，也就是用js的对象结构来表示DOM树的结构，这个js对象就是虚拟DOM。当状态变更的时候，js会先更新虚拟DOM，再通过diff算法比较虚拟DOM和真实DOM的差异，找出最少变更的方案，最后一并更新到真实DOM中。
问：（邪魅一笑）所以使用虚拟DOM的主要目的是为了提高性能是吧？
答：对啊，vue的优点之一就是轻量化，渲染速度快，就是因为采用了虚拟DOM。
问：但是虚拟DOM最终同样也是操作真实DOM，为什么会更快呢？
答：如果全程操作真实DOM的话，任何一个状态的变更，都会导致页面重绘，这个环节就非常耗性能了。采用虚拟DOM的话，就能避免这个问题。而且如果diff算法效率高的话，总是能用最少的改动来更新DOM。总的来说，就是不会出现频繁的、大面积的DOM操作，从而提升了页面性能。
问：让我们进入下一个问题...
二、注释
1.DOM：DocumentObjectModel文档对象模型
2.BOM：BrowserObjectModel浏览器对象模型
3.insertBefore()方法：该方法需要父元素parentElement调用，并接收两个参数，第一个参数是需要插入的元素newElement，第二个是目标元素targetElement。
parentElement.insertBefore(newElement,targetElement)