標籤：

Web前端崗位面試題有哪些？

01-14

作者：汪汪

鏈接：知乎專欄

來源：知乎

著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。

這篇文章是對我大四秋招以來面試的總結，裡面包含前端面試知識的方方面面，目前本人已經拿到騰訊offer，希望能對後面找工作的學習學妹們有所幫助。

騰訊面試對基礎比較看重，然後需要你有兩三個比較好的項目，一面重視面試者對前端基礎的把握，還要手寫代碼，不過不難，二面部門的leader面，這一面比較難，面試官會對你的項目細節進行深挖，所以說項目要牛逼一點，最後還會有一道邏輯題（我沒有答上來），三面是HR面，如果你想進大公司的話，下面這些技術是肯定要掌握的：html5，css3，JavaScript，略懂一點jQuery源碼，Node.js，express，mongoose，資料庫mongodb。大公司問的核心在於JavaScript。如果下面的知識點你都可以打上來，恭喜你拿下bat不是問題--2016-11-11寫

轉載請註明出處，碼這麼多字不容易。

一、html+css部分、

（1）css盒模型，可能會要求手寫一個布局，這個布局基本上用到的css是margin的負值，boxing-sizing：border-box，布局盡量往這方面想。瀏覽器布局的基本元素是盒，在w3c的標準模式下，w=width，但是在怪異模式下，w=border*2+padding*2+width;其中後代元素的width：100%；參照的是右邊的那個width，

（2）html5的新特性

1、標籤語義化，比如header，footer，nav，aside，article，section等，新增了很多表單元素，入email，url等，除去了center等樣式標籤，還有除去了有性能問題的frame，frameset等標籤

2、音視頻元素，video，audio的增加使得我們不需要在依賴外部的插件就可以往網頁中加入音視頻元素。

3、新增很多api，比如獲取用戶地理位置的window.navigator.geoloaction，

4、websocket

websocket是一種協議，可以讓我們建立客戶端到伺服器端的全雙工通信，這就意味著伺服器端可以主動推送數據到客戶端，

5、webstorage，webstorage是本地存儲，存儲在客戶端，包括localeStorage和sessionStorage，localeStorage是持久化存儲在客戶端，只要用戶不主動刪除，就不會消失，sessionStorage也是存儲在客戶端，但是他的存在時間是一個回話，一旦瀏覽器的關於該回話的頁面關閉了，sessionStorage就消失了，

6、緩存

html5允許我們自己控制哪些文件需要緩存，哪些不需要，具體的做法如下：

1、首先給html添加manifest屬性，並賦值為cache.manifest
2、cache.manifest的內容為:
CACHE MANIFEST
#v1.2
CACHE : //表示需要緩存的文件
a.js
b.js
NETWORK: //表示只在用戶在線的時候才需要的文件，不會緩存
c.js
FALLBACK
/ /index.html //表示如果找不到第一個資源就用第二個資源代替

7、web worker，web worker是運行在瀏覽器後台的js程序，他不影響主程序的運行，是另開的一個js線程，可以用這個線程執行複雜的數據操作，然後把操作結果通過postMessage傳遞給主線程，這樣在進行複雜且耗時的操作時就不會阻塞主線程了。

（3）對html5的語義話的理解

html5的語義化指的是用正確的標籤包含正確的內容，比如nav標籤，裡面就應該包含導航條的內容，而不是用做其他的用途，標籤語義化的好處就是結構良好，便於閱讀，方便威化，也有利於爬蟲的查找，提高搜索率。

（4）cookie，sessionStorage，localeStorage的區別

cookie是存儲在瀏覽器端，並且隨瀏覽器的請求一起發送到伺服器端的，它有一定的過期時間，到了過期時間自動會消失。sessionStorage和localeStorage也是存儲在客戶端的，同屬於web Storage，比cookie的存儲大小要大有8m，cookie只有4kb，localeStorage是持久化的存儲在客戶端，如果用戶不手動清除的話，不會自動消失，會一直存在，sessionStorage也是存儲在客戶端，但是它的存活時間是在一個回話期間，只要瀏覽器的回話關閉了就會自動消失。

（5）多個頁面之間如何進行通信

使用cookie，使用web worker，使用localeStorage和sessionStorage

（6）瀏覽器的渲染過程

1、首先獲取html，然後構建dom樹

2、其次根據css構建render樹，render樹中不包含定位和幾何信息

3、最後構建布局數，布局是含有元素的定位和幾何信息

（7）重構、迴流

瀏覽器的重構指的是改變每個元素外觀時所觸發的瀏覽器行為，比如顏色，背景等樣式發生了改變而進行的重新構造新外觀的過程。重構不會引發頁面的重新布局，不一定伴隨著迴流，

迴流指的是瀏覽器為了重新渲染頁面的需要而進行的重新計算元素的幾何大小和位置的，他的開銷是非常大的，迴流可以理解為渲染樹需要重新進行計算，一般最好觸發元素的重構，避免元素的迴流；比如通過通過添加類來添加css樣式，而不是直接在DOM上設置，當需要操作某一塊元素時候，最好使其脫離文檔流，這樣就不會引起迴流了，比如設置position：absolute或者fixed，或者display：none，等操作結束後在顯示。

二、JavaScript部分

（1）JavaScript的數據類型

基本數據類型：Number，String，Boolean，Undefined，Null

複雜數據類型：Object，Array，Function，RegExp，Date，Error

全局數據類型：Math

（2）JavaScript的閉包

閉包簡單的說就是一個函數能訪問外部函數的變數，這就是閉包，比如說：

function a(x){
var tem=3;
function b(y){
console.log(x+y+(++tem));
}
}

a函數中的b函數就是閉包了，b函數可以使用a函數的局部變數，參數，最典型的閉包應該是下面這樣，將定義在函數中的函數作為返回值

function a(x){
var tem=3;
function b(y){
console.log(x+y+(++tem));
}
return b;
}

閉包的另一種作用是隔離作用域，請看下面這段代碼

for(var i=0;i&<2;i++){ setTimeout(function(){ console.log(i); },0); }

上面這段代碼的執行結果是2,2而不是0,1，因為等for循環出來後，執行setTimeout中的函數時，i的值已經變成了2，這就是沒有隔離作用域所造成的，請看下面代碼

for(var i=0;i&<2;i++){ (function(i){ setTimeout(function(){ console.log(i); },0) })(i); }

這樣就會輸出0,1，我們的立即執行函數創建了一個作用域，隔離了外界的作用域，閉包的缺點是，因為內部閉包函數可以訪問外部函數的變數，所以外部函數的變數不能被釋放，如果閉包嵌套過多，會導致內存佔用大，要合理使用閉包。

（3）new 操作符到底做了什麼

首先，new操作符為我們創建一個新的空對象，然後this變數指向該對象，

其次，空對象的原型執行函數的原型，

最後，改變構造函數內部的this的指向

代碼如下：

