面試知識點
在面兩個大公司和一個小公司的時候，尤爲是一個傳統行業的大型公司時，也有多是我年限的問題，尤爲注意基礎，不管是筆試仍是技術主管面試的時候都集中在這塊，像原生JS、原生Ajax等，，(這些雖然我在工做中用的也不是不少ennnn,原生的是用的很少，可是我本身很注重)，說下面試碰到的吧(一些記不住了，想起來我可能也來不及補了，我懶哦~)。javascript
HTML以及CSS篇，集中在CSS(CSS重要重要重要！)
-
說下你經常使用的幾種佈局方式
集中往盒模型、flex佈局說(至於grid佈局，這個我看過沒有用到過)css -
實現水平居中的幾種方法？html
-
animate和translate有沒有用過，一些常見的屬性說下？前端
-
CSS實現寬度自適應100%，寬高16:9的比例的矩形。vue
-
如何實現左邊兩欄必定比例，左欄高度隨右欄高度自適應？html5
JavaScript篇(重要)
- 變量提高遇到的一些簡單code題
- 說一下對閉包的理解，以及你在什麼場景下會用到閉包？
- 說一下你對原型與原型鏈的瞭解度，有幾種方式能夠實現繼承，用原型實現繼承有什麼缺點，怎麼解決？
- iframe的缺點有哪些？
- Ajax的原生寫法
- 爲何會有同源策略？
- 前端處理跨域有沒有遇到過，處理跨域的方式有哪幾種方式去解決
- 怎麼判斷兩個對象是否相等
- 代碼實現一個對象的深拷貝
- 從發送一個url地址到返回頁面，中間發生了什麼
- 說下工做中你作過的一些性能優化處理
ES6篇(引導篇，相對重要)
這塊面試官主要是問你哪塊用的比較多，你能夠引導性地把面試官往你會的地方說java
-
箭頭函數中的this指向誰？node
-
如何實現一個promise，promise的原理，以及它的兩個參數是什麼？jquery
-
promise中第二個參數的reject中執行的方法和promise.catch()都是失敗執行的，分別這麼寫有什麼區別，什麼狀況下會兩個都同時用到？webpack
-
map和set有沒有用過，如何實現一個數組去重，map數據結構有什麼優勢？
計算機網絡篇(相對重要)
emmmm(以前我在sf上打的是ennnn，一個小夥伴給我糾結了一下那我這裏就糾正一哈),由於我專業是網絡工程的，在華三和另外一家公司面試的時候沒有被少問這些問題
PS:其實我心裏很奔潰啊，大學我沒有很認真聽課噠，哭哭哭哭哭
- http、https、以及websocket的區別
- http常見的狀態碼，400,401,403狀態碼分別表明什麼？
- 協商緩存和強緩存的區別
- 說下計算機網絡的相關協議？
瀏覽器兼容性問題
這個重點說下(僅僅相對我本身來講哈),由於個人工做主要還在專一在web端，因此瀏覽器兼容性的問題沒有少碰到過，因主要是兼容IE8以上以及其餘各個瀏覽器，這個就當作總結一下吧(在被問到這一塊的時候其實我是有加分的，由於回答的比較多2333)
-
使用meta標籤來調節瀏覽器的渲染方式，告訴瀏覽器用哪一種內核渲染，360雙核瀏覽器就是在ie和chrome之間來回切換，如今使用meta標籤來強制使用最新的內核渲染頁面
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> -
rgba不支持IE8 解決：用opacity
-
CSS3前綴
-webkit- webkit渲染引擎 chrome/safari -moz gecko引擎 firefox -ms- trident渲染引擎 IE -o- opeck渲染引擎 opera
-
過渡不兼容IE8，能夠用JS動畫實現
-
background-size不支持IE8，能夠用img
-
使用PIE.htc讓IE6/7/8支持CSS3部分屬性，像CSS3的border-radius，box-shadow，css backgrounds(-pie-background),Gradients,RGBA屬性
.border-radius { border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; background: #abcdef; behavior: url(css/PIE.htc); } -
用css hack
IE6: _ IE7/7: * IE7/Firefox: !important IE7: *+ IE6/7/8: \9 IE8: \0
-
IE浮動下margin產生的雙倍距離，一般使用float:left來實現，瀏覽器存在兼容性問題，致使圖片與 後面的內容存在margin不一致的問題，解決方法就是給圖片添加diaplay:inline便可
-
ie8不支持nth-child，但支持first-child和last-child，能夠經過轉化寫法來處理問題，span:nth-child(2)能夠轉換爲span:first-child+span,可使ie8顯示該內容，last-child能夠自定義一個class類兼容ie8寫法
-
IE8下不支持HTML5屬性placeholder，解決問題的js插件挺多的，經常使用的使用jquery.JPlaceholder.js插件處理問題
-
識別HTML5元素，IE中可能沒法識別nav/footer，使用html5shiv
-
火狐下表單阻止表單默認提交事件：在form中添加 action="javascript:",秒殺上述全部默認行爲;
-
始終爲按鈕button添加type屬性，IE下的默認類型是button，其餘瀏覽器下的默認類型是submit
-
IE下刪除全部沒必要要的console語句，IE下當遇到console時不識別以後報錯，代碼不會執行，或者全局自定義一個window.console方法
-
IE瀏覽器下因爲參數過長致使經過GET請求下載文件方法報錯，解決改成POST請求
-
IE瀏覽器下iframe彈窗中輸入框光標丟失（沒法輸入）問題，解決清一下frame
-
兼容IE8 new Date()返回NaN問題，解決自定義方法
function parseISO8601(dateStringInRange) { var isoExp = /^\s*(\d{4})-(\d\d)-(\d\d)\s*$/, date = new Date(NaN), month, parts = isoExp.exec(dateStringInRange); if(parts) { month = +parts[2]; date.setFullYear(parts[1], month - 1, parts[3]); if(month != date.getMonth() + 1) { date.setTime(NaN); } } return date; }
Vue相關知識點 (框架之一重要)
由於我簡歷上主要寫的是會vue啦，其實也不是精通，由於邊學邊開發，主要是實踐的項目不是特別複雜，不過常見的一些坑點仍是有遇到的啦，這個是看你會的框架問相應的知識點
-
簡單闡述一下vue的生命週期
-
如何實現一個自定義組件，不一樣組件之間如何通訊的？
-
父子組件如何通訊的？
-
前端路由有沒有用過，你在項目中怎麼實現路由的嵌套？
-
nextTick和Vuex兩個有沒有用過，分爲何狀況下用到？
-
Vue的響應式原理你知道是怎麼實現的嗎？你以爲訂閱者-發佈者模式和觀察者模式有區別嗎？有的話，說一下它們的區別。
構建相關
由於項目還在先後端未分離的時候，我研究的gulp比較多，像grunt、fis3也有了解過，webpack打包工具在用vue的時候確定也接觸到啦，可是研究不深，只能算入門階級(別吐槽，實踐確實很少)，因此我就直接很誠實地和麪試官說了，面試官好像也能理解也就沒有這麼問(內心暗自開心哈哈哈哈)，不過我以爲仍是有必要都去熟悉或者實踐一下，多知道一點不會死噠！
Other
有一些技術主管會考量一下你除了前端以外的技術能力，例如你熟悉的後端語言，sql會不會，還有人問我Linux命令會不會的(我心裏:不會不會不會====),哈哈哈，不過node多多少少都有在用，這個也是前端應該要會的啦(but技術小白我不會，只是用到一點點~)
PS：對啦，忘記說啦，還有版本控制工具svn和git，大部分會問你git會不會，這個用了github的確定都會啦，我以前公司代碼的控制工具都是svn啦，不過git我如今也很自信地說會啦，畢竟入職一週了唉唉唉~
做者：Qin菇涼～
連接：https://juejin.im/post/5af99678f265da0b8e7f881e
來源：掘金
著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。