前段時間專心整理一下關(guān)于前端的面試問題。感謝耐心盡責的楷豪和聞東師兄最近給我們的指導和建議。大家可以通過這些問題，大家可以順便看以下自己的水平。

https://github.com/h5bp/Front-end-Developer-Interview-Questions/tree/master/Translations/Chinese

?

我也利用課余時間（三天沒安排課程的下午晚上）嘗試寫下自己的答案，水平有限，望體諒。

暫時只提供上半部分，下半部關(guān)于js和jQuery的還有部分答案未完全確認，稍后再發(fā)布。

?

你在昨天/本周學到了什么？

?　　這段事件一直在整理有關(guān)前端的面試題目，整理這也題目，不只是為了能夠?qū)W習應付即將到來的面試，更是為了補補基礎知識。日常項目開發(fā)進度太快了，很多屬性或者方法用了就忘，這樣會造成另外一個隱患，因為基本知識不夠扎實，常用的方法用得不夠熟練，就很難高效率地開發(fā)項目。

　　有了扎實的基礎知識，才能其期盼自己走得更遠。

　　1）知道W3C的標準，于是在編寫html時候會規(guī)避“標簽不閉合，亂嵌套，大小寫混雜”可能造成不同瀏覽器展示不一致的隱患。

　　2）知道了CSS的“層疊”規(guī)則，整理并且對比了清楚浮動和實現(xiàn)居中的方法，還發(fā)現(xiàn)了一些不常用屬性。于是，有利于日后高效地編寫樣式表。

　　等等，等等

?

編寫代碼的哪些方面能夠使你興奮或感興趣？

　　編寫代碼最讓我興奮的是學習新的技術(shù)，嘗試新的視覺效果的過程。

　　例如topview招新網(wǎng)站上，考慮到日后頁面上由于豐富的交互和功能，腳本文件較大。雖然一般瀏覽器對文件有異步加載功能，但是這些文件指的是圖片視頻樣式表等，不包含腳本，也就是說當加載腳本的時候會造成堵塞，腳本的加載會堵塞頁面上的圖片加載，也就是說因為腳本文件過大，用戶可能需要等待較長的事件。當頁面內(nèi)部的腳本等基本元素沒加載完畢，當時樣式和結(jié)構(gòu)已經(jīng)加載完后，css3動畫出現(xiàn)，四個小球流暢地旋轉(zhuǎn)滾動直到腳本完全加載完畢。

　　前端本身就是一個美好有趣的領域。對于眾多的網(wǎng)站或者系統(tǒng)來說，后臺提供的功能才是核心模塊，但是關(guān)乎網(wǎng)站或者系統(tǒng)是否能夠持續(xù)地吸引用戶的眼球，能否在同樣類型的產(chǎn)品中脫穎而出，也許前端的交互是否人性化和性能是否穩(wěn)定高效占了絕大多數(shù)因素。良好的用戶體驗，給他們積極高效的用戶體驗，甚至改變大眾的生活方式，這正是我當初學習編程的初衷。

（面試官也許會問得：是怎么實現(xiàn)這個效果的或者關(guān)于用戶體驗方面你還做過哪些努力，沒關(guān)系，我認真做了準備。甚至要對比一下css3過渡和動畫的區(qū)別，鑒于篇幅有限，關(guān)于css3的具體使用就不在這里列舉，用戶體驗方面的答案，下面會做回答。）

/*@keyframes 規(guī)則用于創(chuàng)建動畫。在 @keyframes 中規(guī)定某項 CSS 樣式，就能創(chuàng)建由當前樣式逐漸改為新樣式的動畫效果。*/@-webkit-keyframes spin {　　0% {　　　　-webkit-transform:rotate(0deg);　　}　　50% {　　　　-webkit-transform:rotate(-180deg);　　}　　100% {　　　　-webkit-transform:rotate(-360deg);　　}}/*使用 @keyframes 中創(chuàng)建動畫，需要把它捆綁到某個選擇器，否則不會產(chǎn)生動畫效果。通過規(guī)定至少以下兩項 CSS3 動畫屬性，即可將動畫綁定到選擇器：　　　　規(guī)定動畫的名稱　　　　規(guī)定動畫的時長*/-webkit-animation:spin 1.5s linear infinite;-moz-animation:spin 1.5s linear infinite;

具體可以參考：http://www.w3school.com.cn/css3/css3_animation.asp

聞東師兄推薦：http://www.tuicool.com/articles/NBbQjy3

在制作一個Web應用或Web站點的過程中，你是如何考慮它的UI、安全性、高性能、SEO、可維護性以及技術(shù)因素的？

（如果問我這個問題，我會很興奮的，因為可以說半個小時。）

　　

談談你喜歡的開發(fā)環(huán)境。(例如操作系統(tǒng)，編輯器，瀏覽器，工具等等。)

　?。ㄓ袃商组_發(fā)環(huán)境，一套是用來平時團隊項目的開發(fā)，我的jdk、tomcat、photoshop等等都部署安裝在wins系統(tǒng)上面；另外一套是用來“裝逼”的，呃，對于我這種選擇困難癥病人，糾結(jié)了一下最后決定說說“裝逼”的那套開發(fā)環(huán)境）

　　操作系統(tǒng)用的是linux的ubuntu，能夠是我接觸到linux常用命令、下載安裝、轉(zhuǎn)移新增刪除文件都很方便（面試官會問到哪些指令嗎？）

　　編輯器是brackets，作為免費、開源且跨平臺的 HTML/CSS/JavaScript 前端 WEB 集成開發(fā)環(huán)境，簡約、優(yōu)雅、快捷！

　　瀏覽器是chrome，內(nèi)部提供的開發(fā)工具很豐富，例如單步調(diào)試、模擬不同像素設備、能夠顯示較多css3屬性等。

　　

*你最熟悉哪一套版本控制系統(tǒng)？

（這個問題，用過git，用過myeclipse里的svn，用過tortoiseSVN將代碼上傳到sinaapp服務器，但是都不是很熟悉，只好翻了一下《Pro.Git-zh_CN》）

　　在Git 中的絕大多數(shù)操作都只需要訪問本地文件和資源，不用連網(wǎng)。對于任何一個文件，在Git 內(nèi)都只有三種狀態(tài)：已提交（committed），已修改（modified）和已暫存（staged）。已提交表示該文件已經(jīng)被安全地保存在本地數(shù)據(jù)庫中了；已修改表示修改了某個文件，但還沒有提交保存；已暫存表示把已修改的文件放在下次提交時要保存的清單中?！?/p>

基本的Git 工作流程如下所示：
　　1. 在工作目錄中修改某些文件。
　　2. 對這些修改了的文件作快照，并保存到暫存區(qū)域。
　　3. 提交更新，將保存在暫存區(qū)域的文件快照轉(zhuǎn)儲到git 目錄中。

常用命令：

//用git 把Git 項目倉庫克隆到本地，以便日后隨時更新：$ git clone git://git.kernel.org/pub/scm/git/git.git//git add 命令告訴Git 開始對這些文件進行跟蹤，然后提交：$ git add filenme.html//每次準備提交前，先用git status 看下，是不是都已暫存起來了，然后再運行提交命令$ git commit -m 'initial project version'// 把本地倉庫提交到遠程倉庫的master分支中$ git push origin master 

你能描述一下當你制作一個網(wǎng)頁的工作流程嗎？

　　1）根據(jù)需求，確定主題。透徹深入所做網(wǎng)站的核心功能和關(guān)鍵。

　　2）收集資料。從對比相同類型的網(wǎng)站（慣用而熟悉的樣式，用戶更樂意接受），參照別人可行的實現(xiàn)方法?！　?）規(guī)劃網(wǎng)站。抽離出類似的模塊和可重用的部件。如果是響應式網(wǎng)站就需要設定斷點，根據(jù)不同寬度屏幕設定樣式?！　?）設計數(shù)據(jù)庫?！　?）搭建基本的框架。引入重置樣式表reset.css和字體樣式表font.css，風格統(tǒng)一的圖標還有后臺需要用到的包。　　6）編碼和調(diào)試。注意統(tǒng)一命名和編碼規(guī)范。當多人開發(fā)時，還需要制定規(guī)范文檔?！　?）上傳測試。利用FTP工具，把網(wǎng)站發(fā)布到自己申請的主頁存放服務器上。網(wǎng)站上傳以后，你要在瀏覽器中打開自己的網(wǎng)站，逐頁逐個鏈接的進行測試，發(fā)現(xiàn)問題，及時修改，然后再上傳測試。 　　8）推廣宣傳 。不斷宣傳，提高網(wǎng)站的訪問率和知名度。推廣的方法有很多，例如到搜索引擎上注冊、與別的網(wǎng)站交換鏈接、加入廣告鏈等。 