var obj={};
obj.__proto__=fn.prototype;
fn.call(obj);

（4）改變函數內部this指針的指向函數

call和apply，假設要改變fn函數內部的this的指向，指向obj，那麼可以fn.call(obj);或者fn.apply(obj);那麼問題來了，call和apply的區別是什麼，其是call和apply的區別在於參數，他們兩個的第一個參數都是一樣的，表示調用該函數的對象，apply的第二個參數是數組，是[arg1,arg2,arg3]這種形式，而call是arg1,arg2,arg3這樣的形式。還有一個bind函數，

var bar=fn.bind(obj);那麼fn中的this就指向obj對象了，bind函數返回新的函數，這個函數內的this指針指向obj對象。

（5）JavaScript的作用域和作用域鏈

JavaScript的作用域指的是變數的作用範圍，內部作用域由函數的形參，實參，局部變數，函數構成，內部作用域和外部的作用域一層層的鏈接起來形成作用域鏈，當在在函數內部要訪問一個變數的時候，首先查找自己的內部作用域有沒有這個變數，如果沒有就到這個對象的原型對象中去查找，還是沒有的話，就到該作用域所在的作用域中找，直到到window所在的作用域，每個函數在聲明的時候就默認有一個外部作用域的存在了，比如：

var t=4;
function foo(){
var tem=12;
funciton bar(){
var temo=34;
console.log(t+" "+tem+" "+temo);
}
}

bar找t變數的過程就是，先到自己的內部作用域中找，發現沒有找到，然後到bar所在的最近的外部變數中找，也就是foo的內部作用域，還是沒有找到，再到window的作用域中找，結果找到了

（6）JavaScript的繼承

function A(name){ this.name=name; }
A.prototype.sayName=function(){ console.log(this.name); }
function B(age){ this.age=age; }

原型繼承

B.prototype=new A("mbj"); //被B的實例共享
var foo=new B(18);
foo.age; //18,age是本身攜帶的屬性
foo.name; //mbj，等價於foo.__proto__.name
foo.sayName(); //mbj,等價於foo.__proto__.proto__.sayName()
foo.toString(); //"[object Object]",等價於foo.__proto__.__proto__.__proto__.toString();

這樣B通過原型繼承了A，在new B的時候，foo中有個隱藏的屬性__proto__指向構造函數的prototype對象，在這裡是A對象實例，A對象裡面也有一個隱藏的屬性__proto__,指向A構造函數的prototype對象，這個對象裡面又有一個__proto__指向Object的prototype

這種方式的缺第一個缺點是所有子類共享父類實例，如果某一個子類修改了父類，其他的子類在繼承的時候，會造成意想不到的後果。第二個缺點是在構造子類實例的時候，不能給父類傳遞參數。

構造函數繼承

function B(age,name){ this.age=age;A.call(this,name); }
var foo=new B(18,"wmy");
foo.name; //wmy
foo.age; //18
foo.sayName(); //undefined

採用這種方式繼承是把A中的屬性加到this上面，這樣name相當於就是B的屬性，sayName不在A的構造函數中，所以訪問不到sayName。這種方法的缺點是父類的prototype中的函數不能復用。

原型繼承+構造函數繼承

function B(age,name){ this.age=age;A.call(this,name); }
B.prototype=new A("mbj");
var foo=new B(18,"wmy");
foo.name; //wmy
foo.age; //18
foo.sayName(); //wmy

這樣就可以成功訪問sayName函數了，結合了上述兩種方式的優點，但是這種方式也有缺點，那就是佔用的空間更大了。

（7）JavaScript變數提升

請看下面代碼

var bar=1;
function test(){
console.log(bar); //undeifned
var bar=2;
console.log(bar); //2
}
test();

為什麼在test函數中會出現上述結果呢，這就是JavaScript的變數提升了，雖然變數bar的定義在後面，不過瀏覽器在解析的時候，會把變數的定義放到最前面，上面的test函數相當於

function test(){
var bar;
console.log(bar); //undefined
bar=2;
console.log(bar); //2
}

再看

var foo=function(){ console.log(1); }
function foo(){ console.log(2); }
foo(); //結果為1
同樣的，函數的定義也會到提升到最前面，上面的代碼相當於
function foo(){ console.log(2); }
var foo;
foo=funciton(){ console.log(1); }
foo(); //1

（8）JavaScript事件模型

原始事件模型，捕獲型事件模型，冒泡事件模型，

原始事件模型就是ele.onclick=function(){}這種類型的事件模型

冒泡事件模型是指事件從事件的發生地（目標元素），一直向上傳遞，直到document，

捕獲型則恰好相反，事件是從document向下傳遞，直到事件的發生地（目標元素）

IE是只支持冒泡事件模型的，下面是兼容各個瀏覽器的事件監聽代碼

EventUtil={
addListener:function(target,type,handler){
if(target.addEventListener){
target.addEventListener(type,handler);
}else if(target.attachEvent){
target.attach("on"+type,function(){
handler.call(target); //讓handler中的this指向目標元素
});
}else{
target["on"+type]=handler;
}
},
removeListener:function(target,type,handler){
if(target.removeEventListener){
target.removeEventListener(type,handler);
}else if(target.detachEvent){
target.detachEvent("on"+type,handler);
}else{
target["on"+type]=null;
}
},
getEvent:function(e){ //獲取事件對象
var evt=window.event||e;
return evt;
},
getTarget:function(e){ //獲得目標對象
var evt=EventUtil.getEvent(e);
var target;
if(evt.target){ target=evt.target;}
else {target=evt.srcElement;}
return target;
},
stopPropagation:function(e){ //停止冒泡
var evt=EventUtil.getEvent(e);
if(evt.stopPropagation) {evt.stopPropagation();}
else {evt.cancelBubble=true;}
},
preventDefault:function(e){ //阻值默認行為的發生
var evt=EventUtil.getEvent(e);
if(evt.preventDefault){ evt.preventDefault(); }
else {e.returnValue=false;}
}
}

（9）內存泄漏

內存泄漏指的是瀏覽器不能正常的回收內存的現象

（10）瀏覽器的垃圾回收機制

垃圾收集器必須跟蹤哪個變數有用哪個變數沒用，對於不再有用的變數打上標記，以備將來收回其佔用的內存，內存泄露和瀏覽器實現的垃圾回收機制息息相關， 而瀏覽器實現標識無用變數的策略主要有下兩個方法：

第一，引用計數法

跟蹤記錄每個值被引用的次數。當聲明一個變數並將引用類型的值賦給該變數時，則這個值的引用次數就是1。如果同一個值又被賦給另一個變數，則該值的引用次 數加1.相反，如果包含對這個值引用的變數又取得另外一個值，則這個值的引用次數減1.當這個值的引用次數變成0時，則說明沒有辦法訪問這個值了，因此就 可以將其佔用的內存空間回收回來。

如： var a = {}; //對象{}的引用計數為1
b = a; //對象{}的引用計數為 1+1
a = null; //對象{}的引用計數為2-1

