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

根據個人面試經歷，通常小公司的面試環節，比較關心框架的熟練程度，以及獨立開發組件的能力

但大廠一般有五輪以上的面試，並且對 js 基礎語法非常看重

因而我總結了一些關於 js 基礎的面試對話，有的當時沒答上來，就在總結的時候就加了點料

突然以爲又該讀一遍犀牛書了...

 

1、面試對話

問：你知道 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 操做，從而提高了頁面性能。

問：讓咱們進入下一個問題...

  

2、註釋 

 1. DOM：Document Object Model  文檔對象模型

 2. BOM：Browser Object Model  瀏覽器對象模型

 3. insertBefore() 方法：該方法須要父元素 parentElement 調用，並接收兩個參數，第一個參數是須要插入的元素 newElement，第二個是目標元素 targetElement。

parentElement.insertBefore(newElement, targetElement)