史上最全前端面試題(含答案)-A篇

HTML+CSS
1.對WEB標準以及W3C的理解與認識
標籤閉合、標籤小寫、不亂嵌套、提升搜索機器人搜索概率、使用外 鏈css和js腳本、結構行爲表現的分離、文件下載與頁面速度更快、內容能被更多的用戶所訪問、內容能被更普遍的設備所訪問、更少的代碼和組件，容易維 護、改版方便，不須要變更頁面內容、提供打印版本而不須要複製內容、提升網站易用性；

2.xhtml和html有什麼區別
HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的置標語言
最主要的不一樣：
XHTML 元素必須被正確地嵌套。
XHTML 元素必須被關閉。
標籤名必須用小寫字母。
XHTML 文檔必須擁有根元素。

3.Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義? 
用於聲明文檔使用那種規範（html/Xhtml）通常爲 嚴格 過分 基於框架的html文檔
加入XMl聲明可觸發，解析方式更改成IE5.5 擁有IE5.5的bug

4.行內元素有哪些?塊級元素有哪些?CSS的盒模型?
塊級元素：div p h1 h2 h3 h4 form ul
行內元素: a b br i span input select
Css盒模型:內容，border ,margin，padding

5.CSS引入的方式有哪些? link和@import的區別是?
內聯 內嵌 外鏈 導入
區別 ：同時加載
前者無兼容性，後者CSS2.1如下瀏覽器不支持
Link 支持使用javascript改變樣式，後者不可

6.CSS選擇符有哪些?哪些屬性能夠繼承?優先級算法如何計算?內聯和important哪一個優先級高?
標籤選擇符 類選擇符 id選擇符
繼承不如指定 Id>class>標籤選擇
後者優先級高

7.前端頁面有哪三層構成，分別是什麼?做用是什麼?
結構層 Html 表示層 CSS 行爲層 js

8.css的基本語句構成是?
選擇器{屬性1:值1;屬性2:值2;……}

9.你作的頁面在哪些流覽器測試過?這些瀏覽器的內核分別是什麼?
Ie(Ie內核) 火狐（Gecko） 谷歌（webkit） opear(Presto)

10.寫出幾種IE6 BUG的解決方法
1.雙邊距BUG float引發的 使用display
2.3像素問題 使用float引發的 使用dislpay:inline -3px
3.超連接hover 點擊後失效 使用正確的書寫順序 link visited hover active
4.Ie 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）

11.標籤上title與alt屬性的區別是什麼?
Alt 當圖片不顯示是 用文字表明。
Title 爲該屬性提供信息

12.描述css reset的做用和用途。
Reset重置瀏覽器的css默認屬性 瀏覽器的品種不一樣，樣式不一樣，而後重置，讓他們統一

13.解釋css sprites，如何使用。
Css 精靈 把一堆小的圖片整合到一張大的圖片上，減輕服務器對圖片的請求數量

14.瀏覽器標準模式和怪異模式之間的區別是什麼?
盒子模型 渲染模式的不一樣
使用 window.top.document.compatMode 可顯示爲何模式

15.你如何對網站的文件和資源進行優化?期待的解決方案包括：
文件合併
文件最小化/文件壓縮
使用CDN託管
緩存的使用

16.什麼是語義化的HTML?
直觀的認識標籤 對於搜索引擎的抓取有好處

17.清除浮動的幾種方式，各自的優缺點
1.使用空標籤清除浮動 clear:both（理論上能清楚任何標籤，，，增長無心義的標籤）
2.使用overflow:auto（空標籤元素清除浮動而不得不增長無心代碼的弊端,,使用zoom:1用於兼容IE）
3.是用afert僞元素清除浮動(用於非IE瀏覽器)

Javascript
1.javascript的typeof返回哪些數據類型
Object number function boolean underfind

2.例舉3種強制類型轉換和2種隱式類型轉換?
強制（parseInt,parseFloat,number）
隱式（== – ===）

3.split() join() 的區別
前者是切割成數組的形式，後者是將數組轉換成字符串

4.數組方法pop() push() unshift() shift()
Push()尾部添加 pop()尾部刪除
Unshift()頭部添加 shift()頭部刪除

5.事件綁定和普通事件有什麼區別

6.IE和DOM事件流的區別
1.執行順序不同、
2.參數不同
3.事件加不加on
4.this指向問題