所以這時對象{}不會被回收;

IE 6, 7 對DOM對象進行引用計數回收， 這樣簡單的垃圾回收機制，非常容易出現循環引用問題導致內存不能被回收， 進行導致內存泄露等問題，一般不用引用計數法。

第二，標記清除法

到2008年為止，IE,Firefox,Opera,Chrome和Safari的javascript實現使用的都是標記清除式的垃圾收集策略（或類似的策略），只不過垃圾收集的時間間隔互有不同。

標記清除的演算法分為兩個階段，標記(mark)和清除(sweep). 第一階段從引用根節點開始標記所有被引用的對象，第二階段遍歷整個堆，把未標記的對象清除。

（11）同源策略

同源策略是瀏覽器有一個很重要的概念。所謂同源是指，域名，協議，埠相同。不同源的客戶端腳本(javascript、ActionScript)在沒明確授權的情況下，不能讀寫對方的資源。簡單的來說，瀏覽器允許包含在頁面A的腳本訪問第二個頁面B的數據資源，這一切是建立在A和B頁面是同源的基礎上。

（12）跨域的幾種方式

jsonp（利用script標籤的跨域能力）跨域、websocket（html5的新特性，是一種新協議）跨域、設置代理伺服器（由伺服器替我們向不同源的伺服器請求數據）、CORS（跨源資源共享，cross origin resource sharing）、iframe跨域、postMessage(包含iframe的頁面向iframe傳遞消息)

（13）非同步和同步

同步指下一個程序的執行需要等到上一個程序執行完畢，也就是得出結果後下一個才能執行，

非同步指的是上一個程序指向後，下一個程序不用等到上一個程序出結果就能執行，等上一個出結果了調用回調函數處理結果就好。

（14）JavaScript的值類型和引用類型

JavaScript有兩種類型的數據，值類型和引用類型，一般的數字，字元串，布爾值都是值類型，存放在棧中，而對象，函數，數組等是引用類型，存放在堆中，對引用類型的複製其實是引用複製，相當於複製著地址，對象並沒有真正的複製。

var a=5;var b=a;a=null; //那麼b是5
var a={},var b=a;b.name="mbj";
console.log(a.name); //mbj，因為a，b指向同一個對象
a=null;console.log(typeof b); //object，a=null，只是a不再指向該對象，但是這個對象還是在堆中確確實實的存在，b依然指向它。

（15）優化下面代碼

var str="我喜歡我可愛的女朋友，"；
str=str+"她叫喵喵，";
str=str+"她時而可愛，時而認真，";
str=str+"她那天真的笑聲可以讓人忘掉一切煩惱。";
console.log(str);

這裡的優化主要是對加號操作符的優化，因為加號在JavaScript中非常耗時和耗內存，需要經過以下六步：

1、首先開闢一塊臨時空間，存儲字元串，
2、然後在開闢一塊空間
3、把str中的字元串複製到剛剛開闢的空間
4、在把需要連接的字元串複製到str後面
5、str指向這塊空間
6、回收str原來的空間和臨時空間

優化的方法是使用數組的push方法，數組是連續的存儲空間，可以省下很多步

var res=[];
var str="我喜歡我可愛的女朋友，"；
res.push(str);
res.push("她叫喵喵，");
res.push("她時而可愛，時而認真，");
res.push("她那天真的笑聲可以讓人忘掉一切煩惱。");
console.log(res.join(""));

（16）封裝cookie的添加，刪除，查詢方法

cookie是存儲在瀏覽器端的，可以用於存儲sessionID，也可以用於自動登陸，記住密碼等，但是在瀏覽器端並沒有官方的操作cookie的方法，下面我們來封裝一下：

CookieUtil=｛
addCookie:function(key,value,options){
var str=key+"="+escape(value);
if(options.expires){
var curr=new Date(); //options.expires的單位是小時
curr.setTime(curr.getTime()+options.expires*3600*1000);
options.expires=curr.toGMTString();
}
for(var k in options){ //有可能指定了cookie的path，cookie的domain
str+=";"+k+"="+options[k];
}
document.cookie=str;
},
queryCookie:function(key){
var cookies=document.cookie;
//獲得瀏覽器端存儲的cookie,格式是key=value;key=value;key=value
cookies+=";";
var start=cookies.indexOf(key);
if(start&<=-1){ return null; } //說明不存在該cookie var end=cookies.indexOf(";",start); var value=cookies.slice(start+key.length+1,end); return unescape(value); }, deleteCookie:function(key){ var value=CookieUtil.queryCookie(key); if(value===null){return false;} CookieUtil.addCookie(key,value,{expires:0});//把過期時間設置為0，瀏覽器會馬上自動幫我們刪除cookie } ｝

（17）事件委託機制

事件委託指的是，不再事件的發生地設立監聽函數，而是在事件發生地的父元素或者祖先元素設置監聽器函數，這樣可以大大提高性能，因為可以減少綁定事件的元素，比如：

& && && && &

要給li元素綁定click事件，使用事件委託機制的話，就只需要給ul綁定click事件就行了，這樣就不需要給每個li"綁定click事件，減小內存佔用，提高效率，有興趣的童鞋可以去看看jQuery的live，bind，on，delegate函數的區別，這幾個函數就採用了事件委託機制。

三、其他部分

（1）http狀態碼

http狀態碼是表示伺服器對請求的響應狀態，主要分為以下幾個部分

1**：這類響應是臨時響應，只包含狀態行和某些可選的響應頭信息，並以空行結束

2**：表示請求成功，

3**：表示重定向

4**：表示客戶端錯誤

5**：表示伺服器端錯誤

100（continue），客戶端應當繼續發送請求。這個臨時響應是用來通知客戶端它的部分請求已經被伺服器接收

200（OK），表示請求成功，請求所希望的響應頭或數據體將隨此響應返回。

202（Accepted），伺服器已接受請求，但尚未處理。

204（No-Content），伺服器成功處理了請求，但不需要返回任何實體內容

205（Reset-Content），伺服器成功處理了請求，且沒有返回任何內容。但是與204響應不同，返回此狀態碼的響應要求請求者重置文檔視圖。該響應主要是被用於接受用戶輸入後，立即重置表單，以便用戶能夠輕鬆地開始另一次輸入。

206（Partial-Content），伺服器已經成功處理了部分 GET 請求。

301（Moved-Permanently），永久性重定向

302（Moved-Temporarily），暫時性重定向

304（Not-Modified），瀏覽器端緩存的資源依然有效

400（Bad-Reques），請求有誤，當前請求無法被伺服器理解。

401（Unauthorized），當前請求需要用戶驗證。

403（Forbidden），伺服器已經理解請求，但是拒絕執行它。

404（Not-Found），請求的資源沒有被找到

500（Interval Server Error），伺服器內部錯誤

502（Bad GateWay），網關出錯

503（Service Unavailable），由於臨時的伺服器維護或者過載，伺服器當前無法處理請求。

504（Gateway Timeout），作為網關或者代理工作的伺服器嘗試執行請求時，未能及時從上游伺服器（URI標識出的伺服器，例如HTTP、FTP、LDAP）或者輔助伺服器（例如DNS）收到響應。

（2）xss，csrf的概念以及防範方法

大公司如bat在面試的時候，web安全問題是必問的問題，所以一定要懂，要徹底理解xss和csrf的概念和防範方式，最好在項目中有用到對這兩種攻擊的防範，這樣會給你的面試加很多分。由xss和csrf涉及的東西比較多，我就不具體給出了，詳情請看XSS攻擊及防禦，CSRF攻擊

（3）CommonJs，AMD，CMD規範

對於前端模塊化來說，這三個規範是必須要了解的，詳情請看我的這篇文章CommonJS，AMD，CMD

（4）談談對前端模塊化的理解

前端模塊話就是把複雜的文件分成一個個獨立的模塊，比如js文件，分成獨立的模塊之後有利於代碼的重用和維護，但是這樣又會引來模塊與模塊之間的依賴問題，所以就有了CommonJS、AMD、CMD規範，最後出現了webpack，webpack就是前端模塊話的一種解決方案，基本上大公司都會使用webpack，想要詳細的學習webpack的話請看webpack簡明使用教程

（5）優雅降級和漸進增強

優雅降級指的是一開始就構建功能完好的網站，然後在慢慢兼容低版本的瀏覽器，使得各個瀏覽器之間的差異不要太大。

漸進增強是指在基本功能得到滿足的情況下，對支持新特性的瀏覽器使用新特性，帶給用戶更換的體驗。

優雅降級和漸進增強的出發點不同，前者是慢慢向下兼容，是向後看，後著是慢慢向上，增強功能，是向前看。

（6）前端優化（提高網頁的載入速度）

1、使用css sprites，可以有效的減少http請求數

2、使用緩存

3、壓縮js，css文件，減小文件體積

4、使用cdn，減小伺服器負擔

5、懶載入圖片

6、預載入css，js文件

7、避免dom結構的深層次嵌套

8、給DOM元素添加樣式時，把樣式放到類中，直接給元素添加類，減少重構，迴流

更多詳細的前端優化請看前端優化：雅虎35條或者前端性能優化----yahoo前端性能團隊總結的35條黃金定律

四、前端學習文章推薦

知乎上面有人推薦了很多前端學習網站，具體信息請看

關於 Javascript 學習，有哪些好的博客或者網站推薦？

作者：徐尤熙

鏈接：還有半年時間，怎麼準備前端工程師的校招？ - 徐尤熙的回答

來源：知乎

著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。

前端面試題匯總，多餘的就不說先做會這些東西吧

HTML

  • Doctype作用？嚴格模式與混雜模式如何區分？它們有何意義?

  • HTML5 為什麼只需要寫 &？

  • 行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？

  • 頁面導入樣式時，使用link和@import有什麼區別？

  • 介紹一下你對瀏覽器內核的理解？

  • 常見的瀏覽器內核有哪些？

  • html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和 HTML5？

  • 簡述一下你對HTML語義化的理解？

  • HTML5的離線儲存怎麼使用，工作原理能不能解釋一下？

  • 瀏覽器是怎麼對HTML5的離線儲存資源進行管理和載入的呢？

  • 請描述一下 cookies，sessionStorage 和 localStorage 的區別？

  • iframe有那些缺點？

  • Label的作用是什麼？是怎麼用的？（加 for 或 包裹）

  • HTML5的form如何關閉自動完成功能？

  • 如何實現瀏覽器內多個標籤頁之間的通信? (阿里)

  • webSocket如何兼容低瀏覽器？(阿里)

  • 頁面可見性（Page Visibility）API 可以有哪些用途？

  • 如何在頁面上實現一個圓形的可點擊區域？

  • 實現不使用 border 畫出1px高的線，在不同瀏覽器的Quirksmode和CSSCompat模式下都能保持同一效果。

  • 網頁驗證碼是幹嘛的，是為了解決什麼安全問題？

  • tite與h1的區別、b與strong的區別、i與em的區別？

css

  • 介紹一下標準的CSS的盒子模型？與低版本IE的盒子模型有什麼不同的？

  • CSS選擇符有哪些？哪些屬性可以繼承？

  • CSS優先順序演算法如何計算？

  • CSS3新增偽類有那些？

  • 如何居中div？如何居中一個浮動元素？如何讓絕對定位的div居中？

  • display有哪些值？說明他們的作用。

  • position的值relative和absolute定位原點是？

  • CSS3有哪些新特性？

  • 請解釋一下CSS3的Flexbox（彈性盒布局模型）,以及適用場景？

  • 用純CSS創建一個三角形的原理是什麼？

  • 一個滿屏 品 字布局 如何設計?

  • 常見兼容性問題？

  • li與li之間有看不見的空白間隔是什麼原因引起的？有什麼解決辦法？

  • 經常遇到的瀏覽器的兼容性有哪些？原因，解決方法是什麼，常用hack的技巧 ？

  • 為什麼要初始化CSS樣式。

  • absolute的containing block計算方式跟正常流有什麼不同？

  • CSS里的visibility屬性有個collapse屬性值是幹嘛用的？在不同瀏覽器下以後什麼區別？

  • position跟display、margin collapse、overflow、float這些特性相互疊加後會怎麼樣？

  • 對BFC規範(塊級格式化上下文：block formatting context)的理解？

  • CSS權重優先順序是如何計算的？

  • 請解釋一下為什麼會出現浮動和什麼時候需要清除浮動？清除浮動的方式

  • 移動端的布局用過媒體查詢嗎？

  • 使用 CSS 預處理器嗎？喜歡那個？

  • CSS優化、提高性能的方法有哪些？

  • 瀏覽器是怎樣解析CSS選擇器的？

  • 在網頁中的應該使用奇數還是偶數的字體？為什麼呢？

  • margin和padding分別適合什麼場景使用？

  • 抽離樣式模塊怎麼寫，說出思路，有無實踐經驗？[阿里航旅的面試題]

  • 元素豎向的百分比設定是相對於容器的高度嗎？

  • 全屏滾動的原理是什麼？用到了CSS的那些屬性？

  • 什麼是響應式設計？響應式設計的基本原理是什麼？如何兼容低版本的IE？

  • 視差滾動效果，如何給每頁做不同的動畫？（回到頂部，向下滑動要再次出現，和只出現一次分別怎麼做？）

  • ::before 和 :after中雙冒號和單冒號 有什麼區別？解釋一下這2個偽元素的作用。

  • 如何修改chrome記住密碼後自動填充表單的黃色背景 ？

  • 你對line-height是如何理解的？

  • 設置元素浮動後，該元素的display值是多少？（自動變成display:block）

  • 怎麼讓Chrome支持小於12px 的文字？

  • 讓頁面里的字體變清晰，變細用CSS怎麼做？（-webkit-font-smoothing: antialiased;）

  • font-style屬性可以讓它賦值為「oblique」 oblique是什麼意思？

  • position:fixed;在android下無效怎麼處理？

  • 如果需要手動寫動畫，你認為最小時間間隔是多久，為什麼？（阿里）

  • display:inline-block 什麼時候會顯示間隙？(攜程)

  • overflow: scroll時不能平滑滾動的問題怎麼處理？

  • 有一個高度自適應的div，裡面有兩個div，一個高度100px，希望另一個填滿剩下的高度。

  • png、jpg、gif 這些圖片格式解釋一下，分別什麼時候用。有沒有了解過webp？

  • 什麼是Cookie 隔離？（或者說：請求資源的時候不要讓它帶cookie怎麼做）

  • style標籤寫在body後與body前有什麼區別？

JavaScript

  • 介紹JavaScript的基本數據類型。

  • 說說寫JavaScript的基本規範？

  • JavaScript原型，原型鏈 ? 有什麼特點？

  • JavaScript有幾種類型的值？（堆：原始數據類型和 棧：引用數據類型），你能畫一下他們的內存圖嗎？

  • Javascript如何實現繼承？

  • Javascript創建對象的幾種方式？

  • Javascript作用鏈域?

  • 談談This對象的理解。

  • eval是做什麼的？

  • 什麼是window對象? 什麼是document對象?

  • null，undefined的區別？

  • 寫一個通用的事件偵聽器函數(機試題)。

  • [「1」, 「2」, 「3」].map(parseInt) 答案是多少？

  • 關於事件，IE與火狐的事件機制有什麼區別？ 如何阻止冒泡？

  • 什麼是閉包（closure），為什麼要用它？

  • javascript 代碼中的」use strict」;是什麼意思 ? 使用它區別是什麼？

  • 如何判斷一個對象是否屬於某個類？

  • new操作符具體幹了什麼呢?

  • 用原生JavaScript的實現過什麼功能嗎？

  • Javascript中，有一個函數，執行時對象查找時，永遠不會去查找原型，這個函數是？

  • 對JSON的了解？

  • [].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1&<&<24))).toString(16) }) 能解釋一下這段代碼的意思嗎？

  • js延遲載入的方式有哪些？

  • Ajax 是什麼? 如何創建一個Ajax？

  • 同步和非同步的區別?

  • 如何解決跨域問題?

  • 頁面編碼和被請求的資源編碼如果不一致如何處理？

  • 模塊化開發怎麼做？

  • AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）規範區別？

  • requireJS的核心原理是什麼？（如何動態載入的？如何避免多次載入的？如何 緩存的？）

  • 讓你自己設計實現一個requireJS，你會怎麼做？

  • 談一談你對ECMAScript6的了解？

  • ECMAScript6 怎麼寫class么，為什麼會出現class這種東西?

  • 非同步載入的方式有哪些？

  • documen.write和 innerHTML的區別?

  • DOM操作——怎樣添加、移除、移動、複製、創建和查找節點?

  • .call() 和 .apply() 的含義和區別？

  • 數組和對象有哪些原生方法，列舉一下？

  • JS 怎麼實現一個類。怎麼實例化這個類

  • JavaScript中的作用域與變數聲明提升？

  • 如何編寫高性能的Javascript？

  • 那些操作會造成內存泄漏？

  • JQuery的源碼看過嗎？能不能簡單概況一下它的實現原理？

  • jQuery.fn的init方法返回的this指的是什麼對象？為什麼要返回this？

  • jquery中如何將數組轉化為json字元串，然後再轉化回來？

  • jQuery 的屬性拷貝(extend)的實現原理是什麼，如何實現深拷貝？

  • jquery.extend 與 jquery.fn.extend的區別？

  • jQuery 的隊列是如何實現的？隊列可以用在哪些地方？

  • 談一下Jquery中的bind(),live(),delegate(),on()的區別？

  • JQuery一個對象可以同時綁定多個事件，這是如何實現的？

  • 是否知道自定義事件。jQuery里的fire函數是什麼意思，什麼時候用？

  • jQuery 是通過哪個方法和 Sizzle 選擇器結合的？（jQuery.fn.find()進入Sizzle）

  • 針對 jQuery性能的優化方法？

  • Jquery與jQuery UI有啥區別？

  • JQuery的源碼看過嗎？能不能簡單說一下它的實現原理？

  • jquery 中如何將數組轉化為json字元串，然後再轉化回來？

  • jQuery和Zepto的區別？各自的使用場景？

  • 針對 jQuery 的優化方法？

  • Zepto的點透問題如何解決？

  • jQueryUI如何自定義組件?

  • 需求：實現一個頁面操作不會整頁刷新的網站，並且能在瀏覽器前進、後退時正確響應。給出你的技術實現方案？

  • 如何判斷當前腳本運行在瀏覽器還是node環境中？（阿里）

  • 移動端最小觸控區域是多大？

  • jQuery 的 slideUp動畫 ，如果目標元素是被外部事件驅動, 當滑鼠快速地連續觸發外部元素事件, 動畫會滯後的反覆執行，該如何處理呢?

  • 把 Script 標籤 放在頁面的最底部的body封閉之前 和封閉之後有什麼區別？瀏覽器會如何解析它們？

  • 移動端的點擊事件的有延遲，時間是多久，為什麼會有？ 怎麼解決這個延時？（click 有 300ms 延遲,為了實現safari的雙擊事件的設計，瀏覽器要知道你是不是要雙擊操作。）

  • 知道各種JS框架(Angular, Backbone, Ember, React, Meteor, Knockout…)么? 能講出他們各自的優點和缺點么?

  • Underscore 對哪些 JS 原生對象進行了擴展以及提供了哪些好用的函數方法？

  • 解釋JavaScript中的作用域與變數聲明提升？

  • 那些操作會造成內存泄漏？

  • JQuery一個對象可以同時綁定多個事件，這是如何實現的？

  • Node.js的適用場景？

  • (如果會用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering么?

  • 解釋一下 Backbone 的 MVC 實現方式？

  • 什麼是「前端路由」?什麼時候適合使用「前端路由」? 「前端路由」有哪些優點和缺點?

  • 知道什麼是webkit么? 知道怎麼用瀏覽器的各種工具來調試和debug代碼么?

  • 如何測試前端代碼么? 知道BDD, TDD, Unit Test么? 知道怎麼測試你的前端工程么(mocha, sinon, jasmin, qUnit..)?

  • 前端templating(Mustache, underscore, handlebars)是幹嘛的, 怎麼用?

  • 簡述一下 Handlebars 的基本用法？

  • 簡述一下 Handlerbars 的對模板的基本處理流程， 如何編譯的？如何緩存的？

  • 用js實現千位分隔符?(來源：前端農民工，提示：正則+replace)

  • 檢測瀏覽器版本版本有哪些方式？

  • 我們給一個dom同時綁定兩個點擊事件，一個用捕獲，一個用冒泡，你來說下會執行幾次事件，然後會先執行冒泡還是捕獲

其他問題

  • 原來公司工作流程是怎麼樣的，如何與其他人協作的？如何誇部門合作的？

  • 你遇到過比較難的技術問題是？你是如何解決的？

  • 設計模式 知道什麼是singleton, factory, strategy, decrator么?

  • 常使用的庫有哪些？常用的前端開發工具？開發過什麼應用或組件？

  • 頁面重構怎麼操作？

  • 列舉IE與其他瀏覽器不一樣的特性？

  • 99%的網站都需要被重構是那本書上寫的？

  • 什麼叫優雅降級和漸進增強？

  • 是否了解公鑰加密和私鑰加密。

  • WEB應用從伺服器主動推送Data到客戶端有那些方式？

  • 對Node的優點和缺點提出了自己的看法？

  • 你有用過哪些前端性能優化的方法？

  • http狀態碼有那些？分別代表是什麼意思？

  • 一個頁面從輸入 URL 到頁面載入顯示完成，這個過程中都發生了什麼？（流程說的越詳細越好）

  • 部分地區用戶反應網站很卡，請問有哪些可能性的原因，以及解決方法？

  • 從打開app到刷新出內容，整個過程中都發生了什麼，如果感覺慢，怎麼定位問題，怎麼解決?

  • 除了前端以外還了解什麼其它技術么？你最最厲害的技能是什麼？

  • 你用的得心應手用的熟練地編輯器開發環境是什麼樣子？

  • 對前端界面工程師這個職位是怎麼樣理解的？它的前景會怎麼樣？

  • 你怎麼看待Web App 、hybrid App、Native App？

  • 你移動端前端開發的理解？（和 Web 前端開發的主要區別是什麼？）

  • 你對加班的看法？

  • 平時如何管理你的項目？

  • 說說最近最流行的一些東西吧？常去哪些網站？

  • 如何設計突發大規模並發架構？

  • 說說最近最流行的一些東西吧？常去哪些網站？

  • 是否了解開源的工具 bower、npm、yeoman、grunt、gulp，一個 npm 的包里的 package.json 具備的必要的欄位都有哪些？（名稱、版本號，依賴）

  • 每個模塊的代碼結構都應該比較簡單，且每個模塊之間的關係也應該非常清晰，隨著功能和迭代次數越來越多，你會如何去保持這個狀態的？

  • Git知道branch, diff, merge么?

  • 如何設計突發大規模並發架構？

  • 當團隊人手不足，把功能代碼寫完已經需要加班的情況下，你會做前端代碼的測試嗎？

  • 說說最近最流行的一些東西吧？平時常去哪些網站？

  • 知道什麼是SEO並且怎麼優化么? 知道各種meta data的含義么?

  • 移動端（Android IOS）怎麼做好用戶體驗?

  • 簡單描述一下你做過的移動APP項目研發流程？

  • 你在現在的團隊處於什麼樣的角色，起到了什麼明顯的作用？

  • 你認為怎樣才是全端工程師（Full Stack developer）？

  • 介紹一個你最得意的作品吧？

  • 你有自己的技術博客嗎，用了哪些技術？

  • 對前端安全有什麼看法？

  • 是否了解Web注入攻擊，說下原理，最常見的兩種攻擊（XSS 和 CSRF）了解到什麼程度？

  • 項目中遇到國哪些印象深刻的技術難題，具體是什麼問題，怎麼解決？。

  • 最近在學什麼東西？

  • 你的優點是什麼？缺點是什麼？

  • 如何管理前端團隊?

  • 最近在學什麼？能談談你未來3，5年給自己的規劃嗎？

有趣的問題

  • A、B兩人分別在兩座島上。B生病了，A有B所需要的葯。C有一艘小船和一個可以上鎖的箱子。C願意在A和B之間運東西，但東西只能放在箱子里。只要箱子沒被上鎖，C都會偷走箱子里的東西，不管箱子里有什麼。如果A和B各自有一把鎖和只能開自己那把鎖的鑰匙，A應該如何把東西安全遞交給B？

    答案：A把葯放進箱子，用自己的鎖把箱子鎖上。B拿到箱子後，再在箱子上加一把自己的鎖。

    箱子運回A後，A取下自己的鎖。箱子再運到B手中時，B取下自己的鎖，獲得藥物。

  • Amazon主頁的左上角有一個商品分類瀏覽的下拉菜單 沒有延遲，而且子菜單也不會在不應該的時候消失。它是怎樣做到這一點的呢？

    答案是通過探測滑鼠移動的方向和軌跡，具體查看Khan Academy工程師 Ben Kamens 寫的 jQuery插件。

轉自：@markyun

鏈接：Front End Developer Questions

前端菜鳥都逛的微信公眾號《網頁設計自學平台》ID：WEB_wysj

http://weixin.qq.com/r/azrB2YbE6NuXrcK69295 (二維碼自動識別)

剛離職，暫時面了五家公司，我分別來說說吧。

1.第一家是做數據的，用的技術較前衛，node，react，fis……先是十五分鐘筆試，題目不多，涉及的也挺全面的，例如有css3彈性布局、移動端經常出現的兼容問題...有幾道js理念基礎的沒做，直接跟他談了，這位面試官一道一道題的跟我分析談論。聊了很久，基本我的情況他都了解了，他也會跟我說那方面要加強，無論技術、人品我都很敬佩這位面試官。二面是CEO和我聊的，大概聊了下為什麼離職，根據什麼選擇適合自己的公司，還有就是薪資。過了幾天發offer了，由於薪資與我想像的相差有點多，就拒絕了（想著難得有機會面試，就試著面試多幾家）。

2.一個前端群的朋友內推去面試的，這是我十分期待的一份offer，第一天筆試，從HTML/CSS基礎到各種場景下解決方案、性能優化、實現JS輪播插件原理、JS基礎...很全面的筆試題，總共有正反兩頁，只有最後那題留空（實在不會呃），第二天和面試官面試（也就是推薦我去的那位），筆試題過了一遍，最後以我溝通不行為由結束了（我也不知道為什麼）。

3.也是朋友推的，只問了JS的幾個問題，比如：閉包、this、字元串分割、AJAX原理...回答的不是很樂觀，所以...也over了。

4.在boss直聘聯繫我的，感覺面試官還不錯，年紀30多的樣子，像朋友那樣聊天，不擺架子，問了一些問題：瀏覽器兼容性、對HTML5新增的東西、簡單描述下實現輪播原理...然後他說他在糾結預處理器選擇用less還是sass，我推薦他用sass，把sass比less強大功能都告訴了他咯。感覺這個還不錯。

5.很吐槽面試的第五家，當時技術主管不在，說還有半小時才回到，然後叫現在後台兼的前端來跟我聊聊。那個人問我經歷，我說我沒上過大學，然後他叫我定個計劃，回去找華南理工大學的大學計算機理論基礎知識書本 來學習幾年，再學學C/C#，會發現不一樣的。我了去...

還約了幾家清明節後面試，這幾天補補JS基礎中...

我的web版小簡歷：陳廣達-web前端簡歷

面百度的時候：

面試官：你的那個項目網站啊，被我注入了啊！

我：哈？

面試官：我拿到你資料庫的root許可權了哦！

我：………哈？

面試官：咦，這個表是用來幹嘛的啊？

…

…

…

…

…

…

我：對不起對不起，我忘了防SQL注入了……當時做的時候比較急就忘了…sorry……

說明要對自己的項目謹慎啊～

05-02 update

我想你需要的一定是這個(???ω???)

HiDino9/front-end-QA-to-interview

很全面得前端面試題庫，沒事多看看，查缺補漏也相當的好

∠( ? 」∠)＿

與其找些臨時抱佛腳的面試題，不如切合實際掌握一些web前端知識或者看看人家面試經歷從中獲取一些對自己有用的信息。

我這裡有個web前端程序員面試唯品會前端的成功案例，專門寫下了這篇經驗分享文章，希望對各位準備面試的人有些幫助哦。

一面 首先，一般情況下都是自我介紹。個人感覺自我介紹的時候，其實除了說明自己的一些基本情況之外，一定要突出自己的學習過程，而這個過程最好就是充分地體現了自己的自學能力。

我自己的話，我就會說我學前端一年多了，最開始怎樣怎樣努力地學習，然後做了哪些項目，一個個地列舉。最後說我平時的學習方法，我自己就是通過視頻教學網站（比如：網易雲課堂、慕課網、麥子學院 等等），看博客，看書，實踐（如：響應式WEB設計項目工程創建、Mock.js+Express實現京東商城數據模擬）等等方式自學。其實，感覺面試官並不會覺得你啰嗦，反而會很認真地從你的自我介紹中抽出一些點來提問你。 面試官其實問了不少東西，這裡把記得的列舉一下：

1.一般用jq的時候是怎麼綁定事件的？

答：我主要是用$(document).on()的方法，因為這個方法能使動態添加的dom節點也響應綁定的事件。這方法傳入三個參數，事件名、事件類型、事件。我通常就把相應的事件獨立成一個函數，然後調用，這樣比較有封裝性。

2.怎麼實現js的模塊化編程？

答：這個我主要是結合了之前看的阮一峰老師的javascript模塊化編程系列來答的。推薦大家去看一下，很好理解：《Javascript模塊化編程（一）》、《Javascript模塊化編程（二）：AMD規範》、《Javascript模塊化編程（三）：require.js的用法》

3.做的項目有用到h5嗎？

答：都有用到一些h5的新特性，不過像h5中canvers這些能實現比較多功能就沒有用得特別多。但是我自己有做一些練習來鍛煉自己，例如照片中不同的濾鏡模式，模糊程度調節等等。

4.有沒有做過離線應用？

答：這個我目前還沒有做過，不過我一直有關注，也有收集一些相關的資料，稍後會學習這方面的內容。

5.說一下你印象最深個項目，遇到的難點及解決方法？

答：這個我就詳細說了自己獨立完成前端開發部分的一個項目。解決方法我就突出表示大都都是我自己找資料，百度，Stack Overflow上提問解決的。（感覺面試官比較滿意這點）

6.你是怎麼處理瀏覽器之間的兼容性問題的？

答：我是採用優雅降級的方法，我一般在谷歌瀏覽器上面最好了比較好的版本，然後再針對IE等瀏覽器寫一些hack。如果涉及手機端的話，還會用@media做一些響應式的處理。例如...(又舉例子) 7.為什麼會學這些js框架（angular、node、react）？

答：因為這些現在已經是前端的標配啦，前端發展地非常快，而且是往全棧方向發展的……什麼什麼的，反正就是說了一堆前端趨勢和非學不可的理由。

8.怎樣把一些內容加到頁面上？

答：這個分情況吧，例如一些彈框提示的話，就是事先已經知道內容，類似於彈出登陸框的話，就先在頁面上寫好，調整好位置，然後隱藏，點擊某個地方在fadeOut出來那樣，如果是那種列表數據渲染的話，就寫成一個template，通過ajax等方式拿到數據渲染好之後，再append到相應的位置。（好像還說了一些其他的我自己也忘了） 還有一些忘記了……

二面

首先和面試聊了一會公司的情況，也還是要自我介紹的，了解了這次實習的內容等等。然後面試官開始針對我簡歷上的內容和項目提問：

1.怎樣提高頁面性能？

 答：其實我就回答了一些基本上大家都會採用的提高性能的方法，例如較少頁面的http請求數，css屬性合寫，js代碼抽象和封裝，模塊化開發，組件化等等……反正就說了一大堆。

2.怎麼處理瀏覽器緩存問題？（這個問題好像面試官經常問）

答：可以在修改後的文件末加一個版本號，還可以用gulp配置自動更新版本號。

3.如果修改的文件很多呢？

答：（其實我已經回答過了，估計是面試官沒有聽到）所以可以用gulp自動化工具去配置自動更新修改了的文件的版本號啊，這樣就不用手動添加了。

4.boostrap的設計理念是怎樣的？

答：（說真的，沒想過這個問題，但是我知道核心是柵格布局）我覺得boostrap的核心就是柵格布局，這個框架做了很多兼容性、響應式的處理，我也研究css的部分源碼，例如……（又是舉例子），然後我覺得這個一個非常好用，非常值得學習的框架。

5.如果你學的這些框架，來我們這裡用不上，這裡比較偏後台一點，你怎麼看？

答：前端也有後台，例如node.js就是，語言的核心思想都差不多，就是mvc，mvvn等等……又說了一堆裝逼的話

6.做表單類頁面需要注意哪些問題？

答：我感覺最主要就是要提高用戶體驗，用js對錶單輸入的內容進行判斷，然後快速反饋用戶的輸入是有效的還是無效的吧，例如，手機號碼、郵箱等等的驗證。

7.怎樣減少首屏載入時間？

答：當時是列舉了一些比較泛的方法其實，要了解還是百度一下比較好^_^ 還有一些忘記了……

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.閉包是什麼，有什麼特性，對頁面有什麼影響


閉包就是能夠讀取其他函數內部變數的函數。

深入理解JavaScript的閉包特性 如何給循環中的對象添加事件 此鏈接可查看（問這個問題的不是一個公司）


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


}


