前端面試題
前端面試題：
1. 一個200*200的div在不一樣分辨率屏幕上下左右居中，用css實現
div
{
position:absolute;
width:200px;
height:200px;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-100px;
z-index:1000;
}javascript
2. 寫一個左中右佈局佔滿屏幕，其中左右兩塊是固定寬度200 ，中間自適應寬，要求先加載中間塊，請寫出結構及樣式：
<body> css
<h3>實現三列寬度自適應佈局</h3> html
<div id = "left">我是左邊</div> 前端
<div id = "right">我是右邊</div> vue
<div id = "center">我是中間</div> java
</body> node
html,body{ margin: 0px;width: 100%; } react
h3{height: 100px;margin:20px 0 0;} jquery
#left,#right{width: 200px;height: 200px; background-color: #ffe6b8;position: absolute;top:120px;} webpack
#left{left:0px;}
#right{right: 0px;}
#center{margin:2px 210px ;background-color: #eee;height: 200px; }
3. 闡述清楚浮動的幾種方式（常見問題）
1.父級div定義 height
原理：父級div手動定義height，就解決了父級div沒法自動獲取到高度的問題。
優勢：簡單、代碼少、容易掌握
缺點：只適合高度固定的佈局，要給出精確的高度，若是高度和父級div不同時，會產生問題
2.父級div定義 overflow:hidden
原理：必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區域的高度
優勢：簡單、代碼少、瀏覽器支持好
4. 結尾處加空div標籤 clear:both
原理：添加一個空div，利用css提升的clear:both清除浮動，讓父級div能自動獲取到高度
優勢：簡單、代碼少、瀏覽器支持好、不容易出現怪問題
缺點：很多初學者不理解原理；若是頁面浮動佈局多，就要增長不少空div，讓人感受很很差
5. 解釋css sprites ，如何使用？
CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的「background-image」，「background- repeat」，「background-position」的組合進行背景定位，background-position能夠用數字能精確的定位出背景圖片的位置。
CSS Sprites爲一些大型的網站節約了帶寬，讓提升了用戶的加載速度和用戶體驗，不須要加載更多的圖片
6. 如何用原生js給一個按鈕綁定兩個onclick事件？
Var btn=document.getElementById(‘btn’);
//事件監聽 綁定多個事件
var btn4 = document.getElementById("btn4");
btn4.addEventListener("click",hello1);
btn4.addEventListener("click",hello2);
function hello1(){
alert("hello 1");
}
function hello2(){
alert("hello 2");
}
7. 拖拽會用到哪些事件
· dragstart:拖拽開始時在被拖拽元素上觸發此事件,監聽器須要設置拖拽所需數據,從操做系統拖拽文件到瀏覽器時不觸發此事件.
· dragenter:拖拽鼠標進入元素時在該元素上觸發,用於給拖放元素設置視覺反饋,如高亮
· dragover:拖拽時鼠標在目標元素上移動時觸發.監聽器經過阻止瀏覽器默認行爲設置元素爲可拖放元素.
· dragleave:拖拽時鼠標移出目標元素時在目標元素上觸發.此時監聽器能夠取消掉前面設置的視覺效果.
· drag:拖拽期間在被拖拽元素上連續觸發
· drop:鼠標在拖放目標上釋放時,在拖放目標上觸發.此時監聽器須要收集數據而且執行所需操做.若是是從操做系統拖放文件到瀏覽器,須要取消瀏覽器默認行爲.
· dragend:鼠標在拖放目標上釋放時,在拖拽元素上觸發.將元素從瀏覽器拖放到操做系統時不會觸發此事件.
8. 請列舉jquery中的選擇器：
9. Javascript中的定時器有哪些？他們的區別及用法是什麼？
setTimeout 只執行一次
setInterval 會一直重複執行
9.請描述一下 cookies sessionStorage和localstorage區別
相同點：都存儲在客戶端
不一樣點：1.存儲大小
· cookie數據大小不能超過4k。
· sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大。
2.有效時間
· localStorage 存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據；
· sessionStorage 數據在當前瀏覽器窗口關閉後自動刪除。
· cookie 設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉
3. 數據與服務器之間的交互方式
· cookie的數據會自動的傳遞到服務器，服務器端也能夠寫cookie到客戶端
· sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。
10.計算一個數組arr全部元素的和
var arr1=[1,2,3,4,5,6,7,8,9];
var sum1=0;
for (var i=0;i<=arr1.length;i++) {
if (typeof arr1[i]=="number") {
sum1+=arr1[i];
}
}
document.write(sum1);
//====================================
function sum2(arr){
var all=0;
for (var i=0;i<arr.length;i++) {
if (typeof arr[i]=="number") {
all+=arr[i];
}
}
return all;
}
document.write(sum2([1,2,3,4]));
11.編寫一個方法去掉數組裏面 重複的內容 var arr=[1,2,3,4,5,1,2,3]
一個數組去重的簡單實現
var arr = ['abc','abcd','sss','2','d','t','2','ss','f','22','d'];
//定義一個新的數組
var s = [];
//遍歷數組
for(var i = 0;i<arr.length;i++){
if(s.indexOf(arr[i]) == -1){ //判斷在s數組中是否存在，不存在則push到s數組中
s.push(arr[i]);
}
}
console.log(s);
//輸出結果：["abc", "abcd", "sss", "2", "d", "t", "ss", "f", "22"]
方法二：用sort() 而後相鄰比較也能夠實現
12.document.write和innerHTML的區別：
document.write是直接寫入到頁面的內容流，若是在寫以前沒有調用document.open, 瀏覽器會自動調用open。每次寫完關閉以後從新調用該函數，會致使頁面被重寫。
innerHTML則是DOM頁面元素的一個屬性，表明該元素的html內容。你能夠精確到某一個具體的元素來進行更改。若是想修改document的內容，則須要修改document.documentElement.innerElement。
innerHTML將內容寫入某個DOM節點，不會致使頁面所有重繪
innerHTML不少狀況下都優於document.write，其緣由在於其容許更精確的控制要刷新頁面的那一個部分。
13.ajax的步驟
什麼是ajax?
ajax(異步javascript xml) 可以刷新局部網頁數據而不是從新加載整個網頁。
如何使用ajax?
第一步，建立xmlhttprequest對象，var xmlhttp =new XMLHttpRequest（);XMLHttpRequest對象用來和服務器交換數據。
var xhttp;
if (window.XMLHttpRequest) {
//現代主流瀏覽器
xhttp = new XMLHttpRequest();
} else {
// 針對瀏覽器，好比IE5或IE6
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
第二步，使用xmlhttprequest對象的open（）和send（）方法發送資源請求給服務器。
第三步，使用xmlhttprequest對象的responseText或responseXML屬性得到服務器的響應。
第四步，onreadystatechange函數，當發送請求到服務器，咱們想要服務器響應執行一些功能就須要使用onreadystatechange函數，每次xmlhttprequest對象的readyState發生改變都會觸發onreadystatechange函數
14.xml和json的區別，請用四個詞語來形容
· JSON相對於XML來說，數據的體積小，傳遞的速度更快些
· JSON與JavaScript的交互更加方便，更容易解析處理，更好的數據交互
· XML對數據描述性比較好；
· JSON的速度要遠遠快於XML
15.清楚浮動的方法？(屢次出如今面試題)
1.父級div定義 height
原理：父級div手動定義height，就解決了父級div沒法自動獲取到高度的問題。
優勢：簡單、代碼少、容易掌握
缺點：只適合高度固定的佈局，要給出精確的高度，若是高度和父級div不同時，會產生問題
2，結尾處加空div標籤 clear:both
原理：添加一個空div，利用css提升的clear:both清除浮動，讓父級div能自動獲取到高度
優勢：簡單、代碼少、瀏覽器支持好、不容易出現怪問題
缺點：很多初學者不理解原理；若是頁面浮動佈局多，就要增長不少空div，讓人感受很很差
3，父級div定義 僞類:after 和 zoom
原理：IE8以上和非IE瀏覽器才支持:after，原理和方法2有點相似，zoom(IE轉有屬性)可解決ie6,ie7浮動問題
優勢：瀏覽器支持好、不容易出現怪問題（目前：大型網站都有使用，如：騰迅，網易，新浪等等）
缺點：代碼多、很多初學者不理解原理，要兩句代碼結合使用才能讓主流瀏覽器都支持
4，父級div定義 overflow:hidden
原理：必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區域的高度
優勢：簡單、代碼少、瀏覽器支持好
缺點：不能和position配合使用，由於超出的尺寸的會被隱藏。
16.box-sizing經常使用的屬性有哪些？分別有什麼做用？
屬性值
· box-sizing：content-box
· box-sizing：border-box
· box-sizing：inherit
content-box
· 這是box-sizing的默認屬性值
· 是CSS2.1中規定的寬度高度的顯示行爲
· 在CSS中定義的寬度和高度就對應到元素的內容框
· 在CSS中定義的寬度和高度以外繪製元素的內邊距和邊框
border-box
· 在CSS中微元素設定的寬度和高度就決定了元素的邊框盒
· 即爲元素在設置內邊距和邊框是在已經設定好的寬度和高度以內進行繪製
· CSS中設定的寬度和高度減去邊框和內間距才能獲得元素內容所佔的實際寬度和高度
(Q1)box-sizing: content-box|border-box|inherit;
(Q2)content-box:寬度和高度分別應用到元素的內容框。在寬度和高度以外繪製元素的內邊距和邊框(元素默認效果)。
border-box:元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。經過從已設定的寬度和高度分別減去邊框和內邊距才能獲得內容的寬度和高度。
17.css選擇器有哪些，選擇器的權重的優先級
選擇器類型
一、ID #id
二、class .class
三、標籤 p
四、通用 *
五、屬性 [type="text"]
六、僞類 ：hover
七、僞元素 ::first-line
八、子選擇器、相鄰選擇器
3、權重計算規則
1. 第一等：表明內聯樣式，如: style=」」，權值爲1000。
2. 第二等：表明ID選擇器，如：#content，權值爲0100。
3. 第三等：表明類，僞類和屬性選擇器，如.content，權值爲0010。
4. 第四等：表明類型選擇器和僞元素選擇器，如div p，權值爲0001。
5. 通配符、子選擇器、相鄰選擇器等的。如*、>、+,權值爲0000。
6. 繼承的樣式沒有權值。
18. 塊級元素水平垂直居中的方法有哪些（三個方法）
讓div等塊級元素水平和垂直都居中，即永遠處於屏幕的正中央，當咱們作如登陸塊時很是有用！
實現1、原理：要讓div等塊級元素水平和垂直居中，必需知道該div等塊級元素的寬度和高度，而後設置位置爲絕對位置，距離頁面窗口左邊框和上邊框的距離設置爲50%，這個50%就是指頁面窗口的寬度和高度的50%，最後將該div等塊級元素分別左移和上移，左移和上移的大小就是該div等塊級元素寬度和高度的一半。
CSS代碼：
.mycss{
width:300px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-100px 0 0 -150px }
實現二原理：利用CSS的margin設置爲auto讓瀏覽器本身幫咱們水平和垂直居中。
CSS代碼：
.mycss{
position: absolute;
left: 0px;
right: 0;
top: 0;
bottom: 0;
margin: auto;
height: 200px;
width: 300px;
}
jQuery實現水平和垂直居中
原理：jQuery實現水平和垂直居中的原理就是經過jQuery設置div等塊級元素的CSS，獲取div等塊級元素的左、上的邊距偏移量，邊距偏移量的算法就是用頁面窗口 的寬度減去該div等塊級元素的寬度，獲得的值再除以2即左偏移量，右偏移量算法相同。注意div等塊級元素的CSS設置要在resize()方法中完成，就是每次改變窗口大 小時，都要執行設置div等塊級元素的CSS。
jquery代碼：
$(window).resize(function(){
$(".myblock").css({
position: "absolute",
left: ($(window).width() - $(".myblock").outerWidth())/2,
top: ($(window).height() - $(".myblock").outerHeight())/2 });
});
此外在頁面載入時，就須要調用resize()方法
$(function(){
$(window).resize();
});
19.三個盒子，左右定寬，中間自適應有幾種方法
第一種：左右側採用浮動 中間採用margin-left 和 margin-right 方法。
代碼以下：
<div style="width:100%; margin:0 auto;">
<div style="width:200px; float:right; background-color:#960">這是右側的內容 固定寬度</div>
<div style="width:150px; float:left; background:#6FF">這是左側的內容 固定寬度</div>
<div style="margin-left:150px;margin-right:200px; background-color:#9F3">中間內容，自適應寬度</div>
</div>
第二種：左右兩側採用絕對定位 中間一樣採用margin-left margin-right方法：
第三種負的margin
使用這種方法就稍微複雜了一些了，使用的是負的margin值，並且html標籤也增長了，先來看其代碼吧：
<div id="main">
<div id="mainContainer">main content</div></div><div id="left">
<div id="leftContainer" class="inner">left content</div></div><div id="right">
<div id="rightContainer" class="inner">right</div></div>
#main {
float: left;
width: 100%;
}
#mainContainer {
margin: 0 230px;
height: 200px;
background: green;
}
#left {
float: left;
margin-left: -100%;
width: 230px}
#right {
float: left;
margin-left: -230px;
width: 230px;
}
#left .inner,
#right .inner {
background: orange;
margin: 0 10px;
height: 200px;
}
20.js有幾種數據類型，其中基本數據類型有哪些
五種基本類型: Undefined、Null、Boolean、Number和String。
1中複雜的數據類型————Object，Object本質上是由一組無序的名值對組成的。
Object、Array和Function則屬於引用類型
21.undefined 和 null 區別
null： Null類型，表明「空值」，表明一個空對象指針，使用typeof運算獲得 「object」，因此你能夠認爲它是一個特殊的對象值。
undefined： Undefined類型，當一個聲明瞭一個變量未初始化時，獲得的就是undefined。
null是javascript的關鍵字，能夠認爲是對象類型，它是一個空對象指針，和其它語言同樣都是表明「空值」，不過 undefined 倒是javascript纔有的。undefined是在ECMAScript第三版引入的，爲了區分空指針對象和未初始化的變量，它是一個預約義的全局變量。沒有返回值的函數返回爲undefined，沒有實參的形參也是undefined。
javaScript權威指南： null 和 undefined 都表示「值的空缺」，你能夠認爲undefined是表示系統級的、出乎意料的或相似錯誤的值的空缺，而null是表示程序級的、正常的或在乎料之中的值的空缺。
22.http 和 https 有何區別？如何靈活使用？
http是HTTP協議運行在TCP之上。全部傳輸的內容都是明文，客戶端和服務器端都沒法驗證對方的身份。
https是HTTP運行在SSL/TLS之上，SSL/TLS運行在TCP之上。全部傳輸的內容都通過加密，加密採用對稱加密，但對稱加密的密鑰用服務器方的證書進行了非對稱加密。此外客戶端能夠驗證服務器端的身份，若是配置了客戶端驗證，服務器方也能夠驗證客戶端的身份
23.常見的HTTP狀態碼
2開頭 （請求成功）表示成功處理了請求的狀態代碼。
200 （成功） 服務器已成功處理了請求。 一般，這表示服務器提供了請求的網頁。
201 （已建立） 請求成功而且服務器建立了新的資源。
202 （已接受） 服務器已接受請求，但還沒有處理。
203 （非受權信息） 服務器已成功處理了請求，但返回的信息可能來自另外一來源。
204 （無內容） 服務器成功處理了請求，但沒有返回任何內容。
205 （重置內容） 服務器成功處理了請求，但沒有返回任何內容。
206 （部份內容） 服務器成功處理了部分 GET 請求。
3開頭 （請求被重定向）表示要完成請求，須要進一步操做。 一般，這些狀態代碼用來重定向。
300 （多種選擇） 針對請求，服務器可執行多種操做。 服務器可根據請求者 (user agent) 選擇一項操做，或提供操做列表供請求者選擇。
301 （永久移動） 請求的網頁已永久移動到新位置。 服務器返回此響應（對 GET 或 HEAD 請求的響應）時，會自動將請求者轉到新位置。
302 （臨時移動） 服務器目前從不一樣位置的網頁響應請求，但請求者應繼續使用原有位置來進行之後的請求。
303 （查看其餘位置） 請求者應當對不一樣的位置使用單獨的 GET 請求來檢索響應時，服務器返回此代碼。
304 （未修改） 自從上次請求後，請求的網頁未修改過。 服務器返回此響應時，不會返回網頁內容。
305 （使用代理） 請求者只能使用代理訪問請求的網頁。 若是服務器返回此響應，還表示請求者應使用代理。
307 （臨時重定向） 服務器目前從不一樣位置的網頁響應請求，但請求者應繼續使用原有位置來進行之後的請求。
4開頭 （請求錯誤）這些狀態代碼表示請求可能出錯，妨礙了服務器的處理。
400 （錯誤請求） 服務器不理解請求的語法。
401 （未受權） 請求要求身份驗證。 對於須要登陸的網頁，服務器可能返回此響應。
403 （禁止） 服務器拒絕請求。
404 （未找到） 服務器找不到請求的網頁。
405 （方法禁用） 禁用請求中指定的方法。
406 （不接受） 沒法使用請求的內容特性響應請求的網頁。
407 （須要代理受權） 此狀態代碼與 401（未受權）相似，但指定請求者應當受權使用代理。
408 （請求超時） 服務器等候請求時發生超時。
409 （衝突） 服務器在完成請求時發生衝突。 服務器必須在響應中包含有關衝突的信息。
410 （已刪除） 若是請求的資源已永久刪除，服務器就會返回此響應。
411 （須要有效長度） 服務器不接受不含有效內容長度標頭字段的請求。
412 （未知足前提條件） 服務器未知足請求者在請求中設置的其中一個前提條件。
413 （請求實體過大） 服務器沒法處理請求，由於請求實體過大，超出服務器的處理能力。
414 （請求的 URI 過長） 請求的 URI（一般爲網址）過長，服務器沒法處理。
415 （不支持的媒體類型） 請求的格式不受請求頁面的支持。
416 （請求範圍不符合要求） 若是頁面沒法提供請求的範圍，則服務器會返回此狀態代碼。
417 （未知足指望值） 服務器未知足"指望"請求標頭字段的要求。
5開頭（服務器錯誤）這些狀態代碼表示服務器在嘗試處理請求時發生內部錯誤。 這些錯誤多是服務器自己的錯誤，而不是請求出錯。
500 （服務器內部錯誤） 服務器遇到錯誤，沒法完成請求。
501 （還沒有實施） 服務器不具有完成請求的功能。 例如，服務器沒法識別請求方法時可能會返回此代碼。
502 （錯誤網關） 服務器做爲網關或代理，從上游服務器收到無效響應。
503 （服務不可用） 服務器目前沒法使用（因爲超載或停機維護）。 一般，這只是暫時狀態。
504 （網關超時） 服務器做爲網關或代理，可是沒有及時從上游服務器收到請求。
505 （HTTP 版本不受支持） 服務器不支持請求中所用的 HTTP 協議版本。
24. 如何進行網站性能優化
1. 從用戶角度而言，優化可以讓頁面加載得更快、對用戶的操做響應得更及時，可以給用戶提供更爲友好的體驗。
2. 從服務商角度而言，優化可以減小頁面請求數、或者減少請求所佔帶寬，可以節省可觀的資源。
總之，恰當的優化不只可以改善站點的用戶體驗而且可以節省至關的資源利用。
前端優化的途徑有不少，按粒度大體能夠分爲兩類，第一類是頁面級別的優化，例如 HTTP請求數、腳本的無阻塞加載、內聯腳本的位置優化等 ;第二類則是代碼級別的優化，例如 Javascript中的DOM 操做優化、CSS選擇符優化、圖片優化以及 HTML結構優化等等。另外，本着提升投入產出比的目的，後文提到的各類優化策略大體按照投入產出比從大到小的順序排列。
1、頁面級優化
1. JavaScript 壓縮和模塊打包
2. 按需加載資源
3. 在使用 DOM 操做庫時用上 array-ids
4. 緩存
5. 啓用 HTTP/2
6. 應用性能分析
7. 使用負載均衡方案
8. 爲了更快的啓動時間考慮一下同構
9. 使用索引加速數據庫查詢
10. 使用更快的轉譯方案
11. 避免或最小化 JavaScript 和 CSS 的使用而阻塞渲染
12. 用於將來的一個建議：使用 service workers + 流
13. 圖片編碼優化
25. react和vue有哪些不一樣，說說你對這兩個框架的見解
相同點
· 都支持服務器端渲染
· 都有Virtual DOM,組件化開發,經過props參數進行父子組件數據的傳遞,都實現webComponent規範
· 數據驅動視圖
· 都有支持native的方案,React的React native,Vue的weex
不一樣點
· React嚴格上只針對MVC的view層,Vue則是MVVM模式
· virtual DOM不同,vue會跟蹤每個組件的依賴關係,不須要從新渲染整個組件樹.而對於React而言,每當應用的狀態被改變時,所有組件都會從新渲染,因此react中會須要shouldComponentUpdate這個生命週期函數方法來進行控制
· 組件寫法不同, React推薦的作法是 JSX + inline style, 也就是把HTML和CSS全都寫進JavaScript了,即'all in js'; Vue推薦的作法是webpack+vue-loader的單文件組件格式,即html,css,jd寫在同一個文件;
· 數據綁定: vue實現了數據的雙向綁定,react數據流動是單向的
· state對象在react應用中不可變的,須要使用setState方法更新狀態;在vue中,state對象不是必須的,數據由data屬性在vue對象中管理
26.什麼是mvvm mvc是什麼區別 原理
1、MVC（Model-View-Controller）
MVC是比較直觀的架構模式，用戶操做->View（負責接收用戶的輸入操做）->Controller（業務邏輯處理）->Model（數據持久化）->View（將結果反饋給View）。
MVC使用很是普遍，好比JavaEE中的SSH框架
3、MVVM（Model-View-ViewModel）
若是說MVP是對MVC的進一步改進，那麼MVVM則是思想的徹底變革。它是將「數據模型數據雙向綁定」的思想做爲核心，所以在View和Model之間沒有聯繫，經過ViewModel進行交互，並且Model和ViewModel之間的交互是雙向的，所以視圖的數據的變化會同時修改數據源，而數據源數據的變化也會當即反應view。
27.px和em的區別
px表示像素 (計算機屏幕上的一個點：1px = 1/96in)，是絕對單位，不會由於其餘元素的尺寸變化而變化；
·
·
em表示相對於父元素的字體大小。em是相對單位 ，沒有一個固定的度量值，而是由其餘元素尺寸來決定的相對值。
28.優雅降級和漸進加強
漸進加強（Progressive Enhancement）：一開始就針對低版本瀏覽器進行構建頁面，完成基本的功能，而後再針對高級瀏覽器進行效果、交互、追加功能達到更好的體驗。
優雅降級（Graceful Degradation）：一開始就構建站點的完整功能，而後針對瀏覽器測試和修復。好比一開始使用 CSS3 的特性構建了一個應用，而後逐步針對各大瀏覽器進行 hack 使其能夠在低版本瀏覽器上正常瀏覽。
其實漸進加強和優雅降級並不是什麼新概念，只是舊的概念換了一個新的說法。在傳統軟件開發中，常常會提到向上兼容和向下兼容的概念。漸進加強至關於向上兼容，而優雅降級至關於向下兼容
29.eval()的做用
把字符串參數解析成JS代碼並運行，並返回執行的結果；
eval("2+3");//執行加運算，並返回運算值。
eval("varage=10");//聲明一個age變量
eval的做用域
functiona(){
1. eval("var x=1"); //等效於 var x=1;
2. console.log(x); //輸出1
3. }
4. a();
5. console.log(x);//錯誤 x沒有定
30. JS哪些操做會形成內存泄露
1）意外的全局變量引發的內存泄露
function leak(){
leak="xxx";//leak成爲一個全局變量，不會被回收
}
2）閉包引發的內存泄露
3）3）沒有清理的DOM元素引用
4）被遺忘的定時器或者回調 5）子元素存在引發的內存泄露
31. 瀏覽器緩存有哪些，一般緩存有哪幾種
1、http緩存
2、websql
cookie
localstorage
sessionstorage
flash緩存
32:bootstrap響應式實現的原理
百分比佈局+媒體查詢
33.關於JS事件冒泡與JS事件代理（事件委託）
事件做爲DOM操做重要的一環，須要你們好好理解和運用，今天特地看了一下事件冒泡和事件代理的相關資料，感觸頗深，也深感本身的無知不知道多浪費了多少內存，廢話很少說進入正題：
1.事件冒泡：
通俗易懂的來說，就是當一個子元素的事件被觸發的時候（如onclick事件），該事件會從事件源（被點擊的子元素）開始逐級向上傳播，觸發父級元素的點擊事件。
2.事件委託
事件委託，首先按字面的意思就能看你出來，是將事件交由別人來執行，再聯想到上面講的事件冒泡，是否是想到了？對，就是將子元素的事件經過冒泡的形式交由父元素來執行。下面通過詳細的例子來講明事件委託：
有可能在開發的時候會遇到這種狀況：如導航每個欄目都要加一個事件，你可能會經過遍從來給每一個欄目添加事件：
事件委託是怎
1. var ul = document.getElementById('parentUl');
2. ul.οnclick=function (event) {
3. var e = event||window.event,
4. source = e.target || e.srcElement;//target表示在事件冒泡中觸發事件的源元素，在IE中是srcElement
5. if(source.nodeName.toLowerCase() == "li"){ //判斷只有li觸發的纔會輸出內容
6. alert(source.innerHTML);
7. }
8. stopPropagation(e); //阻止繼續冒泡
9. };
10. function addElement() {
11. var li = document.createElement('li');
12. li.innerHTML="我是新孩子";
13. ul.appendChild(li);
14. }
34. CSS樣式覆蓋規則
規則一：因爲繼承而發生樣式衝突時，最近祖先獲勝。
規則二：繼承的樣式和直接指定的樣式衝突時，直接指定的樣式獲勝
規則三：直接指定的樣式發生衝突時，樣式權值高者獲勝。
樣式的權值取決於樣式的選擇器，權值定義以下表。
CSS選擇器
權值
標籤選擇器
1
類選擇器
10
ID選擇器
100
內聯樣式
1000
僞元素(:first-child等)
1
僞類(:link等)
10
能夠看到，內聯樣式的權值>>ID選擇器>>類選擇器>>標籤選擇器，除此之外，後代選擇器的權值爲每項權值之和，好比」#nav .current a」的權值爲100 + 10 + 1 = 111。
規則四：樣式權值相同時，後者獲勝。
規則五：!important的樣式屬性不被覆蓋。
!important能夠看作是萬不得已的時候，打破上述四個規則的」金手指」。若是你必定要採用某個樣式屬性，而不讓它被覆蓋的，能夠在屬性值後加上!important，以規則四的例子爲例，」.byline a {color:red !important;}」能夠強行使連接顯示紅色。大多數狀況下均可以經過其餘方式來控制樣式的覆蓋，不能濫用!important。
35. 介紹一下box-sizing屬性
兼容問題
首先，box-sizing屬性在FireFox中存在兼容問題，因此須要使用-moz-box-sizing作一下兼容。
屬性值
· box-sizing：content-box
· box-sizing：border-box
· box-sizing：inherit
content-box
· 這是box-sizing的默認屬性值
· 是CSS2.1中規定的寬度高度的顯示行爲
· 在CSS中定義的寬度和高度就對應到元素的內容框
· 在CSS中定義的寬度和高度以外繪製元素的內邊距和邊框
border-box
· 在CSS中微元素設定的寬度和高度就決定了元素的邊框盒
· 即爲元素在設置內邊距和邊框是在已經設定好的寬度和高度以內進行繪製
· CSS中設定的寬度和高度減去邊框和內間距才能獲得元素內容所佔的實際寬度和高度
36. css選擇符有哪些？優先級算法如何計算？（常見）
37. 請簡要描述margin重合問題，及解決方式
1.同向margin的重疊：
1圖片的margin-top與3圖片的margin-top發生重疊，2圖片的margin-bottom與3圖片的margin-bottom發生重疊。這時候重疊以後的margin值由發生重疊兩片的最大值決定；若是其中一個出現負值，則由最大的正邊距減去絕對值最大的負邊距，若是沒有最大正邊距，則由0減去絕對值最大的負邊距。
解決同向重疊的方法：
（1）在最外層的div中加入overflow:hidden;zoom:1
（2）在最外層加入padding:1px;屬性
（3）在最外層加入：border:1px solid #cacbcc;
2.異向重疊問題：
1圖片的margin-bottom與2圖片的margin-top發生重疊，這時候重疊以後的margin值由發生重疊兩圖片的最大值的決定的。
解決異向重疊問題：
float:left（只能解決IE6瀏覽器中的異向重疊問題，能夠解決IE8以上、chorme、firefox、opera下的同向重疊問題）
38：position的值，relative\absolute\fixed分別相對於進行誰定位，有什麼區別，何時用？
39.解釋下CSS sprites，以及你要如何在頁面或網站中使用它。
CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的「background-image」，「background-repeat」，「background-position」的組合進行背景定位，background-position能夠用數字能精確的定位出背景圖片的位置
40.什麼是閉包，如何使用它，爲何要使用它？
包就是可以讀取其餘函數內部變量的函數。因爲在Javascript語言中，只有函數內部的子函數才能讀取局部變量，所以能夠把閉包簡單理解成「定義在一個函數內部的函數」。
因此，在本質上，閉包就是將函數內部和函數外部鏈接起來的一座橋樑。閉包能夠用在許多地方。它的最大用處有兩個，一個是前面提到的能夠讀取函數內部的變量，另外一個就是讓這些變量的值始終保持在內存中。
使用閉包的注意點：
· 因爲閉包會使得函數中的變量都被保存在內存中，內存消耗很大，因此不能濫用閉包，不然會形成網頁的性能問題，在IE中可能致使內存泄露。解決方法是，在退出函數以前，將不使用的局部變量所有刪除。
· 閉包會在父函數外部，改變父函數內部變量的值。因此，若是你把父函數看成對象（object）使用，把閉包看成它的公用方法（Public Method），把內部變量看成它的私有屬性（private value），這時必定要當心，不要隨便改變父函數內部變量的值。
41.請解釋JSONP的工做原理，以及它爲何不是真正的AJAX。
JSONP (JSON with Padding)是一個簡單高效的跨域方式，HTML中的script標籤能夠加載並執行其餘域的javascript，因而咱們能夠經過script標記來動態加載其餘域的資源。例如我要從域A的頁面pageA加載域B的數據，那麼在域B的頁面pageB中我以JavaScript的形式聲明pageA須要的數據，而後在 pageA中用script標籤把pageB加載進來，那麼pageB中的腳本就會得以執行。JSONP在此基礎上加入了回調函數，pageB加載完以後會執行pageA中定義的函數，所須要的數據會以參數的形式傳遞給該函數。JSONP易於實現，可是也會存在一些安全隱患，若是第三方的腳本隨意地執行，那麼它就能夠篡改頁面內容，截獲敏感數據。可是在受信任的雙方傳遞數據，JSONP是很是合適的選擇。
AJAX是不跨域的，而JSONP是一個是跨域的，還有就是兩者接收參數形式不同！
42.請解釋一下JavaScript的同源策略。
在客戶端編程語言中，如javascript和 ActionScript，同源策略是一個很重要的安全理念，它在保證數據的安全性方面有着重要的意義。同源策略規定跨域之間的腳本是隔離的，一個域的腳本不能訪問和操做另一個域的絕大部分屬性和方法。那麼什麼叫相同域，什麼叫不一樣的域呢？當兩個域具備相同的協議, 相同的端口，相同的host，那麼咱們就能夠認爲它們是相同的域。同源策略還應該對一些特殊狀況作處理，好比限制file協議下腳本的訪問權限。本地的HTML文件在瀏覽器中是經過file協議打開的，若是腳本能經過file協議訪問到硬盤上其它任意文件，就會出現安全隱患，目前IE8還有這樣的隱患。
43.怎樣添加、移除、移動、複製、建立和查找節點？
1）建立新節點
createDocumentFragment() //建立一個DOM片斷
createElement() //建立一個具體的元素
createTextNode() //建立一個文本節點
2）添加、移除、替換、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替換
insertBefore() //插入
3）查找
getElementsByTagName() //經過標籤名稱
getElementsByName() //經過元素的Name屬性的值
getElementById() //經過元素Id，惟一性
44.談談垃圾回收機制方式及內存管理
回收機制方式
一、定義和用法：垃圾回收機制(GC:Garbage Collection),執行環境負責管理代碼執行過程當中使用的內存。
二、原理：垃圾收集器會按期（週期性）找出那些不在繼續使用的變量，而後釋放其內存。可是這個過程不是實時的，由於其開銷比較大，因此垃圾回收器會按照固定的時間間隔週期性的執行。
三、實例以下：
function fn1() {
var obj = {name: 'hanzichi', age: 10};
}
function fn2() {
var obj = {name:'hanzichi', age: 10};
return obj;
}var a = fn1();var b = fn2();
fn1中定義的obj爲局部變量，而當調用結束後，出了fn1的環境，那麼該塊內存會被js引擎中的垃圾回收器自動釋放；在fn2被調用的過程當中，返回的對象被全局變量b所指向，因此該塊內存並不會被釋放。
四、垃圾回收策略：標記清除(較爲經常使用)和引用計數。
標記清除：
定義和用法：當變量進入環境時，將變量標記"進入環境"，當變量離開環境時，標記爲："離開環境"。某一個時刻，垃圾回收器會過濾掉環境中的變量，以及被環境變量引用的變量，剩下的就是被視爲準備回收的變量。
到目前爲止，IE、Firefox、Opera、Chrome、Safari的js實現使用的都是標記清除的垃圾回收策略或相似的策略，只不過垃圾收集的時間間隔互不相同。
引用計數：
定義和用法：引用計數是跟蹤記錄每一個值被引用的次數。
基本原理：就是變量的引用次數，被引用一次則加1，當這個引用計數爲0時，被視爲準備回收的對象。
4五、jQuery的事件委託方法bind 、live、delegate、on之間有什麼區別？
(1)、bind 【jQuery 1.3以前】
定義和用法：主要用於給選擇到的元素上綁定特定事件類型的監聽函數；
語法：bind(type,[data],function(eventObject))；
特色：
(1)、適用於頁面元素靜態綁定。只能給調用它的時候已經存在的元素綁定事件，不能給將來新增的元素綁定事件。
(2)、當頁面加載完的時候，你才能夠進行bind()，因此可能產生效率問題。
實例以下：$( "#members li a" ).bind( "click", function( e ) {} );
(2)、live 【jQuery 1.3以後】
定義和用法：主要用於給選擇到的元素上綁定特定事件類型的監聽函數；
語法：live(type, [data], fn);
特色：
(1)、live方法並無將監聽器綁定到本身(this)身上，而是綁定到了this.context上了。
(2)、live正是利用了事件委託機制來完成事件的監聽處理，把節點的處理委託給了document，新添加的元素沒必要再綁定一次監聽器。
(3)、使用live（）方法但卻只能放在直接選擇的元素後面，不能在層級比較深，連綴的DOM遍歷方法後面使用，即$(「ul」").live...能夠，但$("body").find("ul").live...不行；
實例以下：$( document ).on( "click", "#members li a", function( e ) {} );
(3)、delegate 【jQuery 1.4.2中引入】
定義和用法：將監聽事件綁定在就近的父級元素上
語法：delegate(selector,type,[data],fn)
特色：
(1)、選擇就近的父級元素，由於事件能夠更快的冒泡上去，可以在第一時間進行處理。
(2)、更精確的小範圍使用事件代理，性能優於.live()。能夠用在動態添加的元素上。
實例以下：
$("#info_table").delegate("td","click",function(){/*顯示更多信息*/});
$("table").find("#info").delegate("td","click",function(){/*顯示更多信息*/});
(4)、on 【1.7版本整合了以前的三種方式的新事件綁定機制】
定義和用法：將監聽事件綁定到指定元素上。
語法：on(type,[selector],[data],fn)
實例以下：$("#info_table").on("click","td",function(){/*顯示更多信息*/});參數的位置寫法與delegate不同。
說明：on方法是當前JQuery推薦使用的事件綁定方法，附加只運行一次就刪除函數的方法是one()。
總結：.bind(), .live(), .delegate(),.on()分別對應的相反事件爲：.unbind(),.die(), .undelegate(),.off()
4六、px和em的區別
相同點：px和em都是長度單位；
異同點：px的值是固定的，指定是多少就是多少，計算比較容易。em得值不是固定的，而且em會繼承父級元素的字體大小。
瀏覽器的默認字體高都是16px。因此未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em, 10px=0.625em。
4七、瀏覽器的內核分別是什麼?
IE: trident內核
Firefox：gecko內核
Safari：webkit內核
Opera：之前是presto內核，Opera現已改用Google Chrome的Blink內核
Chrome：Blink(基於webkit，Google與Opera Software共同開發)
4八、什麼叫優雅降級和漸進加強？
漸進加強 progressive enhancement：
針對低版本瀏覽器進行構建頁面，保證最基本的功能，而後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
優雅降級 graceful degradation：
一開始就構建完整的功能，而後再針對低版本瀏覽器進行兼容。
區別：
a. 優雅降級是從複雜的現狀開始，並試圖減小用戶體驗的供給
b. 漸進加強則是從一個很是基礎的，可以起做用的版本開始，並不斷擴充，以適應將來環境的須要
c. 降級（功能衰減）意味着往回看；而漸進加強則意味着朝前看，同時保證其根基處於安全地帶
4九、sessionStorage 、localStorage 和 cookie 之間的區別
共同點：用於瀏覽器端存儲的緩存數據
不一樣點：
(1)、存儲內容是否發送到服務器端：當設置了Cookie後，數據會發送到服務器端，形成必定的寬帶浪費；
web storage,會將數據保存到本地，不會形成寬帶浪費；
(2)、數據存儲大小不一樣：Cookie數據不能超過4K,適用於會話標識；web storage數據存儲能夠達到5M;
(3)、數據存儲的有效期限不一樣：cookie只在設置了Cookid過時時間以前一直有效，即便關閉窗口或者瀏覽器；
sessionStorage,僅在關閉瀏覽器以前有效；localStorage,數據存儲永久有效；
(4)、做用域不一樣：cookie和localStorage是在同源同學口中都是共享的；sessionStorage不在不一樣的瀏覽器窗口中共享，即便是同一個頁面；
50、瀏覽器是如何渲染頁面的？
渲染的流程以下：
1.解析HTML文件，建立DOM樹。
自上而下，遇到任何樣式（link、style）與腳本（script）都會阻塞（外部樣式不阻塞後續外部腳本的加載）。
2.解析CSS。優先級：瀏覽器默認設置<用戶設置<外部樣式<內聯樣式<HTML中的style樣式；
3.將CSS與DOM合併，構建渲染樹（Render Tree）
4.佈局和繪製，重繪（repaint）和重排（reflow）
51:js的基本數據類型
JavaScript中有五種基本數據類型，它們分別是：undefined，null，boolean，number，string。
還有一種複雜數據類型-object。
52：事件委託
事件委託就是利用的DOM事件的事件捕獲階段。把具體dom上發生的事件，委託給更大範圍的dom去處理。比如送信員，若是每次都把信件送給每一戶，很是繁瑣。可是若是交給一個大範圍的管理者，好比小區的傳達室，那麼事情會變得很是簡單。事件委託就相似這種原理，我頁面中有不少按鈕，若是不使用事件委託，我只能在每一個按鈕上註冊事件。很是麻煩。但若是我把事件註冊在一個大範圍的div（假設全部的按鈕都在這個div中），那麼我只要註冊一次事件，就能夠處理全部按鈕（只要按鈕包含在上述div中）事件的響應了
53：CSS3新增了不少的屬性，下面一塊兒來分析一下新增的一些屬性：
1.CSS3邊框：
· border-radius：CSS3圓角邊框。在 CSS2 中添加圓角矩形須要技巧，咱們必須爲每一個圓角使用不一樣的圖片，在 CSS3 中，建立圓角是很是容易的，在 CSS3 中，border-radius 屬性用於建立圓角。border：2px solid;
· box-shadow：CSS3邊框陰影。在 CSS3 中，box-shadow 用於向方框添加陰影。box-shadow:10px 10px 5px #888888;
· border-image：CSS3邊框圖片。經過 CSS3 的 border-image 屬性，您可使用圖片來建立邊框。border-image：url(border.png) 30 30 round;
2.CSS3背景：
· background-size： 屬性規定背景圖片的尺寸。在 CSS3 以前，背景圖片的尺寸是由圖片的實際尺寸決定的。在 CSS3 中，能夠規定背景圖片的尺寸，這就容許咱們在不一樣的環境中重複使用背景圖片。您可以以像素或百分比規定尺寸。若是以百分比規定尺寸，那麼尺寸相對於父元素的寬度和高度。
· background-origin ：屬性規定背景圖片的定位區域。背景圖片能夠放置於 content-box、padding-box 或 border-box 區域。
3.CSS3文字效果：
· text-shadow：在 CSS3 中，text-shadow 可向文本應用陰影。text-shadow:5px 5px 5px #FFFFFF;
· word-wrap :單詞太長的話就可能沒法超出某個區域，容許對長單詞進行拆分，並換行到下一行：p{word-wrap:break-word;}
4.CSS3 2D轉換：
transform：經過 CSS3 轉換，咱們可以對元素進行移動、縮放、轉動、拉長或拉伸。
· translate()：元素從其當前位置移動，根據給定的 left（x 座標） 和 top（y 座標） 位置參數：transform：translate（50px,100px）;值 translate(50px,100px) 把元素從左側移動 50 像素，從頂端移動 100 像素。
· rotate()：元素順時針旋轉給定的角度。容許負值，元素將逆時針旋轉。transform:rotate(30deg);值 rotate(30deg) 把元素順時針旋轉 30 度。
· scale():元素的尺寸會增長或減小，根據給定的寬度（X 軸）和高度（Y 軸）參數：transform:scale(2,4);值 scale(2,4) 把寬度轉換爲原始尺寸的 2 倍，把高度轉換爲原始高x() 5.CSS3 3D轉換：
· rotateX()：元素圍繞其 X 軸以給定的度數進行旋轉。transform：rotateX(120deg);
· rotateY()：元素圍繞其 Y 軸以給定的度數進行旋轉。transform：rotateY(120deg);
6.CSS3 過渡：當元素從一種樣式變換爲另外一種樣式時爲元素添加效果。
7.CSS3動畫：經過 CSS3，咱們可以建立動畫，這能夠在許多網頁中取代動畫圖片、Flash 動畫以及 JavaScript。
8.CSS3多列：
· column-count：屬性規定元素應該被分隔的列數。
· column-gap：屬性規定列之間的間隔。
· column-rule ：屬性設置列之間的寬度、樣式和顏色規則。
9.CSS3用戶界面：
· resize：屬性規定是否可由用戶調整元素尺寸。
· box-sizing：屬性容許您以確切的方式定義適應某個區域的具體內容。
· outline-offset ：屬性對輪廓進行偏移，並在超出邊框邊緣的位置繪製輪廓。
54：從輸入url到顯示頁面，都經歷了什麼
第一步：客戶機提出域名解析請求,並將該請求發送給本地的域名服務器。
第二步：當本地的域名服務器收到請求後,就先查詢本地的緩存,若是有該紀錄項,則本地的域名服務器就直接把查詢的結果返回。
第三步：若是本地的緩存中沒有該紀錄,則本地域名服務器就直接把請求發給根域名服務器,而後根域名服務器再返回給本地域名服務器一個所查詢域(根的子域)的主域名服務器的地址。
第四步：本地服務器再向上一步返回的域名服務器發送請求,而後接受請求的服務器查詢本身的緩存,若是沒有該紀錄,則返回相關的下級的域名服務器的地址。
第五步：重複第四步,直到找到正確的紀錄。
第2種解釋：
通常會經歷如下幾個過程：
一、首先，在瀏覽器地址欄中輸入url
二、瀏覽器先查看瀏覽器緩存-系統緩存-路由器緩存，若是緩存中有，會直接在屏幕中顯示頁面內容。若沒有，則跳到第三步操做。
三、在發送http請求前，須要域名解析(DNS解析)(DNS（域名系統，Domain Name System）是互聯網的一項核心服務，它做爲能夠將域名和IP地址相互映射的一個分佈式數據庫，可以令人更方便的訪問互聯網，而不用去記住IP地址。)，解析獲取相應的IP地址。
四、瀏覽器向服務器發起tcp鏈接，與瀏覽器創建tcp三次握手。（TCP即傳輸控制協議。TCP鏈接是互聯網鏈接協議集的一種。）
五、握手成功後，瀏覽器向服務器發送http請求，請求數據包。
六、服務器處理收到的請求，將數據返回至瀏覽器
七、瀏覽器收到HTTP響應
八、讀取頁面內容，瀏覽器渲染，解析html源碼
九、生成Dom樹、解析css樣式、js交互
十、客戶端和服務器交互
十一、ajax查詢
55：對<meta></meta>標籤有什麼理解
什麼是meta標籤？
引自下W3school的定義說明一下。
元數據（metadata）是關於數據的信息。
標籤提供關於 HTML 文檔的元數據。元數據不會顯示在頁面上，可是對於機器是可讀的。
典型的狀況是，meta 元素被用於規定頁面的描述、關鍵詞、文檔的做者、最後修改時間以及其餘元數據。
標籤始終位於 head 元素中。
元數據可用於瀏覽器（如何顯示內容或從新加載頁面），搜索引擎（關鍵詞），或其餘 web 服務。
其實對上面的概念簡單總結下就是：<meta> 標籤提供關於 HTML 文檔的元數據。它不會顯示在頁面上，可是對於機器是可讀的。可用於瀏覽器（如何顯示內容或從新加載頁面），搜索引擎（關鍵詞），或其餘 web 服務。
meta的做用
meta裏的數據是供機器解讀的，告訴機器該如何解析這個頁面，還有一個用途是能夠添加服務器發送到瀏覽器的http頭部內容
56：new操做符到底到了什麼
先看代碼
[javascript] view plain copy
1. var Func=function(){
2. };
3. var func=new Func ();
new共通過了4幾個階段
一、建立一個空對象
[javascript] view plain copy
1. varobj=new Object();
二、設置原型鏈
[javascript] view plain copy
1. obj.__proto__= Func.prototype;
三、讓Func中的this指向obj，並執行Func的函數體。
[javascript] view plain copy
1. var result =Func.call(obj);
四、判斷Func的返回值類型：
若是是值類型，返回obj。若是是引用類型，就返回這個引用類型的對象。
[javascript] view plain copy
1. if (typeof(result) == "object"){
2. func=result;
3. }
4. else{
5. func=obj;;
6. }
57：h5新特性
HTML5新特性 —— 新特性
(1)新的語義標籤和屬性
(2)表單新特性
(3)視頻和音頻
(4)Canvas繪圖
(5)SVG繪圖
(6)地理定位
(7)拖放API
58：vue的生命週期
58：請寫出你對閉包的理解，並列出簡單的理解
使用閉包主要是爲了設計私有的方法和變量。閉包的優勢是能夠避免全局變量的污染，缺點是閉包會常駐內存，會增大內存使用量，使用不當很容易形成內存泄露。
閉包有三個特性：
1.函數嵌套函數
2.函數內部能夠引用外部的參數和變量
3.參數和變量不會被垃圾回收機制回收
59：display none visibility hidden區別？
1.display:none是完全消失，不在文檔流中佔位，瀏覽器也不會解析該元素；visibility:hidden是視覺上消失了，能夠理解爲透明度爲0的效果，在文檔流中佔位，瀏覽器會解析該元素；
2.使用visibility:hidden比display:none性能上要好，display:none切換顯示時visibility，頁面產生迴流（當頁面中的一部分元素須要改變規模尺寸、佈局、顯示隱藏等，頁面從新構建，此時就是迴流。全部頁面第一次加載時須要產生一次迴流），而visibility切換是否顯示時則不會引發迴流。
60：JavaScript中如何檢測一個變量是一個String類型？請寫出函數實現
typeof(obj) === "string"
typeof obj === "string"
obj.constructor === String
61：如何理解閉包？
一、定義和用法：當一個函數的返回值是另一個函數，而返回的那個函數若是調用了其父函數內部的其它變量，若是返回的這個函數在外部被執行，就產生了閉包。
二、表現形式：使函數外部可以調用函數內部定義的變量。
三、實例以下：
(1)、根據做用域鏈的規則，底層做用域沒有聲明的變量，會向上一級找，找到就返回，沒找到就一直找，直到window的變量，沒有就返回undefined。這裏明顯count 是函數內部的flag2 的那個count 。
var count=10; //全局做用域 標記爲flag1function add(){
var count=0; //函數全局做用域 標記爲flag2
return function(){
count+=1; //函數的內部做用域 alert(count);
}
}var s = add()
s();//輸出1
s();//輸出2
四、變量的做用域
要理解閉包，首先必須理解Javascript特殊的變量做用域。
變量的做用域分類：全局變量和局部變量。
特色：
一、函數內部能夠讀取函數外部的全局變量；在函數外部沒法讀取函數內的局部變量。
二、函數內部聲明變量的時候，必定要使用var命令。若是不用的話，你實際上聲明瞭一個全局變量！
五、使用閉包的注意點
1）濫用閉包，會形成內存泄漏：因爲閉包會使得函數中的變量都被保存在內存中，內存消耗很大，因此不能濫用閉包，不然會形成網頁的性能問題，在IE中可能致使內存泄露。解決方法是，在退出函數以前，將不使用的局部變量所有刪除。
2）會改變父函數內部變量的值。因此，若是你把父函數看成對象（object）使用，把閉包看成它的公用方法（Public Method），把內部變量看成它的私有屬性（private value），這時必定要當心，不要隨便改變父函數內部變量的值。
62：談談垃圾回收機制方式及內存管理
回收機制方式
一、定義和用法：垃圾回收機制(GC:Garbage Collection),執行環境負責管理代碼執行過程當中使用的內存。
二、原理：垃圾收集器會按期（週期性）找出那些不在繼續使用的變量，而後釋放其內存。可是這個過程不是實時的，由於其開銷比較大，因此垃圾回收器會按照固定的時間間隔週期性的執行。
三、實例以下：
function fn1() {
var obj = {name: 'hanzichi', age: 10};
}
function fn2() {
var obj = {name:'hanzichi', age: 10};
return obj;
}var a = fn1();var b = fn2();
fn1中定義的obj爲局部變量，而當調用結束後，出了fn1的環境，那麼該塊內存會被js引擎中的垃圾回收器自動釋放；在fn2被調用的過程當中，返回的對象被全局變量b所指向，因此該塊內存並不會被釋放。
四、垃圾回收策略：標記清除(較爲經常使用)和引用計數。
標記清除：
定義和用法：當變量進入環境時，將變量標記"進入環境"，當變量離開環境時，標記爲："離開環境"。某一個時刻，垃圾回收器會過濾掉環境中的變量，以及被環境變量引用的變量，剩下的就是被視爲準備回收的變量。
到目前爲止，IE、Firefox、Opera、Chrome、Safari的js實現使用的都是標記清除的垃圾回收策略或相似的策略，只不過垃圾收集的時間間隔互不相同。
引用計數：
定義和用法：引用計數是跟蹤記錄每一個值被引用的次數。
基本原理：就是變量的引用次數，被引用一次則加1，當這個引用計數爲0時，被視爲準備回收的對象。
63：判斷一個字符串中出現次數最多的字符，統計這個次數
var str = 'asdfssaaasasasasaa';
var json = {};
for (var i = 0; i < str.length; i++) {
if(!json[str.charAt(i)]){
json[str.charAt(i)] = 1;
}else{
json[str.charAt(i)]++;
}
};var iMax = 0;var iIndex = '';for(var i in json){
if(json[i]>iMax){
iMax = json[i];
iIndex = i;
}
} console.log('出現次數最多的是:'+iIndex+'出現'+iMax+'次');
6四、$(document).ready()方法和window.onload有什麼區別？
(1)、window.onload方法是在網頁中全部的元素(包括元素的全部關聯文件)徹底加載到瀏覽器後才執行的。
(2)、$(document).ready() 方法能夠在DOM載入就緒時就對其進行操縱，並調用執行綁定的函數。
6五、 jquery中$.get()提交和$.post()提交有區別嗎？
相同點：都是異步請求的方式來獲取服務端的數據；
異同點：
一、請求方式不一樣：$.get() 方法使用GET方法來進行異步請求的。$.post() 方法使用POST方法來進行異步請求的。
二、參數傳遞方式不一樣：get請求會將參數跟在URL後進行傳遞，而POST請求則是做爲HTTP消息的實體內容發送給Web服務器的，這種傳遞是對用戶不可見的。
三、數據傳輸大小不一樣：get方式傳輸的數據大小不能超過2KB 而POST要大的多
四、安全問題： GET 方式請求的數據會被瀏覽器緩存起來，所以有安全問題。
6六、jQuery的事件委託方法bind 、live、delegate、on之間有什麼區別？（常見）
(1)、bind 【jQuery 1.3以前】
定義和用法：主要用於給選擇到的元素上綁定特定事件類型的監聽函數；
語法：bind(type,[data],function(eventObject))；
特色：
(1)、適用於頁面元素靜態綁定。只能給調用它的時候已經存在的元素綁定事件，不能給將來新增的元素綁定事件。
(2)、當頁面加載完的時候，你才能夠進行bind()，因此可能產生效率問題。
實例以下：$( "#members li a" ).bind( "click", function( e ) {} );
(2)、live 【jQuery 1.3以後】
定義和用法：主要用於給選擇到的元素上綁定特定事件類型的監聽函數；
語法：live(type, [data], fn);
特色：
(1)、live方法並無將監聽器綁定到本身(this)身上，而是綁定到了this.context上了。
(2)、live正是利用了事件委託機制來完成事件的監聽處理，把節點的處理委託給了document，新添加的元素沒必要再綁定一次監聽器。
(3)、使用live（）方法但卻只能放在直接選擇的元素後面，不能在層級比較深，連綴的DOM遍歷方法後面使用，即$(「ul」").live...能夠，但$("body").find("ul").live...不行；
實例以下：$( document ).on( "click", "#members li a", function( e ) {} );
(3)、delegate 【jQuery 1.4.2中引入】
定義和用法：將監聽事件綁定在就近的父級元素上
語法：delegate(selector,type,[data],fn)
特色：
(1)、選擇就近的父級元素，由於事件能夠更快的冒泡上去，可以在第一時間進行處理。
(2)、更精確的小範圍使用事件代理，性能優於.live()。能夠用在動態添加的元素上。
實例以下：
$("#info_table").delegate("td","click",function(){/*顯示更多信息*/});
$("table").find("#info").delegate("td","click",function(){/*顯示更多信息*/});
(4)、on 【1.7版本整合了以前的三種方式的新事件綁定機制】
定義和用法：將監聽事件綁定到指定元素上。
語法：on(type,[selector],[data],fn)
實例以下：$("#info_table").on("click","td",function(){/*顯示更多信息*/});參數的位置寫法與delegate不同。
說明：on方法是當前JQuery推薦使用的事件綁定方法，附加只運行一次就刪除函數的方法是one()。
總結：.bind(), .live(), .delegate(),.on()分別對應的相反事件爲：.unbind(),.die(), .undelegate(),.off()
6七、px和em的區別（常見）
相同點：px和em都是長度單位；
異同點：px的值是固定的，指定是多少就是多少，計算比較容易。em得值不是固定的，而且em會繼承父級元素的字體大小。
瀏覽器的默認字體高都是16px。因此未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em, 10px=0.625em。
6八、瀏覽器的內核分別是什麼?
IE: trident內核
Firefox：gecko內核
Safari：webkit內核
Opera：之前是presto內核，Opera現已改用Google Chrome的Blink內核
Chrome：Blink(基於webkit，Google與Opera Software共同開發)
6九、什麼叫優雅降級和漸進加強？（常見）
漸進加強 progressive enhancement：
針對低版本瀏覽器進行構建頁面，保證最基本的功能，而後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
優雅降級 graceful degradation：
一開始就構建完整的功能，而後再針對低版本瀏覽器進行兼容。
區別：
a. 優雅降級是從複雜的現狀開始，並試圖減小用戶體驗的供給
b. 漸進加強則是從一個很是基礎的，可以起做用的版本開始，並不斷擴充，以適應將來環境的須要
c. 降級（功能衰減）意味着往回看；而漸進加強則意味着朝前看，同時保證其根基處於安全地帶
70、sessionStorage 、localStorage 和 cookie 之間的區別（常見）
共同點：用於瀏覽器端存儲的緩存數據
不一樣點：
(1)、存儲內容是否發送到服務器端：當設置了Cookie後，數據會發送到服務器端，形成必定的寬帶浪費；
web storage,會將數據保存到本地，不會形成寬帶浪費；
(2)、數據存儲大小不一樣：Cookie數據不能超過4K,適用於會話標識；web storage數據存儲能夠達到5M;
(3)、數據存儲的有效期限不一樣：cookie只在設置了Cookid過時時間以前一直有效，即便關閉窗口或者瀏覽器；
sessionStorage,僅在關閉瀏覽器以前有效；localStorage,數據存儲永久有效；
(4)、做用域不一樣：cookie和localStorage是在同源同學口中都是共享的；sessionStorage不在不一樣的瀏覽器窗口中共享，即便是同一個頁面；--------------------- 版權聲明：本文爲CSDN博主「小胖梅」的原創文章，遵循CC 4.0 by-sa版權協議，轉載請附上原文出處連接及本聲明。原文連接：https://blog.csdn.net/xm1037782843/article/details/80708533
- 1. 【面試】前端面試題
- 2. 前端面試題
- 3. 前端面試題~~~~
- 更多相關文章...
- • Lua 調試(Debug) - Lua 教程
- • Markdown 標題 - Markdown 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • Docker容器實戰(一) - 封神Server端技術
-
每一个你不满意的现在，都有一个你没有努力的曾经。