7.IE和標準下有哪些兼容性的寫法
Var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
Var target = ev.srcElement||ev.target

8.ajax請求的時候get 和post方式的區別
一個在url後面 一個放在虛擬載體裏面
有大小限制
安全問題
應用不一樣 一個是論壇等只須要請求的，一個是相似修改密碼的

9.call和apply的區別
Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)

10.ajax請求時，如何解釋json數據
使用eval parse 鑑於安全性考慮 使用parse更靠譜
11.b繼承a的方法

12.寫一個獲取非行間樣式的函數

function getStyle(obj,attr,value)
{
if(!value)
{
if(obj.currentStyle)
{
return obj.currentStyle(attr)
}
else
{
obj.getComputedStyle(attr,false)
}
}
else
{
obj.style[attr]=value
}
}

13.事件委託是什麼
讓利用事件冒泡的原理，讓本身的所觸發的事件，讓他的父元素代替執行！
http://www.webasily.com/?p=78 例子可見此連接

14.閉包是什麼，有什麼特性，對頁面有什麼影響
閉包就是可以讀取其餘函數內部變量的函數。
http://blog.csdn.net/gaoshanwudi/article/details/7355794 此連接可查看（問這個問題的不是一個公司）

15.如何阻止事件冒泡和默認事件
canceBubble return false

16.添加 刪除 替換 插入到某個接點的方法
obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild

17.解釋jsonp的原理，以及爲何不是真正的ajax
動態建立script標籤，回調函數
Ajax是頁面無刷新請求數據操做

18.javascript的本地對象，內置對象和宿主對象
本地對象爲array obj regexp等能夠new實例化
內置對象爲gload Math 等不能夠實例化的
宿主爲瀏覽器自帶的document,window 等

19.document load 和document ready的區別
Document.onload 是在結構和樣式加載完才執行js
Document.ready原生種沒有這個方法，jquery中有 $().ready(function)

20.」==」和「===」的不一樣
前者會自動轉換類型
後者不會

21.javascript的同源策略
一段腳本只能讀取來自於同一來源的窗口和文檔的屬性，這裏的同一來源指的是主機名、協議和端口號的組合

