大家好，我來自駕考寶典。時間不知不覺進入2018金三銀四了，想必很多朋友已經(jīng)看過網(wǎng)上新出的各大廠面試題，多如牛毛。本人幸運，去過美團、58同城、青云QingCloud、蛋殼公寓等公司面試過。如今工作到現(xiàn)在，個人的知識體系也在逐漸建立中，更加清晰化?？偨Y(jié)了一套個人關于前端知識體系的面試題，主要是工作當中運用的技術點和坑，希望以此共勉。
Q:JS jQ 部分
0、將數(shù)組進行正序排序，比如? ->?
?var arr = [ { name : 'a', value: 21}, { name : 'b', value: 10}, { name : 'c', value: -1}, { name : 'd', value: 1}];
該怎么寫；若用箭頭函數(shù)輸出，() => {} 和() => ()區(qū)別是什么，各將輸出什么。
如果數(shù)組是這樣 var arr = [5,20,40,15];用箭頭函數(shù)輸出，() => {} 和() => ()，又各將輸出什么。為什么沒有實現(xiàn)我們想要的排序，該如何做。
如果是二維數(shù)組 var arr = [ [30, -5, 0, 5], [100, 50, 20], [1, 15, 10] ]，又該如何做。
1、如何將這么一組數(shù)據(jù) var arr = ["123@qq.cn","zhangsan@163.cn"];轉(zhuǎn)化為 ->
<123@qq.cn>;<zhangsan@163.cn>
2、產(chǎn)品需要我們前端這邊制造假數(shù)據(jù)。當前頁面每次刷新，頁面里的數(shù)字都會自動增加固定數(shù)字或不固定數(shù)字。如果用localStorage處理，大概怎么做。
3、一個應用場景——倆個頁面，一個列表頁，里面有若干條數(shù)據(jù)，在詳情頁則有對應的詳情。我需要點擊某條數(shù)據(jù)時跳轉(zhuǎn)至詳情頁，展示對應的詳情，其余全隱藏。有沒有自認為代碼量很少、性能比較高的寫法(禁止使用網(wǎng)上插件)。
4、如何將獲取的數(shù)據(jù)，里面分別是1 2 3 … 10、102等，轉(zhuǎn)化為對應的一、二、三…十、一百零二。
5、用最少的原生JS實現(xiàn)文字超出...顯示。
6、如何優(yōu)雅地用原生JS實現(xiàn)textarea隨著內(nèi)容增多，高度自動增加。
7、移動端常見的字數(shù)統(tǒng)計，不管是遞增或遞減，同時兼容pc端的復制、粘貼、撤銷等操作，實時統(tǒng)計，以及支持移動端的emoji表情的統(tǒng)計，該如何實現(xiàn)(網(wǎng)上的插件兼容性太差，自己想辦法寫吧)。
8、define和require有什么區(qū)別。
9、dom我們都知道，bom是什么。
10、this指的是什么。
11、如何JS或jQ，監(jiān)聽app自帶的返回鍵，以及安卓機里物理返回鍵。產(chǎn)品需要前端編寫一個h5，里面有若干audio或video，不與客戶端交互。當用戶點擊app自帶返回鍵，如何暫停正在播放的文件。并處理好廣大安卓機的兼容性。
12、將所有的html內(nèi)容一鍵轉(zhuǎn)化為圖片，有實現(xiàn)的大概思路嗎。html2canvas.js插件bug太多，是否有替代方案。
13、如何實現(xiàn)移動端旋轉(zhuǎn)木馬交互。
14、支付寶里的芝麻信用，目前是靜態(tài)的，如何實現(xiàn)讓小白點隨著對應的分數(shù)、文案從零跳轉(zhuǎn)到對應的位置。
15、移動端輪播圖，比如swiper3.js，實現(xiàn)的原理是什么。當swiper3.js有兼容性問題時，是否有輕量級替代方案。
16、iscroll.js的替代方案有哪些，優(yōu)缺點是什么。
17、中英文一鍵切換，前端該怎么實現(xiàn)。
18、模板渲染引擎用過嗎。和傳統(tǒng)的拼接字符串相比，優(yōu)缺點是什么。
19、判斷JS數(shù)據(jù)類型有哪些方式，它們的區(qū)別是什么。
20、什么是防抖和節(jié)流。
21、延遲加載有哪些方式，什么是阻塞模式。
22、JSON全稱是什么，JSON.parse()和JSON.stringify()區(qū)別是什么。
23、移動端點擊穿透、滾動穿透是否了解，是否解決過。
24、移動端點擊延遲300ms，怎么處理。
25、click和input的區(qū)別。實際應用場景，當用戶點擊input要改變type的類型，采用jQ你會如何處理。
26、$(document).on(“click”,function(){})和$(document).on(“click”,”.xxx”,function(){})區(qū)別。
27、jQ的on、bind、live、delegate各有什么異同。
28、移動端和PC端jQ版本的選擇，是否有差異，如果有，對應的規(guī)范、原因是什么。
29、雅虎軍規(guī)35條（前端性能優(yōu)化）說說吧。
30、什么是回流和重繪。
31、let和var的區(qū)別。
Q:css html 部分
1、html5與PC端項目的區(qū)別。
2、如何快速實現(xiàn)1px以下的邊線。友情提示，可以講講ios從系統(tǒng)幾支持類似0.5px的寫法。
3、不定寬高垂直水平居中，有哪些實現(xiàn)方式，優(yōu)缺點各是什么。
4、定位當中的fixed屬性，在ios中有哪些瑕疵，如何解決。
5、footer固定在頁面底部，除了fixed方式，還有哪些實現(xiàn)方式。你平常用的最多是哪種，在各大移動端瀏覽器里、app里表現(xiàn)如何。
6、移動端中input固定在底部，h5軟鍵盤問題，聽過嗎，研究過有較好的方案嗎。
7、清除浮動有哪些方式?
8、行內(nèi)元素大概有哪些。
9、什么時候用img更合適，什么時候用背景圖片更合適。
10、關于h5的新標簽，有哪些。平常開發(fā)中，使用頻率較高的，又是哪些。
11、label的作用是什么。當編寫一個表單提交頁面，里面有手機號字段，input的number和tel類型，有什么區(qū)別。
12、b和strong標簽有什么區(qū)別，和h1對比呢，根據(jù)什么準則使用。
13、css的優(yōu)先級分別是什么，各代表的權重比是多少。
14、li與li之間有看不見的空白間隔是什么原因?qū)е碌?，如何解決。
15、當定義display:inline-block出現(xiàn)間隙時，如何處理。
16、box-sizing的border-box和content-box有什么區(qū)別。
17、h5的video、audio標簽，在不同平臺手機里，有遇到什么坑嗎（多音頻播放、暫停、自動續(xù)播，多視頻播放、自定義彈窗等需求）。
18、預加載除了preload，還有什么方式嗎。
19、如何區(qū)分h5及非h5。
20、講講dom樹、cssom樹的解析、繪制吧。js放在哪里比較合適。
21、在jpg、png的使用上，規(guī)范是什么。
22、移動端適配，手淘的flexible.js原理大概講講吧。
23、margin：0 auto和margin-left：auto；margin-right：auto哪種寫法更好，為什么。同理，padding：0 5px和padding-left：5px和padding-right：5px哪種更合適。
24、現(xiàn)在越來越多的移動端項目會設置max-width：640px或720px，淘寶、京東、網(wǎng)易等都不同。到底有沒有必要去設置，依據(jù)是什么。
25、input的maxlength屬性主要針對哪些類型才生效。
26、background-color、background:url（）、background-size這種寫法背景顏色會生效嗎，不會是為什么。
27、ul li有自帶的黑色圓點。當產(chǎn)品需要自定義原點顏色、大小時，除了用背景圖片，還有什么方法。
28、如何使用純css實現(xiàn)手風琴效果。把列表里的每條數(shù)據(jù)對應的詳情，當點擊時顯示，再次點擊隱藏，同時不沖突。
29、nth-of-child和 nth-of-type的區(qū)別。
框架就不問了，這次先和各位分享到這，都是本人平常工作當中的積累，和各位高大上的面試題比起來，不值一提，喜歡的朋友可以收藏下。歡迎在評論區(qū)補充更多實用的坑，下次見。
