前端面试(原生js篇) - DOM

根据我的面试经历，一般小公司的面试环节，比较关心框架的熟练程度，以及独立开发组件的能力

但大厂通常有五轮以上的面试，而且对 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：Document Object Model  文档对象模型

2. BOM：Browser Object Model  浏览器对象模型

3. insertBefore() 方法：该方法需要父元素 parentElement 调用，并接收两个参数，第一个参数是需要插入的元素 newElement，第二个是目标元素 targetElement。

parentElement.insertBefore(newElement, targetElement)