前端面試 | 掘金技術徵文

輕劍快馬發表於2018-09-22

分享下最近幾天面試遇到的一些題目,希望對你有幫助

ReactsetState 是同步還是非同步的,為什麼?

有可能是非同步的,因為元件的 propsstate 可能是非同步更新的, React 可以將多個 setState 呼叫合併成一個呼叫來提高效能,可以向 setState 傳入一個函式,第一個引數為應用先前的 state,第二個引數為此次更新應用的 props 的函式來呼叫它。

Vue 例項生成時做了什麼?

首先會合並選項生成最終選項$options,然後初始化代理,初始化生命週期,初始化事件,初始化渲染函式,呼叫生命週期函式'beforeCreate',初始化Injections,初始化 State, 初始化Provide,呼叫生命週期函式'created',最後如果有el屬性,則呼叫vm.$mount方法掛載 vm,把模板渲染成最終的 DOM。 節點,接下來就是渲染的過程了init.js

說說Vue的響應式原理

Vue 會遍歷 data 選項中所有的屬性,使用 Object.defineProperty 把這些屬性轉為 getter/setter,每個元件例項都有相應的 watcher 例項物件,它會在元件渲染的過程中把屬性記錄為依賴,之後當依賴項的 setter 被呼叫時,會通知 watcher 重新計算,從而致使它關聯的元件得以更新。

前端面試 | 掘金技術徵文

Vue 裡面的'虛擬DOM'是什麼?

'虛擬DOM' 是由Vue元件樹建立起來的整個VNode樹的稱呼。VNode 指的是一個包含如何渲染DOM節點資訊的例項物件,這些資訊會告訴 Vue 頁面上需要渲染什麼樣的節點,及其子節點,Vue 通過建立一個虛擬 DOM 對真實 DOM 發生的變化保持追蹤。 原始碼

Vue 是如何監聽物件變化的?

Vue 重新包裝了一組觀察陣列的變異方法(並沒有修改原生Array原型上的方法), 所以它們也將會觸發檢視更新,這些方法如下: push()pop()shift()unshift()splice()sort()reverse()

陣列更新檢測

Node.jsstream 流有幾種型別

Node.js 中有四種基本的流型別:

  • Writable - 可寫入資料的流
  • Readable - 可讀取資料的流
  • Duplex - 可讀又可寫的流
  • Transform - 在讀寫過程中可以修改或轉換資料的 Duplex 流。

檢視帶有'xxx'關鍵字的程式的命令

ps aux | grep xxx | grep -v grep

後面的 grep -v grep 是為了不顯示當前查詢程式。

事件代理是怎麼回事?

事件代理指的是將需要繫結在子元素上的事件繫結到子元素的同一父元素上,使用事件委託可以提高頁面效能,以及可以監聽新生成的子元素上的事件。

說說函式防抖和節流的作用和區別

頁面上一些事件如 resizescrollmousedown等 可能會頻繁的觸發,函式防抖和節流都是為了限制函式的呼叫次數,防抖是指規定一個延遲時間,不管事件觸發多少次,函式都將在規定時間結束後再呼叫。節流指的是設定一個時間作為函式的呼叫頻率,每隔一定時間才呼叫函式。

頁面上定位分別為float: left;position: relative; 和預設定位的 ABC 三個元素的展示順序是怎樣的

順序為 BAC, 使用 position: relative; 定位的元素會在最上面,然後是使用 float 定位的元素,最下面的是正常文件流中的元素。

See the Pen BOEyLG by 輕劍快馬 (@xrr2016) on CodePen.

判斷網頁是否執行在微信環境下

/micromessenger/.test(navigator.userAgent.toLowerCase())

說說瀏覽器快取機制

瀏覽器每次發起請求時,都會從瀏覽器快取中查詢該請求的結果以及快取標識。快取分為強快取和協商快取,強制快取優先於協商快取進行,若強制快取ExpiresCache-Control生效則直接使用強快取,若不生效則進行協商快取Last-Modified, If-Modified-SinceEtag, If-None-Match,協商快取由伺服器決定是否使用快取,若協商快取失效,那麼代表該請求的快取失效,重新獲取請求結果,再存入瀏覽器快取中,生效則返回304,繼續使用快取。如果WEB應用啟用了Service Worker,它會攔截和響應網路請求,如果請求結果存在 Service Worker 的快取中那麼直接使用 Service Worker 中的結果,它的優先順序是最高的。

說說對PWA的瞭解

PWA 是一種開發WEB應用新的形式,它混合了多項技術,能夠讓 WEB 應用的功能類似於原生移動應用,它具有離線使用、推送訊息、傳送通知、從桌面啟動等特點,所有的資料交換必須要通過 HTTPS 連線來執行,是為了WEB開發的趨勢。

PWA

用CSS建立一個固定比例的盒子

將盒子的高度設為0,將盒子的padding-top的值設為一個百分比的數值,通過 padding-top 撐高 盒子的高度,盒子高度值為盒子父元素寬度的百分比值。

See the Pen 等寬高比 by 輕劍快馬 (@xrr2016) on CodePen.

Js物件的凍結與密封分別是什麼

使用 Object.freeze() 凍結一個物件,使得物件自身的所有屬性都不可能以任何方式被修改;使用 Object.seal() 密封一個物件,阻止向物件新增新屬性並將所有現有屬性標記為不可配置,當前屬性的值只要可寫就可以改變。

juejin.im/post/5b923a…

相關文章