前端工作面試常見問題
備注: Rebecca Murphey 的 Baseline For Front-End Developers 是你在準備面試前應該閱讀的絕佳資源。
記住： 很多問題都是開放的，可以引發有趣的討論。這比直接的答案更能體現此人的能力。
常見問題：
Q: 你在昨天/本周學到了什么？
Q: 編寫代碼的哪些方面能夠使你興奮或感興趣？
-
Q: 在制作一個Web應用或Web站點的過程中，你是如何考慮他的UI、安全性、高性能、SEO、可維護性以及技術因素的？
A:
安全性：高性能：
SEO：
-
Q: 談談你喜歡的開發環境。(例如操作系統，編輯器，瀏覽器，工具等等)
A:
- 我要攢錢買MBPR;
- 操作系統：windows,linux;
- 編輯器：Sublime Text,以前用過一段時間Vim,后來轉到Sublime Text;
- 瀏覽器：Chrome,Firefox;
- 工具：Photoshop,Eclipse,Fiddler 等;
- 前端框架：Bootstarp，jQuery等。
-
Q: 你最熟悉哪一套版本控制系統？
A:
- Git
- SVN
Q: 你能描述一下當你制作一個網頁的工作流程嗎？
-
Q: 你能描述一下漸進增強和優雅降級之間的不同嗎?
- 如果提到了特性檢測，可以加分。
A:
- 漸進增強(progressive enhancement)：針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
- 優雅降級(graceful degradation)：一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。
區別：優雅降級是從復雜的現狀開始，并試圖減少用戶體驗的供給，而漸進增強則是從一個非常基礎的，能夠起作用的版本開始，并不斷擴充，以適應未來環境的需要。降級（功能衰減）意味著往回看；而漸進增強則意味著朝前看，同時保證其根基處于安全地帶。
“優雅降級”觀點
“優雅降級”觀點認為應該針對那些最高級、最完善的瀏覽器來設計網站。而將那些被認為“過時”或有功能缺失的瀏覽器下的測試工作安排在開發周期的最后階段，并把測試對象限定為主流瀏覽器（如 IE、Mozilla 等）的前一個版本。
在這種設計范例下，舊版的瀏覽器被認為僅能提供“簡陋卻無妨 (poor, but passable)” 的瀏覽體驗。你可以做一些小的調整來適應某個特定的瀏覽器。但由于它們并非我們所關注的焦點，因此除了修復較大的錯誤之外，其它的差異將被直接忽略。
“漸進增強”觀點
“漸進增強”觀點則認為應關注于內容本身。
內容是我們建立網站的誘因。有的網站展示它，有的則收集它，有的尋求，有的操作，還有的網站甚至會包含以上的種種，但相同點是它們全都涉及到內容。這使得“漸進增強”成為一種更為合理的設計范例。這也是它立即被 Yahoo! 所采納并用以構建其“分級式瀏覽器支持 (Graded Browser Support)”策略的原因所在
- CSS “漸進增強”在web制作中常見應用舉例
- 譯)理解“漸進增強(Progressive Enhancement)”
- 認識優雅降級與漸進增強
- 優雅降級和漸進增強
- 漸進增強、優雅降級
- 理解前端開發中的優雅降級及漸進增強
- http://www.w3cfuns.com/blog-5426413-5396597.html
- 漸進增強和優雅降級之間的有什么不同？
-
Q: 請解釋一下什么是“語義化的 HTML”。
A:
-
Q: 你如何對網站的文件和資源進行優化？
- 期待的解決方案包括：
- 文件合并
- 文件最小化/文件壓縮
- 使用 CDN 托管
- 緩存的使用
- 其他
- 期待的解決方案包括：
-
Q: 為什么利用多個域名來提供網站資源會更有效？
- 瀏覽器同一時間可以從一個域名下載多少資源？
Q: 請說出三種減少頁面加載時間的方法。（加載時間指感知的時間或者實際加載時間）
-
Q: 如果你參與到一個項目中，發現他們使用 Tab 來縮進代碼，但是你喜歡空格，你會怎么做？
- 建議這個項目使用像 EditorConfig (http://editorconfig.org/) 之類的規范
- 為了保持一致性，接受項目原有的風格
- 直接使用 VIM 的 retab 命令
-
Q: 請寫一個簡單的幻燈效果頁面
- 如果不使用JS來完成，可以加分。
<!doctype htm l> <html> <head> <style> img { display: none; width: 100px; height: 100px; } input:checked + img { display: block; } input { position: absolute; left: -9999px; } label { cursor: pointer; } </style> </head> <body> <div id="cont"> <input id="img1" name="img" type="radio" checked="checked">  <input id="img2" name="img" type="radio">  </div> <div id="nav"> <label for="img1">第一張</label> <label for="img2">第二張</label> </div> </body> </html>可以這樣寫，但是不能支持所有瀏覽器。
<!DOCTYPE HTML> <html> <head> <style> #cont { position: relative; height: 100px; } img { position: absolute; width: 100px; height: 100px; z-index: 1; } img:first-child, img:target { z-index: 2; } </style> </head> <body> <div id="cont">   </div> <div> <a href="#img1">one</a> <a href="#img2">two</a> </div> </body> </html> -
Q: 你都使用哪些工具來測試代碼的性能？
- Profiler, JSPerf, Dromaeo
Q: 如果今年你打算熟練掌握一項新技術，那會是什么？
Q: Long-Polling, Websockets, SSE(Server-Sent Event) 之間有什么區別？
Q: 請談一下你對網頁標準和標準制定機構重要性的理解。
A: “一次編碼。隨處運行”。
網頁標準和標準制定機構都是為了能讓web發展的更‘健康’，開發者遵循統一的標準，降低開發難度，開發成本，SEO也會更好做，也不會因為濫用代碼導致各種BUG、安全問題，最終提高網站易用性。 摘自:http://www.cnblogs.com/coco1s/p/4034937.html
-
Q: 什么是 FOUC（無樣式內容閃爍）？你如何來避免 FOUC？
- Q: 請盡可能完整得描述下從輸入URL到整個網頁加載完畢及顯示在屏幕上的整個流程
A:
