（1）input 中如何監聽值的變化？
Answer：因為input的onchange事件是要改變值之后失去焦點才觸發，並不能實現實時監聽，所以存在3種情況，第一種是只需要失去焦點時監聽，那就用onchange，第二種是js改變值，這時候可以在改變值的方法里手動觸發，第三種則是實時監聽，可以用keypress、keydown、keyup等事件監聽。
（2）什么是事件冒泡和事件捕獲，區別是什么？
Answer：事件冒泡是子元素向父元素傳遞事件，而事件捕獲是父元素向子元素傳遞事件（ps.事件代理/事件委托：直接在父元素寫事件，可以避免遍歷子節點的操作，優化性能），事件觸發的順序是相反的。阻止：event.stopPropagation();
（3）什么是跨域，如何處理跨域？
Answer：一個域下的文檔或腳本試圖去請求另一個域下的資源。（協議，域名，端口，三者有一不一樣，就是跨域）。
解決方法：1.jsonp（動態創建srcipt標簽請求靜態資源服務器的資源，缺點是只能實現get請求）；2.document.domain + iframe跨域（僅限主域相同，子域不同的跨域應用場景。實現原理：兩個頁面都通過js強制設置document.domain為基礎主域，實現同域）；3.location.hash + iframe（a欲與b跨域相互通信，通過中間頁c來實現。 三個頁面，不同域之間利用iframe的location.hash傳值，相同域之間直接js訪問來通信。）；4.window.name + iframe跨域（name值在不同的頁面、甚至不同域名加載后依舊存在，並且可以支持非常長的 name 值（2MB））；5.postMessage跨域（postMessage是HTML5 XMLHttpRequest Level 2中的API，postMessage(data,origin)方法接受兩個參數，data最好為字符串，origin是協議+主機+端口號，也可以設置為"*"，表示可以傳遞給任意窗口，如果要指定和當前窗口同源的話設置為"/"）；6.跨域資源共享（CORS）（普通跨域請求：只服務端設置Access-Control-Allow-Origin即可，前端無須設置，若要帶cookie請求：前后端都需要設置。）；6.nginx代理跨域；7.nodejs中間件代理跨域；8.WebSocket協議跨域。
（4）什么是節流與防抖，如何實現
Answer：前端中存在的一種因為用戶行為會頻繁觸發的事件，因為對DOM的操作、資源加載等耗費性能的處理，容易導致頁面卡頓甚至瀏覽器崩潰。為了解決這類需求，產生了函數節流與防抖。節流就是預定一個函數，只有在大於等於執行周期時才執行，周期內調用不執行（比如窗口調整，頁面滾動，搶購瘋狂點擊）。防抖就是函數需要頻繁觸發時，只有足夠空閑才會執行一次（比如實時搜索，拖拽）。
（5）網站的性能優化
Answer：1、減少http訪問請求，合並css，js和圖片（精靈圖）等提高訪問性能。2、靜態資源使用瀏覽器緩存。3、壓縮文件減少傳輸數據量。4、減少cookie傳播，不必要的數據則不要寫入cookie。5、使用CDN（內容分發網絡）加速（他可以將數據緩存到距離用戶最近的位置，用戶可以盡快獲取數據，數據中心也可以減輕壓力，從而提高訪問速度）。6、使用代理服務器，在代理服務器上緩存部分熱點信息，用戶可以直接從代理服務器獲取數據，從而加快web訪問速度；另外，使用反向代理可以實現負載均衡，提高系統整體處理能力，提高高並發網站的性能【反向代理：用戶不知道從哪來的數據，但是服務正常提供。正向代理：用戶托一個服務器幫忙發送請求給真正要請求的服務器】。7、代碼優化（多線程，資源復用，垃圾回收……好像是后端的，前端就代碼簡化，去掉無用代碼，邏輯循環清晰等等吧）。
（6）瀏覽器緩存原理
Answer：發起請求的過程是：發起網絡請求->后端處理->瀏覽器響應，而瀏覽器緩存則可以直接使用緩存不發起請求，或者發起請求后后端存儲的數據和前端一致，則不必再把數據回傳，減少響應數據。那么瀏覽器如何確定是否該緩存某個資源呢？它發起請求並拿到請求結果后，將請求結果和緩存標識存入瀏覽器緩存（瀏覽器對於緩存的處理是根據第一次請求資源時返回的響應頭來確定的），然后每次發起請求都會先去瀏覽器緩存中查找該請求的結果和緩存表示。在強緩存中可以設置HTTP Header的Expires和Cacht-Control規定緩存過期時間和命中強緩存時間。而協商緩存就是瀏覽器拿着緩存標識去請求服務端，服務端決定要不要用緩存。
PS：緩存機制：強制緩存優先於協商緩存進行，若強制緩存(Expires和Cache-Control)生效則直接使用緩存，若不生效則進行協商緩存(Last-Modified / If-Modified-Since和Etag / If-None-Match)，協商緩存由服務器決定是否使用緩存，若協商緩存失效，那么代表該請求的緩存失效，返回200，重新返回資源和緩存標識，再存入瀏覽器緩存中；生效則返回304，繼續使用緩存。如果啥緩存機制都沒設置，那么瀏覽器會采用一個啟發式的算法，通常會取響應頭中的 Date 減去 Last-Modified 值的 10% 作為緩存時間。
（7）當輸入 URL 時，整個過程是什么樣的
Answer：
- 域名解析（為了將消息從你的PC上傳到服務器上，需要用到1P協議、ARP協議和0SPF協議）
- 發起TCP的3次握手
- 建立TCP連接后發起http請求
- 服務器響應http請求
- 瀏覽器解析htm代碼,並請求html代碼中的資源(如js、css、圖片等）
- 斷開TCP連接
- 瀏覽器對頁面進行渲染
（8）React 的生命周期
Answer：
componentWillMount// 服務端渲染時調用，在整個生命周期中只會調用一次.
componentDidMount// 初始化：組件第一次渲染完成，dom節點已生成。可以在這里請求ajax返回數據setState后，組件會重新渲染。整個生命周期中只會調用一次.
componentWillUnmount// 組件銷毀后調用，多用於清理內存空間.
componentWillReceiveProps(newProps)// 當從父類接收到新的 props 前調用,newProps就是父級最新傳入的數據,對比this.props 和 nextProps 將nextProps的state改為當前的state，頁面可以重新渲染.
shouldComponentUpdate// 組件接受到新屬性、新狀態調用.返回true則組件正常運行,返回false則阻止render調用，后面的函數不會被繼續執行。必須return.
componentWillUpdate(newProps, nextState, newContext) // 組件更新前調用.shouldComponentUpdate返回true后，組件進入重新渲染的進程,此時進入componentWillUpdate中，也可以同樣拿到nextProps和nextState.
componentDidUpdate(prevProps, prevState, Snapshot)// 組件更新后調用.在這里可以拿到prevProps和prevState，也就是更新前的props和state.
render() // 渲染組件
（9）React 中的 setState
Answer：state的更新可能是異步的，因此如果要同步更新，可以添加回調函數。
（10）React 中函數組件和普通組件有什么區別
Answer：函數組件是個純函數，接受一個props對象，返回一個react元素，沒有生命周期和狀態state（所以也叫無狀態組件）；而類組件需要繼承React.Component並且創建render函數返回react元素，有生命周期和狀態state。
（11）什么是 render prop 的組件
Answer：render prop是React組件之間使用一個值為函數的prop在組件中共享代碼的簡單技術。他與高階組件一樣，都是React組件的一種設計模式，用於方法重用，因此更多用於容器型組件，渲染邏輯由調用者決定。
（12）fiber 是什么
Answer：React Fiber是對核心算法的一次重新實現。破解JavaScript中同步操作時間過長的方法：分片。React Fiber把更新過程碎片化，每執行完一段更新過程，就把控制權交還給React負責任務協調的模塊，看看有沒有其他緊急任務要做，如果沒有就繼續去更新，如果有緊急任務，那就去做緊急任務。維護每一個分片的數據結構，就是Fiber。
（13）關於模塊分包
Answer：分包原則：按復用度，抽象度，穩定度分包。 webpack.config.js中添加配置
（14）有沒有接觸過 node，你認為 node 怎么樣
Answer：沒接觸過。
（15）node 引入一個模塊的過程是什么
Answer：
（16）https 有什么用，原理是什么
Answer：https是在http上建立ssl加密層，並對數據傳輸進行加密，是http協議的安全版。它的主要作用是對數據進行加密，並建立一個信息安全通道，保證傳輸過程中的數據安全，以及對網站服務器進行真實身份認證。HTTPS並不是一種新的協議，在通信接口使用了SSL和TLS協議而已。HTTP通常直接和TCP通信，而HTTPS中HTTP先和SSL通信，再由SSL和TCP進行通信。（SSL協議並不是一個應用層協議，它是介於應用層和傳輸層協議之間的一個安全協議，https采用了它的兩種加密方式的混合加密）
（17）https 如何保證證書是可信任的
Answer：在菜單選項中查看證書功能。這信息可能是在頁面信息中的文件屬性或安全選項中。
（18）amd 和 cmd 的區別，commonjs，esmodule
Answer：
（19）什么是函數柯力化
Answer：
（20）virtual DOM 是什么以及是如何實現的
Answer：
（21）dom diff 是什么
Answer：
（22）get 和 post 請求
Answer：
（23）如何進行 CI 以及測試的，是否使用 ESLint
Answer：
（24）Accept 頭部的作用什么，如果服務器不支持怎么辦
Answer：
三面大部分都是一些主觀問題：
才工作一年為什么就想着換工作
你遇到過什么有挑戰的事情嗎 (這個一定得想好呀，沒有也得憋出來一個)
你對未來的工作有什么樣的期待