·歡迎添加我微信：agoodjob1

邀請你加入群聊，程序源·微吧。

最近離職瘋狂面試了好多家公司，分享下自己的經驗，只說印象比較深的幾家：

（交待下背景，應屆畢業生，有過兩個月node.js開發的實習經驗，CSS基礎還行，經驗不多，JS比CSS掌握得好些，實習期間寫過很多，所以工作有點偏向js或者nodeJs）

1.一家50-100人規模的遊戲公司，主要面node.js實習生：筆試直接是上機做，首先考到js的聲明變數，其中就有個定義常量的我不知道，後面就是很多js數組的遍歷的方法，比如filter(),each().....都有考，雖然方法的作用基本上都了解但是返回值居然忘掉了，然後就有關Node的，非同步，promise，然後問有什麼原生模塊，第三方模塊等等，最後js編程題，現在感覺真的，筆試最喜歡就是這些編程題了，覺得好好玩；

2.某大型的互聯網公司：面的是前端實習生，第一次是電話面試，會根據簡歷上的問題問一遍，問做過的項目，我的主要就問實習期間做了什麼，遇到什麼問題，怎麼解決，然後問了node的模塊、有什麼作用、什麼是ajax，怎麼跨域、jsonp的原理、用過什麼資料庫，介紹下mongodb，還有有關http等問題，因為基本都懂所以進入第二輪，進到公司有兩個人輪流問問題，第一個比較偏向js和更像hr會問的問題，技術上問js怎樣把字元串保存成金額形式、問alert(a);var a="a";var a=function(){};alert(a),這兩個alert分別彈出的是什麼，還有一些布局，畫出圖來，然後問你怎麼實現。第二個基本上都是css的問題，也是畫圖，問你怎麼實現，問bootstrap是用什麼東西寫的，響應式的原理等等。

