1.對WEB標準以及W3C的理解與認識？
WEB標準簡而言之就是將頁面的結構、表現和行爲各自獨立實現。
（1）web標準規範要求，書寫標籤必須閉合、標籤小寫、不亂嵌套、提高搜索機器人搜索機率；
（2）使用外鏈css和js腳本、結構行爲表現的分離、文件下載與頁面速度更快；
（3）樣式與標籤的分離，更合理的語義化標籤，內容能被更多的用戶所訪問、內容能被更廣泛的設備所訪問、更少的代碼和組件，容易維護、改版方便；
（4）不需要變動頁面內容、提供打印版本而不需要複製內容、提高網站易用性;
W3C：
W3C標準不是一個標準，而是一系列標準的集合，包含三部分的標準：結構標準、表現標準和動作標準。與結構標準對應的代表語言是xHTML，與表現標準對應的代表語言是CSS，與動作標準對應的代表語言是JavaScript。
當我們將一個成品的網頁設計製作成一個靜態頁面的時候，就要符合前面兩種標準，結構標準和表現標準，那麼製作出來的頁面就是標準頁面，用他們相對應的語言來描述這種製作標準頁面的技術我們就稱之爲“xHTML+CSS”！
2.XHTML和HTML有什麼區別？
HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的置標語言
最主要的不同：
XHTML 元素必須被正確地嵌套。
XHTML 元素必須被關閉。
標籤名必須用小寫字母。
XHTML 文檔必須擁有根元素。
3.Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義?
用於聲明文檔使用哪種規範（html/Xhtml）一般爲嚴格模式
加入XMl聲明可觸發，解析方式更改爲IE5.5 擁有IE5.5的bug
嚴格模式：使用此類型的網頁，瀏覽器解析將相對嚴格，不允許使用任何表現樣式的標識和屬性，比如在元素中直接使用background-color背景色屬性。
混雜模式：瀏覽器對XHTML的解析較爲寬鬆。允許使用4.01中的標籤，但必須符合XHTML的語法。
4.行內元素有哪些?塊級元素有哪些?CSS的盒模型?
塊級元素：div p h1 h2 h3 h4 form ul,ol,dl,li,dd,dt,table,td,tr,
行內元素: a b br i span input select,,em,input,img,img,textarea,var,em,strong,
Css盒模型:CSS佈局中的每一個元素，在瀏覽器的解析中，都被當做一個盒狀物。content，border ，padding,margin
5.CSS引入的方式有哪些? link和@import的區別是?
內聯 內嵌 外鏈 導入
外鏈：在html文檔的head部分加入:
也是將一個.css文件引入到HTML文件中，但它與導入式不同的是鏈接式使用HTML規則引入外部CSS文件，它在網頁的標籤對中使用標記來引入外部樣式表文件，使用語法如下：
<link href="mystyle.css" rel="stylesheet" type="text/css"/>內嵌：在html文檔的head部分直接寫入css文檔。
嵌入式是將CSS樣式集中寫在網頁的標籤對的標籤對中。格式如下：
<head>
<style type="text/css">
...此處寫CSS樣式
</style>
</head>內聯（行內）：直接在html標籤裏寫入對這個標籤的css控制
導入（@import）
<style type="text/css">
@import"mystyle.css"; 此處要注意.css文件的路徑
</style>
區別1：link是XHTML標籤，除了加載CSS外，還可以定義RSS等其他事務；@import屬於CSS範疇，只能加載CSS。
區別2：link引用CSS時，在頁面載入時同時加載；@import需要頁面網頁完全載入以後加載。
區別3：link是XHTML標籤，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。
區別4：ink支持使用Javascript控制DOM去改變樣式；而@import不支持。
6.CSS選擇符有哪些?哪些屬性可以繼承?優先級算法如何計算?內聯和important哪個優先級高?
繼承不如指定 I D>class>標籤選擇
CSS選擇符: 類選擇器 、 標籤名選擇器、 ID選擇器 、 後代選擇器（派生選擇器）、 羣組選擇器
可以繼承： 類選擇器 、 標籤名選擇器、 後代選擇器（派生選擇器）、羣組選擇器
優先級算法：
標籤內直接定義：1000
ID選擇器：100
類選擇器 ：10
標籤名選擇器：1
內聯和important中，important優先級高
7.前端頁面有哪三層構成，分別是什麼?作用是什麼?
結構層；主要指DOM節點；HTML/XHTML
樣式層；主要是指頁面渲染；CSS
腳本層：主要指頁面動畫效果；JS/AS
8.css的基本語句構成是?
選擇符、屬性、值
選擇器{屬性1:值1;屬性2:值2;……}
9.你做的頁面在哪些流覽器測試過?這些瀏覽器的內核分別是什麼?
IE6、7、8、FF、Opear、Safari、、Maxthon；
Trident：Windows 下的 IE 瀏覽器使用的內核代號。除 IE 外，衆多的 IE Shell（如 Maxthon ）都使用這個內核。
webkit：谷歌（Chrome）內核
Gecko：Mozilla Firefox 瀏覽器使用的內核代號。
Presto：Opera 瀏覽器使用的內核代號，這是目前公認網頁瀏覽速度最快的瀏覽器內核。
KHTML/WebCore： Konqueror/Safari 瀏覽器使用的內核代號。
10.寫出幾種IE6 BUG的解決方法
1. 雙邊距BUG float引起的 使用display：inline；
2. 當元素使用float浮動後，元素與相鄰的元素之間會產生3px的間隙。詭異的是如果右側的容器沒設置高度時3px的間隙在相鄰容器的內部，當設定高度後又跑到容器的相反側了。使用dislpay:inline -3px解決；right也同樣浮動 float:left 或者相對IE6定義.left margin-right:-3px;
3. 超鏈接hover 點擊後失效 使用正確的書寫順序 link visited hover active（LVHA）；
4. IE6 z-index問題 給父級添加position:relative；
5. Png 透明 使用js代碼 改
6. Min-height 最小高度 ！Important 解決；
7. select 在ie6下遮蓋 使用iframe嵌套；
8. 爲什麼沒有辦法定義1px左右的寬度容器（IE6默認的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）；
9. IE6中圖片的下方會存在一定的間隙，尤其在圖片垂直挨着圖片的時候，即可看到這樣的間隙。解決這個BUG的方法也有很多，可以是改變html的排版，或者定義img 爲display:block或者定義vertical-align屬性值爲vertical-align:top | bottom |middle |text-bottom還可以設置父容器的字體大小爲零，font-size:0
10. 一個空格引發CSS失效。IE有個BUG，在處理僞類時，如果僞 類的名稱中帶有連字符”-“，僞類名稱後面就得跟一個空格，不然樣式的定義就無效。而在FF中，加不加空格都可以正常處理。
11. ie6下空標籤高度問題 IE6下空元素的高度BUG
如果一個元素中沒有任何內容，當在樣式中爲這個元素設置了0-19px之間的高度時。此元素的高度始終爲19px。
解決的方法有四種:
a.在元素的css中加入：overflow:hidden
b.在元素中插入html註釋：
#box{ float:left; width:100px; margin:0 0 0 100px; //這種情況之下IE會產生200px的距離，這時需要設置display:inline; //使浮動忽略}9.如何居中一個浮動元素?
對其設置margin:x auto;
10.有沒有關注HTML5和CSS3?如有請簡單說一些您對它們的瞭解情況！
有，HTML5的是目前正在爲未來的HTML標準的主要修訂的發展。其前任一樣，4.01和XHTML 1.1的HTML，HTML5的是一個結構和提交萬維網內容的標準。新標準結合了諸如視頻播放，拖動和放下以前曾在第三方瀏覽器插件依賴例如Adobe Flash，微軟的Silverlight的功能，和谷歌齒輪。
12:如果讓你來製作一個訪問量很高的大型網站，你會如何來管理所有CSS文件、JS與圖片?
把所有的CSS文件都放入一個樣式表中,通過把所有的腳本放到一個文件中來減少HTTP請求的方法。js文件也採用同樣的方法。把所有的背景圖像都放到一個圖片文件中，然後通過CSS的background-image和background-position屬性來顯示圖片的不同部分。
14：你對前端界面工程師這個職位是怎麼樣理解的?它的前景會怎麼樣?
前端界面工程師：1. 與交互設計師、視覺設計師協作，根據設計圖完成頁面製作。 2. 維護及優化網站前端性能。
前景： 長期以來，國內前端開發在整個軟件開發行業內佔得比重較小，發展較晚。網站也多傾向於贏利最大化而輕視用戶體驗。前後端比例懸殊大。近幾年來，隨着 以用戶爲中心 的思想普及發展。前端開發呈現出強勁的發展態勢，前端開發人員在項目中的重要性日益突出。前端開發人員呈現出嚴重的人員短缺現象。
[Javascript]
1：js是什麼，js和html 的開發如何結合?
js是一種基於對象和事件驅動，並具有安全性的腳本語言。
可以html的三個地方編寫js腳本語言：一是在網頁文件的標籤對中直接編寫腳本程序代碼；二是將腳本程序代碼放置在一個單獨的文件中，在網頁文件中引用這個腳本程序語言；三是將腳本程序代碼作爲某個元素的事件屬性值或超鏈接的href屬性值。
2.怎樣添加、移除、移動、複製、創建和查找節點
添加：append
刪除：remove
移動：
複製：
創建：create
查找：
（1）創建新節點
createDocumentFragment() //創建一個DOM片段
createElement_x_x() //創建一個具體的元素
createTextNode() //創建一個文本節點（2）添加、移除、替換、插入
appendChild()
removeChild()
replaceChild()
insertBefore()（3）查找
getElementsByTagName_r() //通過標籤名稱
getElementsByName() //通過元素的Name屬性的值
getElementById() //通過元素Id，唯一性3.怎樣使用事件以及IE和DOM事件模型之間存在哪些主要差別
4.面向對象編程:b怎麼繼承a
5.看看下面alert的結果是什麼
view sourceprint?1.function b(x, y, a) {
.arguments[2] = 10;
.alert(a);
}
b(1, 2, 3);
如果函數體改成下面，結果又會是什麼?
a = 10;
alert(arguments[2] );
6.請編寫一個JavaScript函數 parseQueryString，它的用途是把URL參數解析爲一個對象
var obj = parseQueryString(url);
alert(obj.key0) // 輸出0
7.ajax是什麼? ajax的交互模型? 同步和異步的區別? 如何解決跨域問題?
8.什麼是閉包?下面這個ul，如何點擊每一列的時候alert其index?
閉包是可以包含自由（未綁定）變量的代碼塊；這些變量不是在這個代碼塊或者任何全局上下文中定義的，而是在定義代碼塊的環境中定義。
9.最近看的一篇Javascript的文章是?
10.常使用的庫有哪些?常用的前端開發工具?開發過什麼應用或組件?
最常用的庫：jquery-1.4.2.min.js
常用的前端開發工具：firebug、photoshop、editplus、取色器、色板、eclipse
11.說說YSlow(可以詳細一點)
yslow是一個工具，也可以理解成是一個插件，是基於Mozilla Firefox上firebug插件的一個插件。它的出現的主要目的就是檢測我們的頁面性能。它讓用戶可以就近取得所需的內容，解決網絡擁擠的狀況，提高用戶訪問網站的響應速度；其次，yahoo在ETags配置上也有獨特之處，聲明過期，就是說，用戶從服務器取數據的時候，如果文件變化了，給他反饋新的文件，如果文件沒有變化，只需告訴客戶端沒有變化即可，不必再把文件取回來，這樣就節省了大量的網絡帶寬和資源。另外，只要將那些在加載過程中要執行的腳本放到底部，就可以實現最大的下載並行。
小說網對其評價：(a) 從樣式表着手，避免CSS表達式。CSS表達式需要很多資源，有時甚至會造成頁面假死。(b) 緩存一下不常修改的文件，並開啓 GZIP壓縮，減少網絡傳輸時間(c) 減少DNS查找。YSlow認爲一個頁面上2個以內的域名比較合理。有些網站掛了不少統計代碼，或者廣告代碼。統計拖累用戶速度、廣告影響用戶視覺。(d) 避免重定向（跳轉），我們在給鏈接地址的時候，一般會把鏈接地址寫成 http://xxx.cn/xxx 或者 http://xxx.cn/xxx/ ，有區別嗎?有！服務器如果接收到的URL是http://xxx.cn/xxx，它會自動重定向到http://xxx.cn/xxx/，雖然進入的都 是同一個頁面，但是前者比後者多走了一步，重定向，顯然多多少少浪費了一點時間。
Google 對其評價：多數人可能認爲GOOGLE沒什麼值得借鑑的，畢竟整站就那麼幾行代碼。
但是這幾行代碼，每天要承受過億的用戶訪問量，在如此大的壓力下，運行流暢，有很大一個因素取決於Minify JS。通過查看它的源代碼可以發現，google不僅將JS進行了壓縮，連頁面代碼中也沒有不必要的空格和符號，使用了最短最簡潔的變量名。聯繫到開發方 面，建議大家採用yuicompressor，在調試時使用便於開發的模式，調試完成後直接壓縮併發布。讓用戶得到最快捷的用戶體驗。
百度：
1、JavaScript有哪幾種數據類型
Number 數字類型、String 字符串類型、Boolean 布爾類型、Function 函數、Object 對象、 Null、 Undefined 沒有定義類型
2、img中alt和tittle的區別
3、下面css標籤在JavaScript中調用應如何拼寫，border-left-color，-moz-
4、動態打印 yyyy-mm-dd hh:mm:ss
5、如何提高網頁的運行速度
6、JavaScript中如何對一個對象進行深度clone
7、flash中ActionScript2.0和ActionScript3.0面向對象的異同
答案見http://www.lihaihong.com/article/86.html
8、編寫一個方法 求一個字符串的字節長度
9、如何控制alert中的換行
10、解釋document.getElementByIdx_x_x_x(“ElementID”).style.fontSize=”1.5em”
11、將一個類似圖中的效果分離成css和html
12、按照格式 xxxx年xx月xx日xx時xx分xx秒動態顯示時間 要求不足10的補0
13、編寫一個方法 去掉一個數組的重複元素
14、說出3條以上ff和ie的腳本兼容問題
15、按要求寫一個簡單的ajax示例 簡單的沒意義 就不寫了
騰訊：
1.請實現，鼠標點擊頁面中的任意標籤，alert該標籤的名稱．（注意兼容性）
HTML && CSS
1.Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義? 行內元素有哪些?塊級元素有哪些?CSS的盒模型?**
2.CSS引入的方式有哪些? link和@import的區別?
3.CSS選擇符有哪些?哪些屬性可以繼承?優先級?內聯和important哪個優先級高?
4.經常遇到的瀏覽器的兼容性有哪些?怎麼會出現?解決方法是什麼?
5.如何居中一個浮動元素?
6.HTML5和CSS3的瞭解情況
7.你怎麼來實現下面這個設計圖
Javascript
1.怎樣添加、移除、移動、複製、創建和查找節點
添加：append
刪除：remove
移動：
複製：
創建：create
查找：
（1）創建新節點
createDocumentFragment() //創建一個DOM片段
createElement_x_x() //創建一個具體的元素
createTextNode() //創建一個文本節點（2）添加、移除、替換、插入
appendChild()
removeChild()
replaceChild()
insertBefore()（3）查找
getElementsByTagName_r() //通過標籤名稱
getElementsByName() //通過元素的Name屬性的值
getElementById() //通過元素Id，唯一性2.怎樣使用事件以及IE和DOM事件模型之間存在哪些主要差別
3.面向對象編程:b怎麼繼承a
4.看看下面alert的結果是什麼
function b(x, y, a) {
arguments[2] = 10;
alert(a);
}
b(1, 2, 3);
如果函數體改成下面，結果又會是什麼?
a = 10;
alert(arguments[2] );
5.請編寫一個JavaScript函數 parseQueryString，它的用途是把URL參數解析爲一個對象，如：var url = ”http://www.taobao.com/index.php?key0=0&key1=1& key2=2…..”var obj = parseQueryString(url);
alert(obj.key0) // 輸出0
(來自淘寶網校園招聘筆試題)
6.ajax是什麼? ajax的交互模型? 同步和異步的區別? 如何解決跨域問題?
7.什麼是閉包?下面這個ul，如何點擊每一列的時候alert其index?
8.最近看的一篇Javascript的文章
9.你如何去實現這個Tabview
10.常使用的庫有哪些?常用的前端開發工具?開發過什麼應用或組件?
11.性能-Yslow
[HTML && CSS]
1.Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義?
2：行內元素有哪些?塊級元素有哪些?CSS的盒模型?
3.CSS引入的方式有哪些? link和@import的區別是?
4.CSS選擇符有哪些?哪些屬性可以繼承?優先級算法如何計算?內聯和important哪個優先級高?
5:前端頁面有哪三層構成，分別是什麼?作用是什麼?
6:css的基本語句構成是?
8：你做的頁面在哪些流覽器測試過?這些瀏覽器的內核分別是什麼?經常遇到的瀏覽器的兼容性有哪些?怎麼會出現?解決方法是什麼?
9.如何居中一個浮動元素?
10.有沒有關注HTML5和CSS3?如有請簡單說一些您對它們的瞭解情況！
11.你怎麼來實現下面這個設計圖,主要講述思路 （效果圖省略）
13:如果讓你來製作一個訪問量很高的大型網站，你會如何來管理所有CSS文件、JS與圖片?
14：你對前端界面工程師這個職位是怎麼樣理解的?它的前景會怎麼樣?
重申一下，上述這些知識點都應該是你應該“想都不用想”的東西。我一開始問的所有問題都是想摸清你對所有這些領域知識的掌握程度。雖然上面列出的這些知識點並沒有面面俱到，但我覺得你至少應該掌握這些，纔有可能跟我坐到一間辦公室裏來。
少量提問
我非常贊同面試者問的問題越少越好。反覆問應聘者各種問題既不公平，也很無聊。我在任何一次面試中，通常只問三個大問題，但每個問題又會涉及我所能想到的多個方面。回答每個大問題一般要經過幾個步驟，這樣我就可以在每個步驟中穿插着問一些小問題。比如說：
現在有一個正顯示着Yahoo!股票價格的頁面。頁面上有一個按鈕，你可以單擊它來刷新價格，但不會重新加載頁面。請你描述一下實現這個功能的過程，假設服務器會負責準備好正確的股票價格數據。
這個問題牽扯到一組我想要考察的基本知識點：DOM結構、DOM操作、事件處理、XHR和JSON。如果我要求你對換一種處理股票價格的方式，或者讓你在頁面中顯示其他信息，就可以把更多的知識點包括進來。對於經驗比較豐富應聘者，我也可以自如地擴展要考察的知識範圍，最簡單像JOSN與XML的區別、安全問題、容量問題，等等。
我還希望應聘者給出的任何解決方案中都不要使用庫。我想看到最原生態的代碼，你就當頁面中沒有包含任何庫。你說你對哪個庫瞭解多少多少，但我不能把關於庫的知識作爲評判能力的因素，因爲庫是會隨時間變化的。我需要的是真正理解庫背後的機制，特別是能夠徒手寫出一個自己的庫的人。
解決問題
做爲一名前端工程師，最值得高興的事莫過於解決同一個問題會有很多種不同的方法，而你要做的就是找出最合適的方法來。我在提問的時候，經常會在應聘者解釋完一種方法後問他們還有沒有第二種方法。此時我會跟他們說，假設你的這個方法由於種種原因被否決了，那麼你還能不能給出另一種方法。這樣做可以達到兩個目的。
首先，可以測試出他們是否在毫無意義地複述書本中的東西。不能不承認，某些人確實有過目不忘的天賦，聽他們在那裏滔滔不絕地講，你會覺得他們什麼都明白。可是，只要一跟這些人談到怎麼查找方案無效的原因，以及能否拿出一個新方案來，他們往往就傻眼了。這時候，如果我聽到“我不明白這個方案爲什麼不夠好”之類的反問，心裏立刻就明白我的問題已經超出了他們的能力範圍，而他們只是想拿自己死記硬背的結論來矇混過關。
其次，可以測試出他們已經掌握的（還是那句話，“想都不用想”）瀏覽器技術知識。如果他們對瀏覽器平臺的核心知識有較好的理解，想出解決同一問題的不同方案根本沒有那麼難。
對一名前端工程師來說，這絕對是最重要的能力。前端工程師在工作中遇到本該如此卻並未如此的難題（說你啦，IE6），應該說是一件很平常的事。一個方案無效就無計可施的人，做不了前端工程師。
考覈應聘者解決問題能力的另一層原因，與我的個人喜好有關。在搞清楚應聘者知道什麼不知道什麼之後，我就會想着問一個他們知識領域之外的問題。這樣做的目的，就是想看看他們怎樣運用已有的知識解決新問題。在解決問題的每一步，我也準備了一些提示，以防有人會卡殼打艮（在我面前15分鐘一言不發，對我評價這個人毫無幫助）。我真正感興趣的，是他們能夠從上一步前進到下一步。我希望看到一個人就在我眼前學到新知識。
注意：所有問題都與瀏覽器技術相關。我不相信出幾道抽象的邏輯題，就能夠考出某人解決Web技術問題的能力。在我看來，這無異於讓素描大師畫肖像（或者讓劉翔跟博爾特同場競技），沒有意義，也得不到任何有價值的信息。
有激情
要成爲一名優秀的前端工程師，最重要的莫過於對自己做的事要有激情。我們技能都不是從學校中或者從研討會上學來的，因此前端工程師必須具備自學能力。瀏覽器技術的變化可謂日新月異，所以也只有不斷提升自己的技能才做得到與時俱進。我雖然不能強迫誰必須多看博客、不斷學習，但想應聘前端工程師的人恐怕還是必須這麼做的。
你怎麼知道誰對這種工作有沒有激情?實際上非常簡單。我只問一個簡單的問題：“目前你對什麼Web技術最感興趣?”這個問題永遠不會過期，而且也幾乎不可能出錯……除非你答不上來。就眼下來說，我希望你對這個問題給出的技術中包括WebSocket、HTML、WebGL、客戶端數據庫，等等。只有對Web開發充滿激情的人，纔會堅持不懈地學習新知識、掌握新技能；這些人才是我真正想要的。當然，我會讓他們詳細解釋自己提到的技術，以保證他們不是隨口說了幾個時髦的新詞彙。
最後一點
計算機科學或者Web設計方面的知識當然也有用，但那都是基本知識之外的東西。只要基本知識在那兒了，一切就都有了基礎，想擴充知識面也不難。可是，如果等到正式上班以後，還得從頭學習基本技能，那種難度是不可同日而語的。另外，高級前端工程師與一般工程師相比，肯定需要掌握更多的技能。而面試幾乎沒有經驗大學畢業生，同樣也會有一套完全不同的程序。我在這篇文章裏列出來的都是一些最基本的東西。
對於那些還沒有多少面試經驗的人，我總是喜歡告訴他們，面試完了只要問自己一個問題就行：你想以後跟這個人在一起共事嗎?如果不管爲什麼，回答是不，那就是不。
面試前端工程師對我來說是一件非常有意思的事，因爲面試過程很大程度上也是自我提升的過程。無論大公司還是小公司，之所以在如何招聘到真正有能力的前端工程師方面會遇到同樣的問題，就是因爲負責招聘的那些人不知道自己公司需要什麼樣的人，結果問問題時也問不到點子上。經過這幾年在行業裏的摸索，我總結出了自己的一套很有效的面試前端工程的方法。
有的應聘者說我不好對付，但留給他們這樣的印象也並非我所願。我覺得之所以他們說我不好對付，主要是因爲我問他們問題時問得太細了。以前我曾專門寫過一些東西，告訴應聘者怎麼才能通過我的面試（Surviving an interview with me）以及優秀的前面工程師應該具備什麼樣的素質（What makes a good front end engineer?），而我的面試可以說完全是按照那兩篇文章的標準進行的。我不會問一些特別偏門的問題，也不認爲出幾道邏輯題就能考出人的真實水平。我唯一的想法就是確定你能否勝任我們要招的這個職位。爲此，我需要簡單地考察如下幾個方面。
基本知識
我們生活在互聯網時代，你想知道的任何事情幾乎都能在15分鐘內找到相關信息。可是，能找到信息並不等於你會使用它。我認爲所有前端工程師至少都應該掌握某些基本的知識，纔能有效地完成自己的工作。如果一遇到問題，就停下工作上網四處搜索解決方案，怎麼可能保證按期完成工作呢?聽聽，還有誰在說“我不知道，但我可以上網搜到。”請這些同學把手舉起來，讓大家認識一下（immediately raises a flag for me.）。下面我列出一些基本的知識點，這些都是我認爲一名前端工程師（無論工作年頭長短）在沒有任何外來幫助的情況應該知道的。
DOM結構——兩個節點之間可能存在哪些關係以及如何在節點之間任意移動。
DOM操作——怎樣添加、移除、移動、複製、創建和查找節點。
事件——怎樣使用事件以及IE和DOM事件模型之間存在哪些主要差別。
XMLHttpRequest——這是什麼、怎樣完整地執行一次GET請求、怎樣檢測錯誤。
嚴格模式與混雜模式——如何觸發這兩種模式，區分它們有何意義。
盒模型——外邊距、內邊距和邊框之間的關係，IE 8以下版本的瀏覽器中的盒模型有什麼不同。
塊級元素與行內元素——怎麼用CSS控制它們、它們怎樣影響周圍的元素以及你覺得應該如何定義它們的樣式。
浮動元素——怎麼使用它們、它們有什麼問題以及怎麼解決這些問題。
HTML與XHTML——二者有什麼區別，你覺得應該使用哪一個並說出理由。
JSON——它是什麼、爲什麼應該使用它、到底該怎麼使用它，說出實現細節來。
前端開發工程師面試題 Javascript
1. 要動態改變層中內容可以使用的方法有（AB ）
a)innerHTML
b)innerText
c)通過設置層的隱藏和顯示來實現
d)通過設置層的樣式屬性的display屬性
當按鍵盤A時，使用onKeyDown事件打印event.keyCode的結果是（A ）
a)65
b)13
c)97
d)37在javascript裏，下列選項中不屬於數組方法的是（B）；
a)sort()
b)length()
c)concat()
d)reverse()下列哪一個選項可以用來檢索被選定的選項的索引號?(B)
a)disabled
b)selectedIndex
c)option
d)multiple希望圖片具有”提交”按鈕同樣的功能,該如何編寫表單提交?(A )
a)在圖片的onClick事件中手動提交
b)在圖片上添加onSubmit事件
c)在圖片的onSubmit事件中手動提交
d)在表單中自動提交使div層和文本框處在同一行的代碼正確的是(D );
a)
b)
c)
d)下列選項中,描述正確的是(選擇兩項) 。( AD )
a)options.add(new Option(‘a’,’A’))可以動態添加一個下拉列表選項
b)option.add(new Option(‘a’,’A’))可以動態添加一個下拉列表選項
c)new Option(‘a’,’A’)中’a’表示列表選項的值,’A’用於在頁面中顯示
d)new Option(‘a’,’A’)中’A’表示列表選項的值,’a’用於在頁面中顯示、 var emp = new Array(3);
for(var i in emp)
以下答案中能與for循環代碼互換的是: （選擇一項）。(D )
A for(var i =0; i
B for(var i =0; i
C for(var i =0; i
D for(var i =0; i製作級聯菜單功能時調用的是下拉列表框的（A ）事件。
a)onChange
b)onFocus
c)selected
d)onClick下列聲明數組的語句中，錯誤的選項是（ C ）。
a)Var arry= new Array()
b)Var arry=new Array(3)
c)Var arry[]=new Array(3)(4)
d)Var arry=new Array(‘3’,’4’)下列屬性哪一個能夠實現層的隱藏?（C ）
a)display:fals
b)display:hidden
c)display:none
d)display:” ”下列哪一個選項不屬於document對象的方法?（D ）
a)focus()
b)getElementById()
c)getElementsByName()
d)bgColor()下列哪項是按下鍵盤事件(AB )
a)onKeyDown
b)onKeyPress
c)keyCode
d)onMouseOver- javascript進行表單驗證的目的是（B ）
a)把用戶的正確信息提交給服務器
b)檢查提交的數據必須符合實際
c)使得頁面變得美觀、大方
d)減輕服務器端的壓力 、 display屬性值的常用取值不包括(C )
a)inline
b)block
c)hidden
d)none以下有關pixelTop屬性與top屬性的說法正確的是。(D )
a)都是Location對象的屬性
b)使用時返回值都是字符串
c)都是返回以像素爲單位的數值
d)以上都不對使用open方法打開具有瀏覽器工具條,地址欄,菜單欄的窗口，下列選項正確的是D
a)open(“x.html”,”HI”,”toolbas=1,scrollbars=1,status=1”);
b)open(“HI”,”scrollbars=1,location=1,status=1”);
c)open(“x.html”,”status=yes,menubar=1,location=1”);
d)open(“x.html”,”HI”,”toolbas=yes,menubar=1,location=1”);下面關閉名爲mydiv的層的代碼正確的是(C )
a)document.getElementByIdx_x_x_x(mydiv).style.display=”none”;
b)document.getElementByIdx_x_x_x(“mydiv”).style.display=none;
c)document.getElementByIdx_x_x_x(“mydiv”).style.display=”none”;
d)document.getElementByIdx_x_x_x(“mydiv”).style.display==”none”;爲什麼要使用Div+CSS佈局
形式與內容分離
大大減少頁面代碼，提高頁面瀏覽速度
結構清晰，有利於SEO
縮短改版時間， 佈局更方便
一次設計，多次使用Block元素的特點是什麼?哪些元素默認爲Block元素
總是在新行上開始；
高度，行高以及頂和底邊距都可控制；
寬度缺省是它的容器的100%，除非設定一個寬度
是塊元素的有：div,p,img- 、 inline元素的特點是什麼?哪些元素屬於inline元素?
和其他元素都在一行上；
高，行高及頂和底邊距不可改變；
寬度就是它的文字或圖片的寬度，不可改變。
是inline元素的有：a、span、input 、 javascript中表達式parseInt(“X8X8”)+paseFloat(‘8’)的結果是什麼?( C)
a)8+8
b)88
c)16
d)“8”+’8String對象的方法不包括(C )
a)charAt()；
b)substring()
c)length
d)toUpperCase()關於setTimeout(“check”,10)中說法正確的是( D)
a)程序循環執行10次
b)Check函數每10秒執行一次
c)10做爲參數傳給函數check
d)Check函數每10毫秒執行一次以下哪個單詞不屬於javascript關鍵字：（C）
a)with
b)parent
c)class
d)void
前言
本文總結了一些優質的前端面試題（多數源於網絡），初學者閱後也要用心鑽研其中的原理，重要知識需要系統學習，透徹學習，形成自己的知識鏈。萬不可投機取巧，只求面試過關是錯誤的！
面試有幾點需注意：(來源程劭非老師 github:@wintercn)
面試題目： 根據你的等級和職位變化，入門級到專家級：範圍↑、深度↑、方向↑。
題目類型： 技術視野、項目細節、理論知識題，算法題，開放性題，案例題。
進行追問： 可以確保問到你開始不懂或面試官開始不懂爲止，這樣可以大大延展題目的區分度和深度，知道你的實際能力。因爲這種關聯知識是長時期的學習，絕對不是臨時記得住的。
回答問題再棒，面試官（可能是你的直接領導面試），會考慮我要不要這個人做我的同事？所以態度很重要。（感覺更像是相親）
資深的工程師能把 absolute 和 relative 弄混，這樣的人不要也罷，因爲團隊需要的你這個人具有可以依靠的才能（靠譜）。
前端開發面試知識點大綱：
HTML&CSS：
對Web標準的理解、瀏覽器內核差異、兼容性、hack、CSS基本功：佈局、盒子模型、選擇器優先級及使用、HTML5、CSS3、移動端適應
JavaScript：
數據類型、面向對象、繼承、閉包、插件、作用域、跨域、原型鏈、模塊化、自定義事件、內存泄漏、事件機制、異步裝載回調、模板引擎、Nodejs、JSON、ajax等。
其他：
HTTP、安全、正則、優化、重構、響應式、移動端、團隊協作、可維護、SEO、UED、架構、職業生涯
網易2015校招-前端工程師（筆試題）
1.對於多關鍵字而言，那種文件組織方便而又高效()
A、順序文件 B、倒排文件 C、散列文件 D、B+樹索引文件
2.以下哪些算法可用於遍歷網絡圖()
A、廣度優先搜索 B、深度優先搜索 C、線性規劃策略 D、決策樹
3.我們使用一個6元組來表示6個節點的無向圖的頂點數，請問以下哪些6元組是可能的組合()
A、<1,2,3,4,5,6> B、<2,4,4,2,3,5> C、<1,3,4,2,2,1> D、<1,2,2,4,5,2>
4.以下關於可計算性的說法正確的是()
A、所有問題最終都可以抽象爲一個計算模型，圖靈機可以在一個有限的時間(雖然可能會佔用非常久的時間)內完成計算：現代計算機的設計正是基於該理論。
B、存在部分問題，我們無法在有限時間內，給出解答：但是，所有問題都可以在有限時間內驗證其解答的正確性。
C、 Godel(哥德爾)第一定律指明不存在完備且相容的公理系統。
D、以上說法都不正確。
- 16進制數值C396和8進制數值64474的異或結果值(10進制)爲()
A、43690 B、16660 C、60350 D、20375
6.以下經典的問題哪些屬於NP問題()
A、圖靈停機問題 B、排序 C、0，1揹包問題 D、枚舉有限集合的所有子集
7.存在以下字母串：AGDCCDDDGFBBFFGGDDDGGGEFFDDCCCDDDFGAAA現在需要對該串進行Huffman編碼，那麼字母F對應bit值(二進制格式爲)()
A、10 B、11 C、110 D、101
8.進程管理如果設計不當將會導致“死鎖”的產生，對待死鎖，典型的銀行家算法屬於(1)，而剝奪資源屬於(2)的方法。
A、(1)=死鎖預防，(2)=死鎖避免
B、(1)=死鎖預防，(2)=死鎖解除
C、(1)=死鎖避免，(2)=死鎖預防
D、(1)=死鎖避免，(2)=死鎖解除
9.關於數據庫索引，以下說法正確的是()
A、針對某些字段建立索引，能夠有小減少相關數據庫表的磁盤空間佔用;
B、針對某些字段建立索引，能夠有效的提升相關字段的讀與寫的效率;
C、常見數據庫管理系統，通常使用hash表來存儲索引;
D、數據庫索引的存在，可能導致相關字段刪除的效率降低;
簡答題:
1、什麼是閉包，閉包有什麼用?請舉例說明。
2.apply 和 call 的用法和區別。
3.bind 函數的兼容性
4.參考給出的原型圖和要求，手寫 html，css和 js。
5.飛機起飛時，人會感覺到有一股力壓在身上，爲什麼?施力者是誰?
6.飛機平穩飛行後，你在過道跳起來，會不會撞到飛機尾部?
7.n是一個奇數，求證n(n^2-1)能被24整除
8.兩個r進制的數，N和N’,它們的位數相同，數字也都相同，只是排序不一樣(比如12345和25413)求證N-N’能被r-1整除。
9.關於session的。 爲什麼使用session?使用session的根本原因是?假如你使用的編程語言沒有提供對session的支持，請你使用僞代碼實現session機制。 請說明在你實現的機制中的安全因素。
10.假如要讓你的機制實現多個web服務器前端(幾多個機器)，你要怎樣實現?假如要讓你的機制實現勿單點故障點(即一臺機器當掉，不影響整個系統的運行)，你要怎樣實現?
2015騰訊WEB前端開發筆試題：
1 請實現，鼠標點擊頁面中的任意標籤，alert該標籤的名稱.(注意兼容性)
2 請指出一下代碼的性能問題，並經行優化。
var info=”騰訊拍拍網(www.paipai.com)是騰訊旗下知名電子商務網站。”;
info +=”拍拍網於2005年9月12日上線發佈，”;
info +=”2006年3月13日宣佈正式運營，”;
info +=”是目前國內第二大電子商務平臺。”;
info=info.split(“,”);
for(var i=0; i{
alert(info[i]);
}
3 請給出異步加載js方案，不少於兩種。
4 請寫出jQuery綁定事件的方法，不少於兩種。
5 請設計一套方案，用於確保頁面中JS加載完全。
6 請優化某網頁的加載速度。
7 對string對象經行擴展，使其具有刪除前後空格的方法。
8 完成一個正則表達式，驗證用戶輸入是否身份證號碼。
意志是每一個人的精神力量，是要創造或是破壞某種東西的自由的憧憬，是能從無中創造奇蹟的創造力。――萊蒙托夫
Web前端開發筆試題集錦：
1，截取字符串abcdefg的efg
var str = “abcdefg”;
if (/efg/.test(str)) {
var efg = str.substr(str.indexOf(“efg”), 3);
alert(efg);
}
2, 判斷字符串是否是這樣組成的，第一個必須是字母，後面可以是字母、數字、下劃線，總長度爲5-20
var reg = /^[a-zA-Z][a-zA-Z_0-9]{4,19}$/;
reg.test(“a1a__a1a__a1a__a1a__”);
3，判斷一個字符串中出現次數最多的字符，統計這個次數
//將字符串的字符保存在一個hash table中，key是字符，value是這個字符出現的次數
var str = “abcdefgaddda”;
var obj = {};
for (var i = 0, l = str.length; i < l; i++) {
var key = str[i];
if (!obj[key]) {
obj[key] = 1;
} else {
obj[key]++;
}
}
/遍歷這個hash table，獲取value最大的key和value/
var max = -1;
var max_key = “”;
var key;
for (key in obj) {
if (max < obj[key]) {
max = obj[key];
max_key = key;
}
}
alert(“max:”+max+” max_key:”+max_key);
4，IE與FF腳本兼容性問題
(1) window.event：
表示當前的事件對象，IE有這個對象，FF沒有，FF通過給事件處理函數傳遞事件對象
(2) 獲取事件源
IE用srcElement獲取事件源，而FF用target獲取事件源
(3) 添加，去除事件
IE：element.attachEvent(“onclick”, function) element.detachEvent(“onclick”, function)
FF：element.addEventListener(“click”, function, true) element.removeEventListener(“click”, function, true)
(4) 獲取標籤的自定義屬性
IE：div1.value或div1[“value”]
FF：可用div1.getAttribute(“value”)
(5) document.getElementByName()和document.all[name]
IE;document.getElementByName()和document.all[name]均不能獲取div元素
FF：可以
(6) input.type的屬性
IE：input.type只讀
FF：input.type可讀寫
(7) 是否可用id代替HTML元素
IE：可以用id來代替HTML元素
FF：不可以
(8) innerText textContent outerHTML
IE：支持innerText, outerHTML
FF：支持textContent