22.編寫一個數組去重的方法
function oSort(arr)
{
var result ={};
var newArr=[];
for(var i=0;i
{
if(!result[arr])
{
newArr.push(arr)
result[arr]=1
}
}
return newArr
}
來自IT公司面試手冊





[HTML && CSS]1.Doctype嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義?


嚴格模式：使用此類型的網頁，瀏覽器解析將相對嚴格，不容許使用任何表現樣式的標識和屬性，好比在元素中直接使用background-color背景色屬性。
混雜模式：瀏覽器對XHTML的解析較爲寬鬆。容許使用4.01中的標籤，但必須符合XHTML的語法。
2：行內元素有哪些?塊級元素有哪些?CSS的盒模型?
行內元素：span,a,var ,em,input,img,img,textarea,var,em,strong,select,
塊級標籤：div,p,h1-h3,ul,ol,dl,li,dd,dt,table,td,tr,
CSS的盒模型：CSS佈局中的每個元素，在瀏覽器的解析中，都被當作一個盒狀物。
3.CSS引入的方式有哪些? link和@import的區別是?
CSS引入的方式
在html文檔的head部分加入:

在html文檔的head部分直接寫入css文檔。
直接在html標籤裏寫入對這個標籤的css控制
測試信息

link和@import的區別是link寫在html頁面中，@import寫在CSS頁面中
4.CSS選擇符有哪些?哪些屬性能夠繼承?優先級算法如何計算?內聯和important哪一個優先級高?
CSS選擇符: 類選擇器 、 標籤名選擇器、 ID選擇器 、 後代選擇器（派生選擇器）、 羣組選擇器
能夠繼承： 類選擇器 、 標籤名選擇器、 後代選擇器（派生選擇器）、羣組選擇器
優先級算法：
標籤內直接定義：1000
ID選擇器：100
類選擇器 ：10
標籤名選擇器：1
內聯和important中，important優先級高
5:前端頁面有哪三層構成，分別是什麼?做用是什麼?
結構層；主要指DOM節點；HTML/XHTML
樣式層；主要是指頁面渲染；CSS
腳本層：主要指頁面動畫效果；JS/AS
6:css的基本語句構成是?
選擇符、屬性、值
8：你作的頁面在哪些流覽器測試過?這些瀏覽器的內核分別是什麼?常常遇到的瀏覽器的兼容性有哪些?怎麼會出現?解決方法是什麼?
IE六、七、八、FF、Opear、Safari、Chrome、Maxthon
Trident：Windows 下的 IE 瀏覽器使用的內核代號。除 IE 外，衆多的 IE Shell（如 Maxthon ）都使用這個內核。

Gecko：Mozilla Firefox 瀏覽器使用的內核代號。
Presto：Opera 瀏覽器使用的內核代號，這是目前公認網頁瀏覽速度最快的瀏覽器內核。
KHTML/WebCore： Konqueror/Safari 瀏覽器使用的內核代號。
常常遇到的瀏覽器兼容問題：
1.在有的瀏覽器中，默認字體大小爲12px,因此在設字體大小的時候，最小設爲12px，若是在作的過程當中，發現字體小於12，可直接做爲圖片使用
2.a標籤對裏不能嵌套a標籤對
3.若給a標籤內的內容樣式加上樣式，須要設置display:block;（在IE中若是設置寬高會自動變成塊，在FF中則不會），但若是設置了float屬性，就不須要設置display:block。
4.ul，ol在FF默認狀況下，有list-style-type樣式和padding值，dl在IE和FF默認狀況下，有padding值，因此應該事先聲明ul,li,ol,dl,dd,dd{margin:0;padding:0}。
5.做爲外部 wrapper 的 div 不要定死高度, 最好還加上 overflow: hidden.以達到高度自適應
6.關於手形光標. cursor: pointer. 而hand 只適用於 IE.
7.css佈局中的居中問題:在父級元素定義TEXT-ALIGN: center;這個的意思就是在父級元素內的內容居中；對於IE這樣設定就已經能夠了。但在mozilla中不能居中。解決辦法就是在子元素定義時候設定時再加上「margin-right: auto;margin-left: auto; 」須要說明的是，若是你想用這個方法使整個頁面要居中，建議不要套在一個DIV裏，你能夠依次拆出多個div，只要在每一個拆出的div裏定義margin-right: auto;margin-left: auto; 就能夠了。
8.浮動ie產生的雙倍距離
#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屬性值。

div{margin: 0;padding: 0;border:1px red solid;}

2.怎樣添加、移除、移動、複製、建立和查找節點
添加：append
刪除：remove
移動：
複製：
建立：create
查找：


（1）建立新節點



      createDocumentFragment()    //建立一個DOM片斷



      createElement_x_x()   //建立一個具體的元素



      createTextNode()   //建立一個文本節點



（2）添加、移除、替換、插入



      a()



      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，在調試時使用便於開發的模式，調試完成後直接壓縮併發布。讓用戶獲得最快捷的用戶體驗。






百度：
一、JavaScript有哪幾種數據類型
二、中alt和tittle的區別
三、下面css標籤在JavaScript中調用應如何拼寫，border-left-color，-moz-
四、動態打印 yyyy-mm-dd hh:mm:ss
五、如何提升網頁的運行速度
六、JavaScript中如何對一個對象進行深度clone
七、flash中ActionScript2.0和ActionScript3.0面向對象的異同
答案見http://www.lihaihong.com/article/86.html
第一題
編寫一個方法 求一個字符串的字節長度
第二題
如何控制alert中的換行
第三題
解釋document.getElementByIdx_x_x_x(「ElementID」).style.fontSize=」1.5em」
第四題
將一個相似圖中的效果分離成css和html
第五題
按照格式 xxxx年xx月xx日xx時xx分xx秒動態顯示時間 要求不足10的補0
第六題
編寫一個方法 去掉一個數組的重複元素
第七題
說出3條以上ff和ie的腳本兼容問題
第八題
按要求寫一個簡單的ajax示例 簡單的沒意義 就不寫了
騰訊：
1.請實現，鼠標點擊頁面中的任意標籤，alert該標籤的名稱．（注意兼容性）
HTML && CSS
1.Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義? 行內元素有哪些?塊級元素有哪些?CSS的盒模型?
2.CSS引入的方式有哪些? link和@import的區別?
3.CSS選擇符有哪些?哪些屬性能夠繼承?優先級?內聯和important哪一個優先級高?
4.常常遇到的瀏覽器的兼容性有哪些?怎麼會出現?解決方法是什麼?
5.如何居中一個浮動元素?
6.HTML5和CSS3的瞭解狀況
7.你怎麼來實現下面這個設計圖

Javascript
1.怎樣添加、移除、移動、複製、建立和查找節點


（1）建立新節點



      createDocumentFragment()    //建立一個DOM片斷



      createElement_x_x()   //建立一個具體的元素



      createTextNode()   //建立一個文本節點



（2）添加、移除、替換、插入



      a()



      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——它是什麼、爲何應該使用它、到底該怎麼使用它，說出實現細節來。
重申一下，上述這些知識點都應該是你應該「想都不用想」的東西。我一開始問的全部問題都是想摸清你對全部這些領域知識的掌握程度。雖然上面列出的這些知識點並無面面俱到，但我以爲你至少應該掌握這些，纔有可能跟我坐到一間辦公室裏來。

少許提問
我很是贊同面試者問的問題越少越好。反覆問應聘者各類問題既不公平，也很無聊。我在任何一次面試中，一般只問三個大問題，但每一個問題又會涉及我所能想到的多個方面。回答每一個大問題通常要通過幾個步驟，這樣我就能夠在每一個步驟中穿插着問一些小問題。好比說：

如今有一個正顯示着Yahoo!股票價格的頁面。頁面上有一個按鈕，你能夠單擊它來刷新價格，但不會從新加載頁面。請你描述一下實現這個功能的過程，假設服務器會負責準備好正確的股票價格數據。

這個問題牽扯到一組我想要考察的基本知識點：DOM結構、DOM操做、事件處理、XHR和JSON。若是我要求你對換一種處理股票價格的方式，或者讓你在頁面中顯示其餘信息，就能夠把更多的知識點包括進來。對於經驗比較豐富應聘者，我也能夠自如地擴展要考察的知識範圍，最簡單像JOSN與XML的區別、安全問題、容量問題，等等。

我還但願應聘者給出的任何解決方案中都不要使用庫。我想看到最原生態的代碼，你就當頁面中沒有包含任何庫。你說你對哪一個庫瞭解多少多少，但我不能把關於庫的知識做爲評判能力的因素，由於庫是會隨時間變化的。我須要的是真正理解庫背後的機制，特別是可以徒手寫出一個本身的庫的人。

解決問題
作爲一名前端工程師，最值得高興的事莫過於解決同一個問題會有不少種不一樣的方法，而你要作的就是找出最合適的方法來。我在提問的時候，常常會在應聘者解釋完一種方法後問他們還有沒有第二種方法。此時我會跟他們說，假設你的這個方法因爲種種緣由被否決了，那麼你還能不能給出另外一種方法。這樣作能夠達到兩個目的。

首先，能夠測試出他們是否在毫無心義地複述書本中的東西。不能不認可，某些人確實有過目不忘的天賦，聽他們在那裏口若懸河地講，你會以爲他們什麼都明白。但是，只要一跟這些人談到怎麼查找方案無效的緣由，以及可否拿出一個新方案來，他們每每就傻眼了。這時候，若是我聽到「我不明白這個方案爲何不夠好」之類的反問，內心馬上就明白個人問題已經超出了他們的能力範圍，而他們只是想拿本身死記硬背的結論來矇混過關。

其次，能夠測試出他們已經掌握的（仍是那句話，「想都不用想」）瀏覽器技術知識。若是他們對瀏覽器平臺的核心知識有較好的理解，想出解決同一問題的不一樣方案根本沒有那麼難。

對一名前端工程師來講，這絕對是最重要的能力。前端工程師在工做中遇到本該如此卻並未如此的難題（說你啦，IE6），應該說是一件很日常的事。一個方案無效就機關用盡的人，作不了前端工程師。

考覈應聘者解決問題能力的另外一層緣由，與個人我的喜愛有關。在搞清楚應聘者知道什麼不知道什麼以後，我就會想着問一個他們知識領域以外的問題。這樣作的目的，就是想看看他們怎樣運用已有的知識解決新問題。在解決問題的每一步，我也準備了一些提示，以防有人會卡殼打艮（在我面前15分鐘一聲不響，對我評價這我的毫無幫助）。我真正感興趣的，是他們可以從上一步前進到下一步。我但願看到一我的就在我眼前學到新知識。

注意：全部問題都與瀏覽器技術相關。我不相信出幾道抽象的邏輯題，就可以考出某人解決Web技術問題的能力。在我看來，這無異於讓素描大師畫肖像（或者讓劉翔跟博爾特同場競技），沒有意義，也得不到任何有價值的信息。

有激情
要成爲一名優秀的前端工程師，最重要的莫過於對本身作的事要有激情。咱們技能都不是從學校中或者從研討會上學來的，所以前端工程師必須具有自學能力。瀏覽器技術的變化可謂突飛猛進，因此也只有不斷提高本身的技能才作獲得與時俱進。我雖然不能強迫誰必須多看博客、不斷學習，但想應聘前端工程師的人恐怕仍是必須這麼作的。

你怎麼知道誰對這種工做有沒有激情?實際上很是簡單。我只問一個簡單的問題：「目前你對什麼Web技術最感興趣?」這個問題永遠不會過時，並且也幾乎不可能出錯……除非你答不上來。就眼下來講，我但願你對這個問題給出的技術中包括WebSocket、HTML、WebGL、客戶端數據庫，等等。只有對Web開發充滿激情的人，纔會堅持不懈地學習新知識、掌握新技能；這些人才是我真正想要的。固然，我會讓他們詳細解釋本身提到的技術，以保證他們不是隨口說了幾個時髦的新詞彙。

最後一點
計算機科學或者Web設計方面的知識固然也有用，但那都是基本知識以外的東西。只要基本知識在那兒了，一切就都有了基礎，想擴充知識面也不難。但是，若是等到正式上班之後，還得從頭學習基本技能，那種難度是不可同日而語的。另外，高級前端工程師與通常工程師相比，確定須要掌握更多的技能。而面試幾乎沒有經驗大學畢業生，一樣也會有一套徹底不一樣的程序。我在這篇文章裏列出來的都是一些最基本的東西。

對於那些尚未多少面試經驗的人，我老是喜歡告訴他們，面試完了只要問本身一個問題就行：你想之後跟這我的在一塊兒共事嗎?若是無論爲何，回答是不，那就是不。




前端開發工程師面試題 Javascript
1. 要動態改變層中內容可使用的方法有（AB ）
a)innerHTML
b)innerText
c)經過設置層的隱藏和顯示來實現
d)經過設置層的樣式屬性的display屬性

