根据我的面试经历,一般小公司的面试环节,比较关心框架的熟练程度,以及独立开发组件的能力
但大厂通常有五轮以上的面试,而且对 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)