　　9）維護更新 。網(wǎng)站要注意經(jīng)常維護更新內(nèi)容，保持內(nèi)容的新鮮，不要一做好就放在那兒不變了，只有不斷地給它補充新的內(nèi)容，才能夠吸引住瀏覽者 

　?。ň唧w還需要集合我的實際經(jīng)驗：http://www.cnblogs.com/0603ljx/p/4284521.html）　　

你能描述一下漸進增強和優(yōu)雅降級之間的不同嗎?

　　　　它們是看待同種事物的兩種觀點，它們關(guān)注在同一個網(wǎng)站同一功能在不同設備不同瀏覽器下的表現(xiàn)：

　　　　漸進增強，一開始值構(gòu)建站點的最小特性，然后不斷針對個瀏覽器追加功能，性能越好的設備能夠顯示更加出眾的效果。

　　　　優(yōu)雅降級，一開始就構(gòu)造站點的完整功能，然后針對瀏覽器測試和修復。

　　　　web標準對可訪問性做了如下定義：web內(nèi)容對于殘障用戶或者普通的可閱讀和可理解性。無論用戶是否殘障，都得通過用戶代理（User Agent）來訪問Web內(nèi)容。因此要提高可訪問性，首先得考慮各種用戶代理 ：桌面瀏覽器、語音瀏覽器、移動電話、車載個人電腦等等。還得考慮用戶訪問Web內(nèi)容時的環(huán)境限制 。比如：我們真的要考慮瀏覽器禁用JavaScript/CSS的情形嗎？我的理解是，要考慮的其實不是禁用了JavaScript/CSS的瀏覽器，而是那些對JavaScript/CSS不支持或支持不好的用戶代理。比如語音閱讀器，手機瀏覽器等，JavaScript提供的是一層可訪問性，不能代替內(nèi)容本身。

　　　　當然，從漸進增強的角度講，鼓勵使用高級特性，只是同時要做到優(yōu)雅降級，讓低端用戶代理上，也能保留低保真的體驗。（除了用戶代理，還有什么方法檢測客戶端設備？特性檢測，css3媒體查詢）

　　(講講我在平時項目中，在“漸進增強”和“優(yōu)雅降級”的努力)

如果提到了特性檢測，可以加分。

　　　　　　

假若你有5個不同的 CSS 文件, 加載進頁面的最好方式是?
文件拼合，減少http請求。

　　用一個大的CSS文件替代多個小體積的CSS文件這是一個很好的實踐，可以獲得更好的可維護性，但是在網(wǎng)站性能方面會產(chǎn)生一定的影響（這里指的是隨著文件體積的增大，隨之消耗服務器的內(nèi)存也會增加）。盡管你應該把CSS文件拆分成小塊，但是當瀏覽器請求這些文件時，會產(chǎn)生同等數(shù)量的http請求。每個http請求都會產(chǎn)生一次從你的瀏覽器到服務器端網(wǎng)絡往返過程，并且導致推遲到達服務器端和返回瀏覽器端的時間，我們稱之為延遲。因此，如果你有4個Javascript和3個css文件在頁面中被加載，你浪費掉了7次因網(wǎng)絡往返過程產(chǎn)生的時間。在美國，延遲平均是70毫秒，這樣你就浪費了7*70 = 490毫秒，大致延遲了半秒的時間。在美國之外的國家訪問你的頁面，平均延遲大約是200毫秒，這意味著你的頁面有1400毫秒的時間是在等待中度過。瀏覽器在你的CSS完全加載完成之前是不能很好的渲染你的頁面的。因此越多的延遲讓你的頁面載入越慢。

