6個常見的前端面試題

display:none和visibility:hidden都可以實現元素在視窗的不可見，display:none不會保留元素的位置，結構發生了改變，所以觸發了回流和重繪；visibility:hidden會保留元素的位置，結構沒有發生改變，所以只是觸發了重繪。

new的過程主要完成了以下操作

完成以上步驟，我們可以自己模擬乙個new

通過new建立的物件和通過字面量建立的物件本質上是一樣的，字面量內部也是使用new來完成的。但是通過字面量的方式比較簡單，也不用呼叫建構函式，效能較好，所以推薦使用字面量的方式。

前端路由本質就是監聽 url 的變化，然後匹配路由規則，顯示相應的頁面，並且無須重新整理頁面。目前前端使用的路由就只有兩種實現方式：hash 模式和history 模式。

hash 模式

hash模式會在請求的url後拼接#，當 # 後面的雜湊值發生變化時，可以通過 hashchange 事件來監聽到 url 的變化，從而進行跳轉頁面，並且無論雜湊值如何變化，服務端接收到的 url 請求永遠是不包含#的url。使用window.location.hash可以讀取#後的內容。

history 模式

history 模式是 html5 新推出的功能，主要使用 history.pushstate 和 history.replacestate 來改變url。通過 history 模式改變 url 同樣不會引起頁面的重新整理，只會更新瀏覽器的歷史記錄。

當使用者做出瀏覽器動作時，比如history.back()、history.forward()、history.go()，會觸發 popstate 事件，在popstate事件裡可以拿到路由資訊，從而進行頁面跳轉。

兩種模式對比

優點：

缺點：

debug不太方便

使用場景：

分布式應用：通過高效的並行 i/o 使用已有的資料

工具類應用：海量的工具，小到前端壓縮部署（如 grunt），大到桌面圖形介面應用程式

遊戲類應用：遊戲領域對實時和併發有很高的要求（如網易的 pomelo 框架）

總而言之，node適合運用在高併發、i/o密集、少量業務邏輯的場景。

vue在切換頁面的時候會將原來的元件登出掉然後渲染新的元件，看似一樣實則每次開啟的都是新頁面。如果我們需要在頁面切換的時候，不讓他重新渲染，就可以使用 keep-alive 元件包裹需要儲存的元件。

對於 keep-alive 元件來說，它擁有兩個獨有的生命週期鉤子函式，分別為 activated 和 deactivated 。

用 keep-alive 包裹的元件在切換時不會進行銷毀，而是快取到記憶體中並執行 deactivated 鉤子函式，根據快取渲染後會執行 actived 鉤子函式。

假設乙個頁面比較長，每次切換重新渲染的話都要在頁面頂端開始瀏覽，這對使用者來說不太友好。如果我們使用keep-alive每次切換頁面前將狀態存到記憶體中，然後返回時再從記憶體中讀取，每次開啟都是上次瀏覽的地方，相對體驗比較好

react.createelement():jsx 語法就是用 react.createelement()來構建 react 元素的。它接受三個引數，第乙個引數可以是乙個標籤名。如 div、span，或者 react 元件。第二個引數為傳入的屬性。第三個以及之後的引數，皆作為元件的子元件。

react.cloneelement()與 react.createelement()相似，不同的是它傳入的第乙個引數是乙個 react 元素，而不是標籤名或元件。新新增的屬性會併入原有的屬性，傳入到返回的新元素中，而舊的子元素將被替換，舊元素的key和ref會保留。