EP10 - 常見的前端面試題目以及能怎麼回答，可能是part 1
上禮拜在社群上和朋友做模擬面試
感覺成效還挺好的
這次是用英文面試而且比較像是北美的面試狀況
給大家一些idea國外大概怎麼面試
同一天有另一場中文的面試
有感覺台灣面試和北美真的不太一樣
今天講講一些比較常見的面試題目然後我覺得大方向可以怎麼回答
雖然不保證你下次會遇到一樣的題目而且其實也不保證你這樣回答對方會滿意
但這邊給個大方向和一些關鍵字讓你可以更完整回答問題
setTimeout / Event Loop
我自己沒遇過但網上和instagram上面蠻多人說面試被問到這題
問題的包裝可能會像是JavaScript是不是multi threaded或是setTimeout運作原理
或是直接問event loop是什麼
event loop是個JS的機制決定跑function的先後順序
以setTimeout為例子
當我們的code叫了setTimeout這個function call會先放到call stack
那因為是stack 所謂的 last in first out所以越後面叫的會越先被處理
假設現在換setTimeout了因為我們叫的是Web API所以會讓browser去處理這個以及開始一個timer
等timer時間到 會把setTimeout裡面的callback function放進task queue
這邊注意的是它不是直接放進stack因為怕打亂叫的順序造成奇怪的事情發生
所以放進一個queue等event loop處理完stack再把queue的東西放進去
Promise
Promise可能大部分是考定義和為什麼要去用它
有些人好像被考過要當成手寫Promise長什麼樣子
什麼 new Promise加resolve和reject這樣
然後要用then或是async await去等它
目前API只要不是可以同步馬上給你的通常都會給你一個Promise
最好的例子就是就是fetch因為它得等server回傳response回來但不知道什麼時候會回來
順帶一提event loop有個micro task queue是用來存Promise的而且優先權比task queue高
Cookies / Local Storage / Session Storage
這三個其實都能做到存資料的用途不過也會根據你想做的事情來做區分
這邊大概講一下區別
Cookies和其他storage比能存的data只有 4 KB
我們可以在這些data上放一個過期的時間
時間到了就會自動刪掉
不只有前端可以操作cookie裡面的東西 server也可以存取和更新cookies的東西
然後每個request中跟這個domain在一起的cookies都會被上傳上去
因為這個便利性所以常常把cookies當作存放auth token的地方
不過也因為這樣也要小心裡面放什麼要不然會有安全性的顧慮
Locale Storage Session Storage 可以存放5 MB的資料
只有前端可以讀取而且如果沒有去刪它就會一直留著
Session Storage不一樣的點是你的tab關掉那些data就不見了而local會一直留著
效能優化
這個可以講的點很多 反正主要就是怎麼讓網頁跑起來變快
JavaScript 方面可以是整體size儘量小一點 選比較不肥的library 然後做code spliting確保只跑需要跑的code lazy load剩下的東西
有些module需要花時間跑起來的可以等晚一點或是等有互動了才開始跑
現在build tool都很智能會儘量幫忙做tree shaking把沒用到的code刪掉
然後儘量不要做會block UI thread的事情比如大量的運算
資料量大的時候 如果server支援那在前端記得做pagination
CSS可以做audit把你沒有用到的rule刪掉
在HTML上面把一些比較重要的CSS font 圖片設定比較高的priority讓瀏覽器先下載他們
server用http 2甚至3來讓你可以在短時間下載很多檔案
利用gzip和brotli來壓縮你的檔案
運用CDN來存取這些檔案讓使用者在最短的時間可以下載到這些js css
剛才講的這些其實有些CDN都幫你弄好了但講一下CDN做了什麼事情也代表說你不是只知道前端UI的東西
Vue, React 這些框架是做什麼的
任何框架都是想把一些事情簡單化和規格化
那前端框架就是想把拿到資料然後有效率的放在畫面上這件事情做到很簡單
而且也幫助我們可以重複使用我們寫的UI或是component
再細一點可以講到他們怎麼render怎麼把事情變簡單的
比如手寫的話我們需要自己fetch 然後用Web API去抓DOM和create那些DOM
這些框架有自己一套機制知道當data更新時候要更新哪些DOM
我們不用特別的追蹤這些binding
加上框架也會用很有效率的方式來batch更新而不會消耗太多的資源
那React基本上是整個component重新render
而像Solid這類或是Vue好像也是可以精準的知道哪一個DOM需要被更新
其他我比較會看對方resume來問問題
比如有講到測試我會問對方都怎麼測試或是 unit test 和 e2e有什麼不同
對方用過docker做deployment我就會問為什麼要用docker
寫了效能優化很多我就會想知道細節
一方面聽聽看是不是真的對方做的 一方面聊細節然後知道對方怎麼做這些決定的
如果你喜歡這內容的話幫我在 Twitter 和 Threads 上面分享給其他正在前端這條路上努力的朋友們，也別忘了訂閱我們電子報收到第一手消息喔 🚀