Web前端面試常見問題
記住： 很多問題都是開放的，可以引發有趣的討論。這比直接的答案更能體現此人的能力。
常見問題：
● Q: 你在昨天/本週學到了什麼？
● Q: 編寫程式碼的哪些方面能夠使你興奮或感興趣？
● Q: 在製作一個Web應用或Web站點的過程中，你是如何考慮他的UI、安全性、高效能、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)”策略的原因所在
Q: 你如何對網站的檔案和資源進行優化？
○ 期待的解決方案包括：
- 檔案合併
- 檔案最小化/檔案壓縮
- 使用 CDN 託管
- 快取的使用
- 其他
Q: 為什麼利用多個域名來提供網站資源會更有效？
- ○ 瀏覽器同一時間可以從一個域名下載多少資源？
Q: 請說出三種減少頁面載入時間的方法。（載入時間指感知的時間或者實際載入時間）
Q: 如果你參與到一個專案中，發現他們使用 Tab 來縮排程式碼，但是你喜歡空格，你會怎麼做？
- ○ 為了保持一致性，接受專案原有的風格
- ○ 直接使用 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">
<img src="a.png">
<input id="img2" name="img" type="radio">
<img src="b.png">
</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">
<img id="img1" src="a.jpg">
<img id="img2" src="b.jpg">
</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