3.中型上市公司，面的是javascript實習生：這公司給了我很大的啟發，一進去是筆試，考的都是js題目，比如閉包、原型鏈、call()、apply()的區別、還有移動端的延遲、jquery性能優化等等，基本上都寫出來了，然後面試的時候讓我說做了什麼項目，讓我印象最深的困難，結果因為我表達不清楚，結果面試官很語重心長的跟我說，應屆生技術不是最重要的，他們的期望是希望能清楚的理解到公司的需求，也能表達出來，於是拒絕了..其實我覺得確實是在上一家公司中確實能實習他們的需求，但是我一直準備的都是技術上的問題，壓根沒準備過怎麼解答業務上的問題，所以真的讓我回去把之前實習做過的東西整理一遍，以便下次一定要能說清楚

4. 有兩家，都是100人左右的比較新的互聯網公司，面的是前端實習生（恰巧都有node方向），技術上的問題在css、js上基本上都是上面那些，其實閉包啊、浮動啊、html5/css3新特性啊都是容易問到的問題，然後也會問我一些關於node的問題，callback hell、socket、http相關的基本都會問到，問題多而雜，有時候面試官問著問著都忘記自己問過什麼了，但是有點料都會要的

5.某大型國企，非互聯網行業，面的是前端實習：浮動問題、會什麼框架...技術上的問題不是太多