2. 當按鍵盤A時，使用onKeyDown事件打印event.keyCode的結果是（A ）
a)65
b)13
c)97
d)37

3. 在javascript裏，下列選項中不屬於數組方法的是（B）；
a)sort()
b)length()
c)concat()
d)reverse()
4. 下列哪個選項能夠用來檢索被選定的選項的索引號?(B)
a)disabled
b)selectedIndex
c)option
d)multiple

5. 但願圖片具備」提交」按鈕一樣的功能,該如何編寫表單提交?(A )
a)在圖片的onClick事件中手動提交
b)在圖片上添加onSubmit事件
c)在圖片的onSubmit事件中手動提交
d)在表單中自動提交

6. 使div層和文本框處在同一行的代碼正確的是(D );
a)
b)
c)
d)
7. 下列選項中,描述正確的是(選擇兩項) 。( 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'用於在頁面中顯示

8. 、 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

9. 製做級聯菜單功能時調用的是下拉列表框的（A ）事件。
a)onChange
b)onFocus
c)selected
d)onClick

10. 下列聲明數組的語句中，錯誤的選項是（ 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’)

11. 下列屬性哪個可以實現層的隱藏?（C ）
a)display:fals
b)display:hidden
c)display:none
d)display:」 」

12. 下列哪個選項不屬於document對象的方法?（D ）
a)focus()
b)getElementById()
c)getElementsByName()
d)bgColor()

