- Web前端面試題目及答案 推薦度：
- 相關推薦
web前端面試題及答案
一些面試中經(jīng)常會遇到的經(jīng)典面試題以及自己面試過程中無法解決的問題,如下是中國人才網(wǎng)給大家整理的，希望對大家有所作用。
web前端面試題及答案
HTML/CSS部分
1、什么是盒子模型?
在網(wǎng)頁中，一個元素占有空間的大小由幾個部分構成，其中包括元素的內容(content)，元素的內邊距(padding)，元素的邊框(border)，元素的外邊距(margin)四個部分。這四個部分占有的空間中，有的部分可以顯示相應的內容，而有的部分只用來分隔相鄰的區(qū)域或區(qū)域。4個部分一起構成了css中元素的盒模型。
2、行內元素有哪些?塊級元素有哪些? 空(void)元素有那些?
行內元素：a、b、span、img、input、strong、select、label、em、button、textarea
塊級元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote
空元素：即系沒有內容的HTML元素，例如：br、meta、hr、link、input、img
3、CSS實現(xiàn)垂直水平居中
一道經(jīng)典的問題，實現(xiàn)方法有很多種，以下是其中一種實現(xiàn)：
HTML結構：
CSS：
.wrapper{position:relative;}
.content{
background-color:#6699FF;
width:200px;
height:200px;
position: absolute; //父元素需要相對定位
top: 50%;
left: 50%;
margin-top:-100px ; //二分之一的height，width
margin-left: -100px;
}
4、簡述一下src與href的'區(qū)別
href 是指向網(wǎng)絡資源所在位置，建立和當前元素(錨點)或當前文檔(鏈接)之間的鏈接，用于超鏈接。
src是指向外部資源的位置，指向的內容將會嵌入到文檔中當前標簽所在位置;在請求src資源時會將其指向的資源下載并應用到文檔內，例如js腳本，img圖片和frame等元素。當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源加載、編譯、執(zhí)行完畢，圖片和框架等元素也如此，類似于將所指向資源嵌入當前標簽內。這也是為什么將js腳本放在底部而不是頭部。
5、什么是CSS Hack?
一般來說是針對不同的瀏覽器寫不同的CSS,就是 CSS Hack。
IE瀏覽器Hack一般又分為三種，條件Hack、屬性級Hack、選擇符Hack(詳細參考CSS文檔：css文檔)。例如：
// 1、條件Hack
// 2、屬性Hack
.test{
color:#090\9; /* For IE8+ */
*color:#f00; /* For IE7 and earlier */
_color:#ff0; /* For IE6 and earlier */
}
// 3、選擇符Hack
* html .test{color:#090;} /* For IE6 and earlier */
* + html .test{color:#ff0;} /* For IE7 */
6、簡述同步和異步的區(qū)別
同步是阻塞模式，異步是非阻塞模式。
同步就是指一個進程在執(zhí)行某個請求的時候，若該請求需要一段時間才能返回信息，那么這個進程將會一直等待下去，直到收到返回信息才繼續(xù)執(zhí)行下去;
異步是指進程不需要一直等下去，而是繼續(xù)執(zhí)行下面的操作，不管其他進程的狀態(tài)。當有消息返回時系統(tǒng)會通知進程進行處理，這樣可以提高執(zhí)行的效率。
7、px和em的區(qū)別
px和em都是長度單位，區(qū)別是，px的值是固定的，指定是多少就是多少，計算比較容易。em得值不是固定的，并且em會繼承父級元素的字體大小。
瀏覽器的默認字體高都是16px。所以未經(jīng)調整的瀏覽器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em
8、什么叫優(yōu)雅降級和漸進增強?
漸進增強 progressive enhancement：
針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
優(yōu)雅降級 graceful degradation：
一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。
區(qū)別：
a. 優(yōu)雅降級是從復雜的現(xiàn)狀開始，并試圖減少用戶體驗的供給
b. 漸進增強則是從一個非�；A的，能夠起作用的版本開始，并不斷擴充，以適應未來環(huán)境的需要
c. 降級(功能衰減)意味著往回看;而漸進增強則意味著朝前看，同時保證其根基處于安全地帶
9、瀏覽器的內核分別是什么?
IE: trident內核
Firefox：gecko內核
Safari：webkit內核
Opera：以前是presto內核，Opera現(xiàn)已改用Google Chrome的Blink內核
Chrome：Blink(基于webkit，Google與Opera Software共同開發(fā))
JavaScript部分
1、怎樣添加、移除、移動、復制、創(chuàng)建和查找節(jié)點?
1)創(chuàng)建新節(jié)點
createDocumentFragment() //創(chuàng)建一個DOM片段
createElement() //創(chuàng)建一個具體的元素
createTextNode() //創(chuàng)建一個文本節(jié)點
2)添加、移除、替換、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替換
insertBefore() //插入
3)查找
getElementsByTagName() //通過標簽名稱
getElementsByName() //通過元素的Name屬性的值
getElementById() //通過元素Id，唯一性
2、實現(xiàn)一個函數(shù)clone，可以對JavaScript中的5種主要的數(shù)據(jù)類型(包括Number、String、Object、Array、Boolean)進行值復制。
/**
* 對象克隆
* 支持基本數(shù)據(jù)類型及對象
* 遞歸方法
*/
function clone(obj) {
var o;
switch (typeof obj) {
case "undefined":
break;
case "string":
o = obj + "";
break;
case "number":
o = obj - 0;
break;
case "boolean":
o = obj;
break;
case "object": // object 分為兩種情況 對象(Object)或數(shù)組(Array)
if (obj === null) {
o = null;
} else {
if (Object.prototype.toString.call(obj).slice(8, -1) === "Array") {
o = [];
for (var i = 0; i < obj.length; i++) {
o.push(clone(obj[i]));
}
} else {
o = {};
for (var k in obj) {
o[k] = clone(obj[k]);
}
}
}
break;
default:
o = obj;
break;
}
return o;
}
3、如何消除一個數(shù)組里面重復的元素?
// 方法一：
var arr1 =[1,2,2,2,3,3,3,4,5,6],
arr2 = [];
for(var i = 0,len = arr1.length; i< len; i++){
if(arr2.indexOf(arr1[i]) < 0){
arr2.push(arr1[i]);
}
}
document.write(arr2); // 1,2,3,4,5,6
4、想實現(xiàn)一個對頁面某個節(jié)點的拖曳?如何做?(使用原生JS)。
5、在Javascript中什么是偽數(shù)組?如何將偽數(shù)組轉化為標準數(shù)組?
偽數(shù)組(類數(shù)組)：無法直接調用數(shù)組方法或期望length屬性有什么特殊的行為，但仍可以對真正數(shù)組遍歷方法來遍歷它們。典型的是函數(shù)的argument參數(shù)，還有像調用getElementsByTagName,document.childNodes之類的,它們都返回NodeList對象都屬于偽數(shù)組�？梢允褂肁rray.prototype.slice.call(fakeArray)將數(shù)組轉化為真正的Array對象。
function log(){
var args = Array.prototype.slice.call(arguments);
//為了使用unshift數(shù)組方法，將argument轉化為真正的數(shù)組
args.unshift('(app)');
console.log.apply(console, args);
};
6、Javascript中callee和caller的作用?
caller是返回一個對函數(shù)的引用，該函數(shù)調用了當前函數(shù);
callee是返回正在被執(zhí)行的function函數(shù)，也就是所指定的function對象的正文。
7、請描述一下cookies，sessionStorage和localStorage的區(qū)別
sessionStorage用于本地存儲一個會話(session)中的`數(shù)據(jù)，這些數(shù)據(jù)只有在同一個會話中的頁面才能訪問并且當會話結束后數(shù)據(jù)也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。而localStorage用于持久化的本地存儲，除非主動刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠不會過期的。
web storage和cookie的區(qū)別
Web Storage的概念和cookie相似，區(qū)別是它是為了更大容量存儲設計的。Cookie的大小是受限的，并且每次你請求一個新的頁面的時候Cookie都會被發(fā)送過去，這樣無形中浪費了帶寬，另外cookie還需要指定作用域，不可以跨域調用。
除此之外，Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie需要前端開發(fā)者自己封裝setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是與服務器進行交互，作為HTTP規(guī)范的一部分而存在 ，而Web Storage僅僅是為了在本地“存儲”數(shù)據(jù)而生。
8、手寫數(shù)組快速排序
關于快排算法的詳細說明，可以參考阮一峰老師的文章快速排序
“快速排序”的思想很簡單，整個排序過程只需要三步：
(1)在數(shù)據(jù)集之中，選擇一個元素作為”基準”(pivot)。
(2)所有小于”基準”的元素，都移到”基準”的左邊;所有大于”基準”的元素，都移到”基準”的右邊。
(3)對”基準”左邊和右邊的兩個子集，不斷重復第一步和第二步，直到所有子集只剩下一個元素為止。
9、統(tǒng)計字符串”aaaabbbccccddfgh”中字母個數(shù)或統(tǒng)計最多字母數(shù)。
var str = "aaaabbbccccddfgh";
var obj = {};
for(var i=0;i
var v = str.charAt(i);
if(obj[v] && obj[v].value == v){
obj[v].count = ++ obj[v].count;
}else{
obj[v] = {};
obj[v].count = 1;
obj[v].value = v;
}
}
for(key in obj){
document.write(obj[key].value +'='+obj[key].count+' '); // a=4 b=3 c=4 d=2 f=1 g=1 h=1
}
10、寫一個function，清除字符串前后的空格。(兼容所有瀏覽器)
function trim(str) {
if (str && typeof str === "string") {
return str.replace(/(^\s*)|(\s*)$/g,""); //去除前后空白符
}
}
面試官愛問的問題
01、原來公司工作流程是怎么樣的，如何與其他人協(xié)作的?如何夸部門合作的?
02、你遇到過比較難的技術問題是?你是如何解決的?
03、設計模式 知道什么是singleton, factory, strategy, decrator么?
04、常使用的庫有哪些?常用的前端開發(fā)工具?開發(fā)過什么應用或組件?
05、頁面重構怎么操作?
06、列舉IE與其他瀏覽器不一樣的特性?
07、99%的網(wǎng)站都需要被重構是那本書上寫的?
08、什么叫優(yōu)雅降級和漸進增強?
09、是否了解公鑰加密和私鑰加密。
10、WEB應用從服務器主動推送Data到客戶端有那些方式?
11、對Node的優(yōu)點和缺點提出了自己的看法?
12、你有用過哪些前端性能優(yōu)化的方法?
13、http狀態(tài)碼有那些?分別代表是什么意思?
14、一個頁面從輸入 URL 到頁面加載顯示完成，這個過程中都發(fā)生了什么?(流程說的越詳細越好)
15、部分地區(qū)用戶反應網(wǎng)站很卡，請問有哪些可能性的原因，以及解決方法?
16、從打開app到刷新出內容，整個過程中都發(fā)生了什么，如果感覺慢，怎么定位問題，怎么解決?
17、除了前端以外還了解什么其它技術么?你最最厲害的技能是什么?
18、你用的得心應手用的熟練地編輯器&開發(fā)環(huán)境是什么樣子?
19、對前端界面工程師這個職位是怎么樣理解的?它的前景會怎么樣?
20、你怎么看待Web App 、hybrid App、Native App?
21、你移動端前端開發(fā)的理解?(和 Web 前端開發(fā)的主要區(qū)別是什么?)
22、你對加班的'看法?
23、平時如何管理你的項目?
24、說說最近最流行的一些東西吧?常去哪些網(wǎng)站?
25、如何設計突發(fā)大規(guī)模并發(fā)架構?
26、是否了解開源的工具 bower、npm、yeoman、grunt、gulp，一個 npm 的包里的
package.json 具備的必要的字段都有哪些?(名稱、版本號，依賴)
每個模塊的代碼結構都應該比較簡單，且每個模塊之間的關系也應該非常清晰，隨著功能和迭代
次數(shù)越來越多，你會如何去保持這個狀態(tài)的?
27、Git知道branch, diff, merge么?如何設計突發(fā)大規(guī)模并發(fā)架構?
28、當團隊人手不足，把功能代碼寫完已經(jīng)需要加班的情況下，你會做前端代碼的測試嗎?
29、知道什么是SEO并且怎么優(yōu)化么? 知道各種meta data的含義么?
30、移動端(Android IOS)怎么做好用戶體驗?
31、簡單描述一下你做過的移動APP項目研發(fā)流程?
32、你在現(xiàn)在的團隊處于什么樣的角色，起到了什么明顯的作用?
33、你認為怎樣才是全端工程師(Full Stack developer)?
34、介紹一個你最得意的作品吧?
35、你有自己的技術博客嗎，用了哪些技術?
36、對前端安全有什么看法?
37、是否了解Web注入攻擊，說下原理，最常見的兩種攻擊(XSS 和 CSRF)了解到什么程度?
38、項目中遇到國哪些印象深刻的技術難題，具體是什么問題，怎么解決?。
39、最近在學什么東西?
40、你的優(yōu)點是什么?缺點是什么?
41、如何管理前端團隊?
42、最近在學什么?能談談你未來3，5年給自己的規(guī)劃嗎?
【web前端面試題及答案】相關文章：
Web前端面試題目及答案06-30
最新web前端面試題05-31
一道阿里巴巴Web前端面試題拓展06-18
web前端面試技巧10-23
前端面試題06-20
web前端工作技能簡歷范文08-15
HTML前端開發(fā)面試題及前端知識07-29
前端開發(fā)面試題07-02
前端工程師面試題10-20
java前端開發(fā)面試題09-22