# 說明
前端高薪面試，知識框架基于愛創課堂張容銘老師[《前端程序員面試秘籍》](https://item.jd.com/12489702.html)著作展開，參考和引用網上大量網友面試經驗，結合作者多年的前端工作經歷提煉而成。旨在幫助謀求前端職位的碼農門，拿到高薪Offer。
作者：達魔老祖，偏重面試的實用性。
2016年創辦《大象課堂》，旨在通過訓練，提高大家的公眾表達能力。
2018年創辦《[達魔學院](https://edaxiang.ke.qq.com/#category=-1&tab=3)》，旨在通過訓練，提升大家的核心技術競爭力。
- 說明
- 提取關鍵詞考試
- 大廠面試題匯總
- 今日頭條
- 有贊
- 網易
- 阿里
- 滴滴
- 挖財
- 廬江
- 餓了么
- 攜程
- 喜馬拉雅
- 兌吧
- 微醫
- 寺庫
- 寶寶樹
- 海康威視
- 蘑菇街
- 酷家樂
- 百分點
- 海風教育
- Vue.js
- 0.前言有話說
- 00.解決方案匯總
- 高頻面試題
- 1.什么是MVVM框架？它使用哪些場景？
- 4.如何獲取傳過來的動態參數？
- 14.Vue.js雙向綁定原理是什么？
- 44.如何在v-for循環中實現v-model數據的雙向綁定？
- 27.ref屬性有什么作用？
- 42.如何檢測對象變化？
- 40.什么是數據丟失？
- 41.如何檢測數據變化？
- vue中key值的作用
- 2.active-class是哪個組件的屬性？
- 3.如何定義router-link組件的屬性？
- 5.vue-router有哪幾種導航鉤子？
- 6.mint-ui是什么? 如何使用？
- 7.v-model是什么？有什么作用？
- 8.Vue.js中標簽如何綁定事件？
- 9.Vuex是什么？如何使用？在哪些功能場景中使用它？
- 10.如何實現自定義指令？它有哪些鉤子函數？還有哪些鉤子函數參數？
- 11.至少說出Vue.js中4中指令和他們的用法？
- 12.vue-router是什么？它有哪些組件？
- 13.導航鉤子有哪些？他們有哪些參數？
- 15.請詳細說明你對Vue.js生命周期的理解。
- 16.請描述封裝Vue組件的作用工程。
- 17.你是怎樣認識Vuex的？
- 18.vue-loader是什么？它的用途有哪些？
- 19.請說出vue.cli項目的src目錄中每個文件夾和文件的用法。
- 20.在vue.cli中怎樣使用自定義組件？在使用過程中你遇到過哪些問題？
- 21.談談你對iVue.js的template編譯的理解。
- 22.說一下Vue.js中的MVVM模式。
- 23.v-show指令和v-if指令的區別是什么？
- 24.如何讓CSS旨在當前組件中起作用？
- 25.如何創建Vue.js組件？
- 26.如何實現路由嵌套？如何進行頁面跳轉？
- 28.Vue.js是什么？
- 29.描述Vue.js的一些 特性？
- 30.描述Vue.js的特點。
- 31.在Vue.js中如何綁定事件？
- 新文檔
- 33.axios是什么？如何使用它？
- 新文檔
- 35.sass是什么？如何在Vue中安裝和使用？
- 36.如何在Vue.js中循環插入圖片？
- 37.如何為選框元素自定義綁定數據值？
- 38.什么情況下會產生片段實例？
- 39.實現多個根據不同條件顯示不同文字的方法？
- 43.說一下Vue.js頁面閃爍{{message}}.
- 45.如何解決數據層級結構太深的問題？
- 46.Vue.js文件中的樣式覆蓋不生效的問題如何解決？
- 47.在Vue.js開發環境下調用接口，如何避免跨域？
- React
- 0.前言有話說
- 高頻面試題
- 17.React的diff算法原理是什么？
- 6.React中的key是什么？為什么他們重要？
- 4.什么是React的refs? 為什么他們很重要？
- 14.setState方法的第二個參數有什么用？使用它的目的是什么？
- 19.傳入setState函數的第二個參數的作用是什么？
- 8.在哪個生命周期中你會發出Ajax請求？為什么？
- 9.shouldComponentUpdate有什么用？為什么它很重要？
- 1.當調用setState的時候，發生了什么操作？
- 2.在React中元素（Element）和組件（Component）有什么區別？
- 3.什么時候使用類組件（Class Component）?什么時候使用功能組件（Functional Component）?
- 7.約束性組件（controlled component）與非約束性組件(uncontrolled component)有什么區別？
- 10.如何用React構建（build）生產模式？
- 11.為什么使用React.children.map(props.children,()=>) 而不是props.children.map(()=>)?
- 12.描述事件在React中的處理方式？
- 13.createElement和cloneElement有什么區別？
- 15.這段代碼有什么問題？
- 16.請說出React從ES5編程規范到ES6編程規范過程中的幾點改變？
- 18.概述一下React中的事件處理邏輯？
- 20.React和Vue.js的相似性和差異性是什么？
- 21.生命周期調用方法的順序是什么？
- 22.使用狀態要注意哪些事情？
- 23.說說React組件開發中關于作用域的常見問題？
- 24.在Redux中使用Action要注意哪些問題？
- 25.在Reducer文件里，對于返回的結果，要注意哪些問題？
- 26.如何使用4.0版本的React Router？
- 29.React-Router有幾種形式？
- 30.在使用React Router時，如何獲取當前頁面的路由或瀏覽器中地址欄中的地址？
- 網絡安全
- 1.SQL注入是什么？如何防護？
- 2.XSS攻擊是什么？如何防護？
- 3.如何避免cookie信息被盜取？
- 4.XSS攻擊與CSRF攻擊有什么區別？
- 5.如何防范CSRF攻擊？
- 6.你所了解的Web攻擊技術有哪些？
- 性能優化
- 1.談談你對重構的理解？
- 2.如果一個頁面上有大量的突破（大型電商網站）,網頁加載很慢，可以用哪些方法優化這些圖片的加載，從而提升用戶體驗？
- 3.談談性能優化問題。
- 4.移動端性能如何優化？
- 5.如何對網站的文件進行優化？
- 6.請說出幾種縮短頁面加載時間的方法。
- 7.哪些方法可以提升網站前端性能？
- 8.你知道哪些優化性能的方法？
- 9.列舉你知道的Web性能優化的方法。
- 10.平時你是如何對代碼進行性能優化的？
- 11.針對CSS，如何優化性能？
- 12.針對HTML，如何優化性能？
- 13.針對JavaScript，如何優化性能？
- 14.如何優化服務器端？
- 15.如何優化服務器端的接口？
- 16.如何優化腳本的執行？
- 17.如何優化渲染？
- 18.如何設置DNS緩存？
- 19.什么時候出現資源訪問失敗？
- 20.jQuery性能優化如何做？
- 21.哪些方法能提升移動端CSS3動畫體驗？
- 移動端
- 1.在移動端，點擊穿透是什么？
- 2.如何實現自適應布局？
- 3.在移動端（Android、iOS）怎么做好用戶體驗？
- 4.如何解決Android瀏覽器查看背景圖模糊的問題？
- 5.如何解決長時間按住頁面出現閃退的問題？
- 6.如何解決iPhone和iPad下輸入的默認內陰影問題？
- 7.在iOS和android下，如何實現觸摸元素出現半透明灰色遮罩？
- 8.在旋轉屏幕時，如何解決字體大小自動調整的問題？
- 9.如何解決Android手機圓角失效的問題？
- 10.如何解決iOS中input鍵盤事件keyup失效問題？
- 11.如何解決iOS設置input按鈕樣式會被默認樣式覆蓋的問題？
- 12.如何解決通過transform進行skew變形，rotate旋轉會出現鋸齒現象的問題？
- 13.如何解決移動端click事件有300ms延遲的問題？
- 14.在iOS中，以中文輸入法輸入英文時，如何解決字母之間會出現六分之一空格的問題？
- 15.如何解決移動端HTML5音頻標簽audio的autoplay屬性失效問題？
- 16.如何解決移動端HTML5中date類型的input標簽不支持placeholder屬性的問題？
- 17.如何通過HTML5調用Android或iOS的撥號功能？
- 18.如何解決上下拖動滾動條時的卡頓問題？
- 19.如何禁止復制或選中文本？
- 20.如何解決Android手機的默認瀏覽器不支持websocket的問題？
- 21.說說你所知道的移動端響應適配的方法？
- 瀏覽器兼容
- 1.如何解決不同瀏覽器的標簽默認的margin值和padding值的不同？
- 2.如何解決塊屬性標簽浮動后，在設置水平margin的情況下，在IE6中顯示的margin比設置的大的問題？
- 3.在設置較小高度的（一般小于10px）標簽時，如何解決在IE6\IE7\傲游中高度超出默認高度的問題？
- 4.頁面中的圖片元素為什么默認具有間距？
- 5.如何解決設置標簽最低高度min-height不兼容問題？
- 6.如何清楚浮動？
- 7.怎樣實現盒模型？
- 8.你知道哪些瀏覽器hacker？
- 9.如何解決li元素內出現浮動元素時產生間隙的問題？
- 10.如何讓長單詞及較長的URL換行？
- 11. 如何解決display:inline-block在ie6,ie7不兼容的問題？
- 12.如何解決ie6不支持position:fixed屬性的問題？
- 13.如何解決cursor:hand在IE下無法正常識別正常FF的問題？
- 14.在定義常量時如何兼容瀏覽器？
- 15.講一下event.x與event.y在ie和FF中的區別？
- 16.使用window.location.href有何兼容問題？
- 17.你知道frame有哪些兼容問題？
- 18.談談模態和非模態窗口的問題？
- 19.FF與IE的父元素（parentElement）的區別是什么？
- 20.如何獲取表單中的輸入框元素？
- 21.在IE瀏覽器下操作類數組對象與標準瀏覽器有什么不同？
- 22.如何獲取自定義屬性數據？
- 23.input.type屬性有什么兼容性問題？
- 24.說說event.srcElement兼容問題？
- 25.說說body載入問題
- 26.說說table操作問題
- 27.innerText在IE中能正常工作，但在FF中不行，如何解決？
- 28.在設置CSS透明度時，如何兼容瀏覽器？
- 29.CSS中的width屬性包含padding嗎？
- 30.在代碼box.style{width:100;border:1px;}中，用FF和用IE的盒模型.解釋盒子寬度，為什么會相差2px.
- 31.說說ul和ol列表縮進的兼容性問題。
- 32.如何實現元素水平居中？
- 33.如何讓P元素垂直居中？
- 34.說說margin的加倍問題？
- 35.如何設置IE的最小寬度和最小高度？
- 36.如何解決IE6中浮動元素的文本產生3像素間距的Bug？
- 37.如何解決IE6下圖片有間隙的問題？
- 38.如何讓文本與文本輸入框對齊？
- 39.如何解決IE無法設置滾動條顏色的問題？
- 40.如何解決form標簽邊距兼容性問題？
- 41.為什么FF下文本無法撐開容器的高度？
- 42.IE和FF對空格的尺寸解決有什么不同？
- 43.IE條件注釋有哪些常用運算符？
- 面向對象
- EMAScript6
- 模塊化開發
- 前端工程化
- 設計模式
- HTML
- CSS
- HTML5
- CSS3
- Bootstrap
- JavaScript
- jQuery
- Ajax和JSON
- HTTP服務與HTTPS
- Node.js
- EMAScript5
- CSS預編譯
- 混合開發
- 版本工具管理
- 前端測試
- 公司常見問題
- 主觀面試題
- 異步事件實現原理
- 每日新任務