總結一下，純屬個人經驗，經驗有限，有錯多多包涵：

1.大型互聯網公司對技術要求高，更多是原理上的東西，也很關心個人素質，難進，如果是要求學新技術的主要就看個人素質了；

2.感覺小型互聯網公司對技術棧比較關心，希望懂越多越好，但是只要不是太嫩，很多問題也有機會進去；

3.某直聘與某溝、某憂相比，招聘流程相比相對可能會簡單一些，感覺某鉤個某憂尤其是大公司的時候跟校招流程差不多，運氣好的話某直聘直接面一兩輪就在校招之前進去了（我就試過，兩次）。

4.你怎麼也想不到，你的下一家公司，就在今天下午通知你面試，明天上午就拿到offer了。所以不要氣餒，越努力越幸運！

再說一次這只是個人經驗，沒有代表性，有用的就拿去吧

最後，有在廣州找前端應屆生的嗎，個人希望偏node方向的，能長期做下去成為牛牛的~~

面試題太多。

換做我們公司， 會直接扔給你一個psd，然後問，能不能做？多長時間做完？

搜集的一些題目： 2016各大互聯網公司前端面試題匯總

實際上三個方向 基礎的ES5 + 少許 ES6 + React/Angular/Vue + 構建工具/前後端交互

個人覺得，在小公司面試，尤其是不太重視技術的小公司，你只要證明你能做事就行。這裡我們暫且不談。

