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

时间:2021-07-24 17:38:17

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

但大厂通常有五轮以上的面试,而且对 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)