13. 下列哪項是按下鍵盤事件(AB )
a)onKeyDown
b)onKeyPress
c)keyCode
d)onMouseOver
14. javascript進行表單驗證的目的是（B ）
a)把用戶的正確信息提交給服務器
b)檢查提交的數據必須符合實際
c)使得頁面變得美觀、大方
d)減輕服務器端的壓力
15. 、 display屬性值的經常使用取值不包括(C )
a)inline
b)block
c)hidden
d)none

16. 如下有關pixelTop屬性與top屬性的說法正確的是。(D )
a)都是Location對象的屬性
b)使用時返回值都是字符串
c)都是返回以像素爲單位的數值
d)以上都不對

17. 使用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");

18. 下面關閉名爲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";
19. 爲何要使用Div+CSS佈局
形式與內容分離
大大減小頁面代碼，提升頁面瀏覽速度
結構清晰，有利於SEO
縮短改版時間， 佈局更方便
一次設計，屢次使用

20. Block元素的特色是什麼?哪些元素默認爲Block元素
老是在新行上開始；
高度，行高以及頂和底邊距均可控制；
寬度缺省是它的容器的100%，除非設定一個寬度
是塊元素的有：,,
,
, 和21. 、 inline元素的特色是什麼?哪些元素屬於inline元素?
和其餘元素都在一行上；
高，行高及頂和底邊距不可改變；
寬度就是它的文字或圖片的寬度，不可改變。