前段時間離職，目前拿到了國內一線遊戲公司的前端offer。

以下我是隨便截取的一張招聘要求:

就我看來，技術面試（就我所面試的經歷總結）首先幾個小問題查看你的重構能力（就HTML和CSS），例如簡單的塊元素行元素，深入一點的BFC，一些經典的兼容問題，差不多三個左右的問題就能摸個底。因為大部分技術深入一點就能看出你掌握多少，所以沒必要像學生考試那樣面面俱到。

當然這不是重點，就目前前端面試都側重於JavaScript的掌握，不懂Angularjs這樣的新技術也沒關係，但你會這些絕對加分，姑且不談。JS對象相關操作，原型鏈，閉包，單元測試等js的技術點才是被問的重點。再次提示：技術面試很難遇到像考試那樣的做題，需要你動手的無非給你一道綜合技術題，大致看看你的掌握情況。

我參加的技術面試沒有固定的模式，但大致會圍繞在我上述的幾個點。但有一個地方要特別指出，公司其實挺看重你的行業的興趣的，從上面的招聘信息都可以看出，需要「好奇心」。如果你對行業有探索和冒險精神，那麼是絕對會加分的。有看博客寫博客的習慣，有github開源項目，無論好壞，絕對能讓面試官眼前一亮，加分不少。

=========================個人拙見，勿噴=========================

1、 列舉web性能優化？

1)
減少http請求次數。合併文件、利用css sprite把零散的圖片整合到一張圖上。

2)
減少DNS查找。

3)
減少從定向。

4)
響應時間。使用AJAX進行緩存，減少http請求。

5)
延遲載入組件.

6)
預載入組件。

7)
減少節點的數量。

8)
切分組件到多個域。

9)
最小化iframe。

10)
杜絕http404錯誤。

2、 介紹一下XMLHttpRequest對象的常用方式和屬性?

open(「method」,」URL」) 建立對伺服器的調用，第一個參數是HTTP請求方式

可以為GET，POST或任何伺服器所支持的您想調用的方式。

第二個參數是請求頁面的URL。

send()方法，發送具體請求

abort()方法，停止當前請求

readyState屬性 請求的狀態 有5個可取值 0=未初始化 ，1=正在載入

2=以載入，3=交互中，4=完成

responseText 屬性 伺服器的響應，表示為一個串

reponseXML 屬性 伺服器的響應，表示為XML

status 伺服器的HTTP狀態碼，200對應ok 400對應not found

3、 URl地址獲取對應參數的值，請寫出最優的代碼。Var
URL=『http：// www.ehecd.com/query?

4、 請使用原生JavaScript給下面列表中的節點綁定點對象，兼容IE和標準瀏覽器？

&

9

10

11
&

使用原生JavaScript給下面列表中的結點綁定點擊事件，點擊時創建一個Object對象，兼容IE和標準瀏覽器&

12

13
&