記錄一些前端面試的問題及回答殿较，有些是自己面試時遇到的耸峭，有些是網(wǎng)上看到的，回答并不一定準(zhǔn)確淋纲，記錄在此作備忘吧劳闹。
<i>不定期更新。。本涕。</i>
HTML相關(guān)
- html如何上傳文件儡首？
其實換一個問法比較好：html中上傳文件使用的是什么標(biāo)簽。
<input type="file" name="name" id="idname">
- localStorage與sessionStorage偏友？
參考w3school
H5提供了兩種在客戶端存儲數(shù)據(jù)的新方法：
1.localStorage—沒有時間限制的數(shù)據(jù)存儲
2.sessionStorage—針對一個session進(jìn)行數(shù)據(jù)存儲。當(dāng)用戶關(guān)閉瀏覽器后數(shù)據(jù)會被刪除
之前对供，客戶端數(shù)據(jù)存儲都是由cookie完成的位他。但是cookie不適合大量數(shù)據(jù)的存儲，因為cookie由每個對服務(wù)器的請求來傳遞产场，這使得cookie速度很慢而且效率不高鹅髓。
在H5中，數(shù)據(jù)不是由每個服務(wù)器請求傳遞的京景，而是只有在請求時使用數(shù)據(jù)窿冯。它使在不影響網(wǎng)站性能的情況下存儲大量數(shù)據(jù)成為可能。
- SVG與Canvas确徙？
參考w3school
** Canvas和SVG都允許在瀏覽器中創(chuàng)建圖形醒串，但它們根本上是不同的。**
- SVG
SVG是一種使用XML描述2D圖形的語言鄙皇。
SVG基于XML芜赌，這意味著SVG DOM中的每個元素都是可用的“橐荩可以為某個元素附加JavaScript事件處理器缠沈。
在SVG中，每個被繪制的圖形均被視為對象错蝴。如果SVG對象的屬性發(fā)生變化洲愤，那么瀏覽器能自動重現(xiàn)圖形。- Canvas
Canvas通過JavaScript來繪制2D圖形顷锰。
Canvas是逐像素進(jìn)行渲染的柬赐。
在Canvas中，一旦圖形被繪制完成馍惹，它就不會繼續(xù)得到瀏覽器的關(guān)注躺率。如果其位置發(fā)生變化，那么整個場景也需要重新繪制万矾，包括任何或許已經(jīng)被圖形覆蓋的對象悼吱。- Canvas 與 SVG 的比較
下面列出了canvas與SVG的一些不同之處：
- Canvas
依賴分辨率
不支持事件處理器
弱的文本渲染能力
能夠以.png或.jpg格式保存結(jié)果圖像
最適合圖像密集型的游戲，其中的許多對象會被頻繁重繪- SVG
不依賴分辨率
支持事件處理器
最適合帶有大型渲染區(qū)域的應(yīng)用程序（比如谷歌地圖）
復(fù)雜度高會減慢渲染速度（任何過渡使用DOM的應(yīng)用都不快）
不適合游戲應(yīng)用
CSS相關(guān)
- float導(dǎo)致的父元素高度塌陷問題是什么良狈？如何解決后添？
父元素如果只包含設(shè)置了浮動的元素且父元素沒有設(shè)置具體高度，那么父元素的高度就會塌縮為零薪丁。
解決辦法：
- 父元素緊鄰的元素設(shè)置clear:both遇西；
- 在父元素的屬性同時設(shè)置width:100%(或固定寬度)和overflow:hidden馅精。
- 讓頁面中一個DIV a 浮在下面一個DIV b 上面的方法？
- 設(shè)置a浮動粱檀，b不設(shè)置浮動
- 設(shè)置a絕對定位洲敢，并設(shè)置z-index:number;number越大則浮層越靠上層
- 描述一下盒模型
** 盒模型規(guī)定了元素框處理元素內(nèi)容element、內(nèi)邊距padding茄蚯、邊框border和外邊距margin的方式压彭。**
元素框的最內(nèi)部分是實際的內(nèi)容，直接包圍內(nèi)容的是內(nèi)邊距渗常。內(nèi)邊距呈現(xiàn)了元素的背景壮不。內(nèi)邊距的邊緣是邊框。邊框以外是外邊距皱碘，外邊距默認(rèn)是透明的询一，因此不會遮擋其后的任何元素。
<b><i>提示：背景應(yīng)用于由內(nèi)容和內(nèi)邊距癌椿、邊框組成的區(qū)域健蕊。</b></i>
盒模型大小=element + padding + border + margin
- 如何實現(xiàn)流星劃過動畫
參考animation動畫實踐 - 如何實現(xiàn)分辨率響應(yīng)式
參考響應(yīng)式網(wǎng)頁設(shè)計
JavaScript相關(guān)
- this的理解
參考MDN-this和阮一峰的網(wǎng)絡(luò)日志
- 調(diào)用函數(shù)的那個對象
- 原型鏈和繼承
參考MDN-繼承與原型鏈 - 談?wù)凥TTP及各狀態(tài)碼含義
參考W3School-HTTP 方法和W3School-HTTP 狀態(tài)消息、阮一峰的網(wǎng)絡(luò)日志-HTTP 協(xié)議入門
- 1xx——信息
- 2xx——成功
- 3xx——重定向
- 4xx——客戶端錯誤
- 5xx——服務(wù)器錯誤
- ajax同步異步如何實現(xiàn)如失？什么時候使用同步绊诲？
參考JavaScript：徹底理解同步、異步和事件循環(huán)(Event Loop) - ajax技術(shù)的優(yōu)缺點
- 長度不確定的二進(jìn)制字符串如何轉(zhuǎn)換成十進(jìn)制數(shù)字
字符串轉(zhuǎn)換成數(shù)值褪贵，二進(jìn)制轉(zhuǎn)換成十進(jìn)制（長度不確定是什么鬼掂之？）
正則表達(dá)式會用嗎
如何防止URL地址加鍵值對登陸
換膚功能如何實現(xiàn)
參考使用jQuery實現(xiàn)Web頁面換膚功能的要點解析和JavaScript+CSS實現(xiàn)網(wǎng)頁換膚功能
基本流程：訪問網(wǎng)頁——JS讀取Cookie——如果沒有則使用默認(rèn)皮膚；如果有則使用指定皮膚——用戶點擊換膚脆丁，JS控制替換對應(yīng)的CSS 樣式表——將當(dāng)前皮膚選項寫進(jìn)Cookie和后端數(shù)據(jù)庫保存世舰。
- 對象的三種聲明方式？
如聲明一個字符串對象：
- str = null;
未進(jìn)行實例化槽卫，是一個空的對象跟压，未指向任何內(nèi)存空間- str = "";
str是一個實例，有自己的對象空間- str = new String();
str對象分配了指向new String()所創(chuàng)建的內(nèi)存空間歼培，即對這個對象str進(jìn)行了實例化震蒋。
- 談一談對閉包的理解
參考segmentfault和MDN
閉包 是指有權(quán)訪問另一個函數(shù)作用域中的變量的函數(shù)。
創(chuàng)建閉包的最常見的方式就是在一個函數(shù)內(nèi)創(chuàng)建另一個函數(shù)躲庄，通過另一個函數(shù)訪問這個函數(shù)的局部變量查剖。
閉包的缺點就是常駐內(nèi)存，會增大內(nèi)存使用量噪窘，使用不當(dāng)很容易造成內(nèi)存泄露笋庄。
閉包是javascript語言的一大特點，主要應(yīng)用閉包場合主要是為了：設(shè)計私有的方法和變量。
一般函數(shù)執(zhí)行完畢后直砂，局部活動對象就被銷毀菌仁，內(nèi)存中僅僅保存全局作用域。但閉包的情況不同静暂！
框架&類庫&工具&其他
- IE瀏覽器的幾種模式
參考IE “瀏覽器模式”和“文檔模式”的區(qū)別和瀏覽器模式和文檔模式 學(xué)習(xí)筆記
- 瀏覽器模式和文檔模式
“瀏覽器模式”用于切換IE針對該網(wǎng)頁的默認(rèn)文檔模式济丘、對不同版本瀏覽器的條件備注解析、發(fā)送給網(wǎng)站服務(wù)器的用戶代理（User-Agent）字符串的值洽蛀。網(wǎng)站可以根據(jù)瀏覽器返回的不同用戶代理字符串判斷瀏覽器的版本和安裝的功能闪盔，這樣就可以向不同的瀏覽器返回不同的頁面內(nèi)容。
“文檔模式”用于指定IE的頁面排版引擎（Trident）以哪個版本的方式來解析并渲染網(wǎng)頁代碼辱士。切換文檔模式會導(dǎo)致網(wǎng)頁被刷新，但不會更改用戶代理字符串中的版本號听绳，也不會從服務(wù)器重新下載網(wǎng)頁颂碘。切換瀏覽器模式的同時，瀏覽器也會自動切換到相應(yīng)的文檔模式椅挣。- 標(biāo)準(zhǔn)模式和混雜模式
- jQuery選擇器有哪些头岔？
參考《鋒利的jQuery（第2版）》
jQuery選擇器分為基本選擇器、層次選擇器鼠证、過濾選擇器和表單選擇器峡竣。
- 基本選擇器
通過元素ID、class和標(biāo)簽名等來查找DOM元素量九。
- 層次選擇器
通過DOM元素之間的層次關(guān)系來獲取特定元素适掰，例如：后代元素、子元素荠列、相鄰元素和同輩元素等类浪。- 過濾選擇器
通過特定的過濾規(guī)則來篩選出所需的DOM元素，過濾規(guī)則與CSS中的偽類選擇器語法規(guī)則相同肌似。- 表單選擇器
方便地獲取到表單的某個或某類型的元素费就。
- jQuery的$如何釋放權(quán)限？（解決jQuery和其他庫的沖突）
參考《鋒利的jQuery（第2版）》川队。
- jQuery在其他庫之后導(dǎo)入
1.在其他庫和jQuery庫都被加載完畢后力细，可以在任何時候調(diào)用jQuery.noConflict()函數(shù)將$的控制權(quán)移交給其他庫。在程序里jQuery使用jQuery()函數(shù)作為jQuery對象的制造工廠固额。
jQuery.noConflict();//將$的控制權(quán)移交給其他庫
jQuery(function(){//使用jQuery
jQuery("p").click(function(){
//省略代碼
});
});
2.給jQuery自定義一個快捷方式
var $j = jQuery.noConflict();//給jQuery自定義一個快捷方式
$j(function(){//利用自定義快捷方式使用jQuery
$j("p").click(function(){
//省略代碼
});
});
3.如果不想自定義快捷方式眠蚂，還想使用$而不管其他庫的$()方法，同時又不與其他庫沖突对雪，可以用下面兩種方法河狐。
jQuery.noConflict();//將$的控制權(quán)移交給其他庫
jQuery(function($){//使用jQuery設(shè)定頁面加載時執(zhí)行函數(shù)
$("p").click(function(){//在函數(shù)內(nèi)部繼續(xù)使用$()方法
//省略代碼
});
});
jQuery.noConflict();//將$的控制權(quán)移交給其他庫
(function($){//定義匿名函數(shù)并設(shè)置形參為$
$(function(){//匿名函數(shù)內(nèi)部的$均為jQuery
$("p").click(function(){
//省略代碼
});
});
})(jQuery);//執(zhí)行匿名函數(shù)且傳遞實參為jQuery
- jQuery在其他庫之前導(dǎo)入
如果jQuery在其他庫之前就導(dǎo)入了，那么可以直接使用“jQuery”來做一些jQuery的工作。同時馋艺，可以使用$()方法作為其他庫的快捷方式栅干。無需調(diào)用jQuery.noConflict()函數(shù)。
jQuery(function(){//使用jQuery
jQuery("p").click(function(){
//省略代碼
});
});
創(chuàng)建
dev分支捐祠，并切換到dev分支：
$ git checkout -b dev
Switched to a new branch 'dev'
git checkout命令加上-b參數(shù)表示創(chuàng)建并切換碱鳞，相當(dāng)于以下兩條命令：
$ git branch dev
$ git checkout dev
Switched to branch 'dev'