請解釋一下什么是“語義化的 HTML”

　　分離結(jié)構(gòu)和表現(xiàn)的另一個重要方式是使用語義化的標記來構(gòu)造文檔內(nèi)容。一個XHTML元素的存在意味著被標記內(nèi)容有相應的結(jié)構(gòu)化意義，例如

是用來標記段落

標記標題

• 標記列表，不能過分使用

  　　語義化的標簽往往與默認樣式有所聯(lián)系，像是Hx系列 表示標題，會被賦予默認的塊級加粗居中樣式；,用來區(qū)別于其他文字，起到了強調(diào)的作用。用來明確告訴你它們的用途。

  　　語義化標簽讓大家更直觀認識標簽和屬性的用途。語義化的網(wǎng)頁，對搜索引擎友好，更容易被搜索引擎抓取，有利于推廣。

• *你如何對網(wǎng)站的文件和資源進行優(yōu)化？
• 期待的解決方案包括：
• 文件合并（同上題“假若你有5個不同的 CSS 文件, 加載進頁面的最好方式是？”）

　　　　　　　　減少調(diào)用其他頁面、文件的數(shù)量。一般我們?yōu)榱俗岉撁嫔鷦踊顫姇罅渴褂胋ackground來加載背景圖，而每個 background的圖像都會產(chǎn)生1次HTTP請求，要改善這個狀況，可以采用css的1個有用的background-position屬 性來加載背景圖，我們將需要頻繁加載的多個圖片合成為1個單獨的圖片，需要加載時可以采用：background:url(....) no-repeat x-offset y-offset;的形式加載即可將這部分圖片加載的HTTP請求縮減為1個。

• 文件最小化/文件壓縮

　　　　　　　　即將需要傳輸?shù)膬?nèi)容壓縮后傳輸?shù)娇蛻舳嗽俳鈮?/strong>，這樣在網(wǎng)絡上傳輸?shù)?數(shù)據(jù)量就會大幅減小。通常在服務器上的Apache、Nginx可以直接開啟這個設置，也可以從代碼角度直接設置傳輸文件頭，增加gzip的設置，也可以 從 負載均衡設備直接設置。不過需要留意的是，這個設置會略微增加服務器的負擔。建議服務器性能不是很好的網(wǎng)站，要慎重考慮。

• 使用 CDN 托管

　　　　　　　　CDN的全稱是Content Delivery Network，即內(nèi)容分發(fā)網(wǎng)絡。其基本思路是盡可能避開互聯(lián)網(wǎng)上有可能影響數(shù)據(jù)傳輸速度和穩(wěn)定性的瓶頸和環(huán)節(jié)，使內(nèi)容傳輸?shù)母?、更穩(wěn)定。其目的是使用戶可就近取得所需內(nèi)容，解決 Internet網(wǎng)絡擁擠的狀況，提高用戶訪問網(wǎng)站的響應速度。

• 緩存的使用

　　　　　　　　Ajax調(diào)用都采用緩存調(diào)用方式，一般采用附加特征參數(shù)方式實現(xiàn)，注意其中的


熱AI工具

Undress AI Tool
免費脫衣圖片

Undresser.AI Undress
人工智慧驅(qū)動的應用程序，用於創(chuàng)建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
顯示更多

熱門文章
Grass Wonder Build Guide |烏瑪媽媽漂亮的德比
1 個月前 By Jack chen
<??>：在森林裡99夜 - 所有徽章以及如何解鎖
4 週前 By DDD
烏瑪?shù)姆劢z漂亮的德比橫幅日程（2025年7月）
1 個月前 By Jack chen
Rimworld Odyssey溫度指南和Gravtech
3 週前 By Jack chen
Windows安全是空白或不顯示選項
1 個月前 By 下次還敢
顯示更多

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版，非常好用

禪工作室 13.0.1
強大的PHP整合開發(fā)環(huán)境

Dreamweaver CS6
視覺化網(wǎng)頁開發(fā)工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
顯示更多

熱門話題
Laravel 教程
1600
29
PHP教程
1502
276
顯示更多