是inline元素的有：, , ,
, , 
和。 

22. 、 javascript中表達式parseInt(「X8X8」)+paseFloat(‘8’)的結果是什麼?( C)
a)8+8
b)88
c)16
d)「8」+’8

23. String對象的方法不包括(C )
a)charAt()；
b)substring()
c)length
d)toUpperCase()

24. 關於setTimeout(「check」,10)中說法正確的是( D)
a)程序循環執行10次
b)Check函數每10秒執行一次
c)10作爲參數傳給函數check
d)Check函數每10毫秒執行一次

25. 如下哪一個單詞不屬於javascript關鍵字：（C）
a)with
b)parent
c)class
d)void 


前言
　　本文總結了一些優質的前端面試題（多數源於網絡），初學者閱後也要用心鑽研其中的原理，重要知識須要系統學習，透徹學習，造成本身的知識鏈。萬不可投機取巧，只求面試過關是錯誤的！

面試有幾點需注意：(來源程劭非老師 github:@wintercn)
面試題目： 根據你的等級和職位變化，入門級到專家級：範圍↑、深度↑、方向↑。

題目類型： 技術視野、項目細節、理論知識題，算法題，開放性題，案例題。

進行追問： 能夠確保問到你開始不懂或面試官開始不懂爲止，這樣能夠大大延展題目的區分度和深度，知道你的實際能力。由於這種關聯知識是長時期的學習，絕對不是臨時記得住的。

回答問題再棒，面試官（多是你的直接領導面試），會考慮我要不要這我的作個人同事？因此態度很重要。（感受更像是相親）

資深的工程師能把 absolute 和 relative 弄混，這樣的人不要也罷，由於團隊須要的你這我的具備能夠依靠的才能（靠譜）。

前端開發面試知識點大綱：


HTML&CSS：
    對Web標準的理解、瀏覽器內核差別、兼容性、hack、CSS基本功：佈局、盒子模型、選擇器優先級及使用、HTML五、CSS三、移動端適應 

JavaScript：  
    數據類型、面向對象、繼承、閉包、插件、做用域、跨域、原型鏈、模塊化、自定義事件、內存泄漏、事件機制、異步裝載回調、模板引擎、Nodejs、JSON、ajax等。

其餘：
   HTTP、安全、正則、優化、重構、響應式、移動端、團隊協做、可維護、SEO、UED、架構、職業生涯 

做爲一名前端工程師，不管工做年頭長短都應該必須掌握的知識點：

此條由 王子墨 發表在 前端隨筆


    一、DOM結構 —— 兩個節點之間可能存在哪些關係以及如何在節點之間任意移動。

    二、DOM操做  ——如何添加、移除、移動、複製、建立和查找節點等。

    三、事件    —— 如何使用事件，以及IE和標準DOM事件模型之間存在的差異。

    四、XMLHttpRequest —— 這是什麼、怎樣完整地執行一次GET請求、怎樣檢測錯誤。

    五、嚴格模式與混雜模式 —— 如何觸發這兩種模式，區分它們有何意義。

    六、盒模型 —— 外邊距、內邊距和邊框之間的關係，及IE8如下版本的瀏覽器中的盒模型

    七、塊級元素與行內元素 —— 怎麼用CSS控制它們、以及如何合理的使用它們

    八、浮動元素——怎麼使用它們、它們有什麼問題以及怎麼解決這些問題。

    九、HTML與XHTML——兩者有什麼區別，你以爲應該使用哪個並說出理由。

    十、JSON  —— 做用、用途、設計結構。