根據我的面試經歷，一般小公司的面試環節，比較關心框架的熟練程度，以及獨立開發元件的能力
但大廠通常有五輪以上的面試，而且對 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)