web前端常見面試題
1、什麽是盒子模型？
CSS 盒模型(Box Model)，又稱框模型。它包括：content、padding、border、margin，所有HTML元素都可以看作盒子。
註: 當通過CSS指定一個元素的寬度和高度屬性時，只是設置了實際內容區域的寬度和高度。
一旦為頁面設置了恰當的 DTD，瀏覽器會使用標準盒模型（標準模式），而DTD缺失則在ie6，ie7，ie8下將會使用IE盒模型（怪異模式）。
標準盒模型 元素總寬度 = width + （padding + border + margin）* 2
IE盒模型 元素總寬度 = width + margin * 2
2、行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
行內元素：a、b、span、img、input、strong、select、label、em、button、textarea
塊級元素：div、form、ul、li、dl、dt、dd、p、h1-h6、blockquote
空元素：即系沒有內容的HTML元素，例如： meta、link 、br、hr、input、img
3、CSS實現垂直水平居中
方法一：
給元素設置一個顯示寬度，並設置左右margin為auto
方法二：
父元素設置相對定位
position: relative;
子元素設置絕對定位，並設置top、left、margin-top、margin-left等屬性
position: absolute;
top: 50%;
left: 50%
margin-top: -（高度 / 2）
margin-left: -（寬度 / 2）
方法三：
父元素設置相對定位
position: relative;
子元素設置絕對定位，並設置top、left、margin-top、margin-left等屬性
position: absolute;
top: 50%;
left: 50%
transform: translate(-50%, -50%); // translate的參數會以自身的長寬做參考
方法四：
內聯元素水平居中
利用 text-align: center; 可以實現在塊級元素內部的內聯元素水平居中。此方法對內聯元素(inline), 內聯塊(inline-block), 內聯表(inline-table), inline-flex元素水平居中都有效。
4、簡述一下src與href的區別
href (Hypertext Reference) 超文本引用，用在link和a等元素上，指向網絡資源所在位置，建立與當前元素或當前文檔之間的超鏈接。
src指向外部資源的位置，指向的內容將會嵌入到文檔中當前標簽所在位置；在請求src資源時會將其指向的資源下載並應用到文檔內，例如js腳本，img圖片和frame等元素。當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，類似於將所指向資源嵌入當前標簽內。這也是為什麽將js腳本放在底部而不是頭部。
補充：link和@import的區別
兩者都是外部引用CSS的方式，但是存在一定的區別。
區別1：link是XHTML標簽，除了加載CSS外，還可以定義RSS等其他事務；@import屬於CSS範疇，只能加載CSS。
區別2：link引用CSS時，在頁面載入時同時加載；@import需要頁面網頁完全載入以後加載。
區別3：link是XHTML標簽，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。
區別4：link支持使用Javascript控制DOM去改變樣式；而@import不支持。
5、什麽是CSS Hack?
一般來說是針對不同的瀏覽器寫不同的CSS,就是 CSS Hack。
IE瀏覽器Hack一般又分為三種，條件Hack、屬性級Hack、選擇符Hack（詳細參考CSS文檔：css文檔）。例如：
// 1、條件Hack <!--[if IE]><style>
.test{color:red;}
</style>
<![endif]-->
// 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、簡述同步和異步的區別
同步是阻塞模式，異步是非阻塞模式。
同步就是指一個進程在執行某個請求的時候，若該請求需要一段時間才能返回信息，那麽這個進程將會一直等待下去，直到收到返回信息才繼續執行下去；
異步是指進程不需要一直等下去，而是繼續執行下面的操作，不管其他進程的狀態。當有消息返回時系統會通知進程進行處理，這樣可以提高執行的效率。
7、px和em的區別
px和em都是長度單位，區別是，px的值是固定的，指定是多少就是多少，計算比較容易。
em的值不是固定的，並且em會繼承父級元素的字體大小。
瀏覽器的默認字體高都是16px。所以未經調整的瀏覽器都符合: 1em=16px。那麽12px=0.75em, 10px=0.625em
8、什麽叫優雅降級和漸進增強？
漸進增強 progressive enhancement：
針對低版本瀏覽器進行構建頁面，保證最基本的功能，然後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
優雅降級 graceful degradation：
一開始就構建完整的功能，然後再針對低版本瀏覽器進行兼容。
區別：
a. 優雅降級是從復雜的現狀開始，並試圖減少用戶體驗的供給
b. 漸進增強則是從一個非常基礎的，能夠起作用的版本開始，並不斷擴充，以適應未來環境的需要
c. 降級（功能衰減）意味著往回看；而漸進增強則意味著朝前看，同時保證其根基處於安全地帶
9、瀏覽器的內核分別是什麽?
IE: trident內核
Firefox：gecko內核
Safari：webkit內核
Opera：以前是presto內核，Opera現已改用Google Chrome的Blink內核
Chrome：Blink(基於webkit，Google與Opera Software共同開發)
10、怎樣添加、移除、移動、復制、創建和查找節點？
1）創建新節點
createDocumentFragment() //創建一個DOM片段
createElement() //創建一個具體的元素
createTextNode() //創建一個文本節點
2）添加、移除、替換、插入
parentnode.appendChild(newnode) //添加
parentnode.removeChild(oldnode) //移除
parentnode.replaceChild(newnode, oldnode) //替換
parentnode.insertBefore(newnode, oldnode) //插入
3）查找
getElementsByTagName() //通過標簽名稱
getElementsByName() //通過元素的Name屬性的值
getElementById() //通過元素Id，唯一性
11、如何消除一個數組裏面重復的元素？
方法一：
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]);
}
}
console.log(arr2);
var arr1 =[1,2,2,2,3,3,3,4,5,6], arr2 = [];
arr1.forEach(function (item, index) {
if (arr2.indexOf(item) < 0) {
arr2.push(item);
}
})
console.log(arr2);
方法二：
var arr1 =[1,2,2,2,3,3,3,4,5,6], arr2 = [];
arr1.sort(function (a, b) {
return a - b;
})
for (var i = 0, len = arr1.length; i < len; i++) {
if (arr1[i] != arr1[i + 1]) {
arr2.push(arr1[i]);
}
}
console.log(arr2);
12、實現一個函數clone，可以對JavaScript中的5種主要的數據類型（包括Number、String、Object、Array、Boolean）進行值復制。
typeof能返回六種數據類型，undefined、number、string、boolean、object、function
function clone(obj) {
var o;
switch(typeof obj) {
case "undefined":
break;
case "string":
o = obj;
break;
case "number":
o = obj;
break;
case "boolean":
o = obj;
break;
case "object":
if (obj === null) {
o = null;
} else if (obj.constructor === Array) {
o = [];
obj.forEach(function (item, index) {
o[index] = clone(item);
})
} else {
o = {};
for (var key in obj) {
o[key] = clone(obj[key]);
}
}
break;
default:
o = obj;
break;
}
return o;
}
13、javascript中的call、apply、bind
參考：https://www.cnblogs.com/coco1s/p/4833199.html
apply 、 call 、bind 三者都是用來改變函數的this對象的指向；
apply 、 call 、bind 三者第一個參數都是this要指向的對象，也就是想指定的上下文；
apply 、 call 、bind 三者都可以利用後續參數傳參；
bind 是返回對應函數，便於稍後調用；apply 、call 則是立即調用 。
14、在Javascript中什麽是偽數組？如何將偽數組轉化為標準數組？
偽數組（類數組）：擁有length屬性但不具有數組所具有的方法。典型的是函數的arguments參數，還有像調用getElementsByTagName,document.childNodes之類的,它們都返回NodeList對象都屬於偽數組。可以使用Array.prototype.slice.call(fakeArray)將數組轉化為真正的Array對象。
function log(){
//為了使用unshift數組方法，需將arguments轉化為真正的數組
var args = Array.prototype.slice.call(arguments);
args.unshift(‘(app)‘);
console.log.apply(console, args);
};
15、Javascript中callee和caller的作用？
參考：https://www.cnblogs.com/niulina/p/5701404.html
callee是arguments對象的屬性，指向擁有這個arguments對象的函數。（遞歸調用）
caller是函數對象的屬性，這個屬性保存著調用當前函數的函數的引用。
16、請描述一下cookies，sessionStorage和localStorage的區別
參考：https://segmentfault.com/a/1190000012057010
webstorage，包括localStorage和sessionStorage，是本地存儲，存儲在客戶端瀏覽器中。
localStorage生命周期是永久，除非用戶主動的在瀏覽器上清除localStorage信息，否則這些信息將永遠存在。存放數據大小為一般為5MB,而且它僅在客戶端（即瀏覽器）中保存，不參與和服務器的通信。
sessionStorage僅在當前會話下有效，關閉頁面或瀏覽器後被清除。存放數據大小為一般為5MB,而且它僅在客戶端（即瀏覽器）中保存，不參與和服務器的通信。
localStorage和sessionStorage使用相同的API：
localStorage.setItem("key","value");//以“key”為名稱存儲一個值“value”
localStorage.getItem("key");//獲取名稱為“key”的值
localStorage.removeItem("key");//刪除名稱為“key”的信息。
localStorage.clear();?//清空localStorage中所有信息
cookie的生命期在設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉。 存放數據大小為4K左右 。有個數限制（各瀏覽器不同），一般不能超過20個。與服務器端通信：每次都會攜帶在HTTP頭中，如果使用cookie保存過多數據會帶來性能問題。但Cookie需要程序員自己封裝，源生的Cookie接口不友好。
localStorage、sessionStorage、Cookie共同點：都是保存在瀏覽器端，且同源的。
Cookie的作用是與服務器進行交互，作為HTTP規範的一部分而存在 ，而Web Storage僅僅是為了在本地“存儲”數據而生。
17、統計字符串中字母個數或統計最多字母數。
var str = "aaaabbbccccddfgh";
var obj = {};
for (var i = 0; i < str.length; i++) {
if (obj[str[i]] == undefined) {
obj[str[i]] = 1;
} else {
obj[str[i]]++;
}
}
for (var key in obj) {
console.log(key + " = " + obj[key]);
}
var arr = Object.values(obj);
var max = Math.max.apply(null, arr);
var letterMaxNum = Object.keys(obj)[arr.indexOf(max)];
console.log("出現次數最多的字母：" + letterMaxNum);
18、一次完整的HTTP事務是怎樣的一個過程？
基本流程：
a. 域名解析
b. 發起TCP的3次握手
c. 建立TCP連接後發起http請求
d. 服務器端響應http請求，瀏覽器得到html代碼
e. 瀏覽器解析html代碼，並請求html代碼中的資源
f. 瀏覽器對頁面進行渲染呈現給用戶
19、HTTP的狀態碼有哪些？
HTTP狀態碼共分為5種類型：
1** 信息，服務器收到請求，需要請求者繼續執行操作
2** 成功，操作被成功接收並處理
3** 重定向，需要進一步的操作以完成請求
4** 客戶端錯誤，請求包含語法錯誤或無法完成請求
5** 服務器錯誤，服務器在處理請求的過程中發生了錯誤
常用的狀態碼：
200 請求成功。
301 永久移動。請求的資源已被永久的移動到新URI，返回信息會包括新的URI，瀏覽器會自動定向到新URI。今後任何新的請求都應使用新的URI代替
302 臨時移動。與301類似。但資源只是臨時被移動。客戶端應繼續使用原有URI
304 未修改。所請求的資源未修改，服務器返回此狀態碼時，不會返回任何資源。客戶端通常會緩存訪問過的資源，通過提供一個頭信息指出客戶端希望只返回在指定日期之後修改的資源
400 客戶端請求的語法錯誤，服務器無法理解
401 請求要求用戶的身份認證
403 服務器理解請求客戶端的請求，但是拒絕執行此請求
404 服務器無法根據客戶端的請求找到資源（網頁）。通過此代碼，網站設計人員可設置"您所請求的資源無法找到"的個性頁面
500 服務器內部錯誤，無法完成請求
20、HTTPS是如何實現加密？
HTTPS 並非是應用層的一種新協議。只是 HTTP 通信接口部分用 SSL （安全套接字層）和TLS （安全傳輸層協議）代替而已。即添加了加密及認證機制的 HTTP 稱為 HTTPS （ HTTP Secure ）。
HTTP + 加密 + 認證 + 完整性保護 = HTTPS
公開密鑰加密使用一對非對稱的密鑰。一把叫做私鑰，另一把叫做公鑰。私鑰不能讓其他任何人知道，而公鑰則可以隨意發布，任何人都可以獲得。使用公鑰加密方式，發送密文的一方使用對方的公鑰進行加密處理，對方收到被加密的信息後，再使用自己的私鑰進行解密。利用這種方式，不需要發送用來解密的私鑰，也不必擔心密鑰被攻擊者竊聽而盜走。
21、手寫數組快速排序
參考：http://www.ruanyifeng.com/blog/2011/04/quicksort_in_javascript.html
"快速排序"的思想很簡單，整個排序過程只需要三步：
（1）在數據集之中，選擇一個元素作為"基準"（pivot）。
（2）所有小於"基準"的元素，都移到"基準"的左邊；所有大於"基準"的元素，都移到"基準"的右邊。
（3）對"基準"左邊和右邊的兩個子集，不斷重復第一步和第二步，直到所有子集只剩下一個元素為止。
var quickSort = function (arr) {
if (arr.length <= 1) {
return arr;
}
var pivotIndex = Math.floor(arr.length / 2);
var pivot = arr.splice(pivotIndex, 1)[0];
var left = [];
var right = [];
arr.forEach(function(item, index) {
if (item < pivot) {
left.push(item);
} else {
right.push(item);
}
})
return quickSort(left).concat(pivot, quickSort(right));
}
var arr = [11, 1, 24, 100, -1, 45, 0];
quickSort(arr);
22、JavaScript實現二分法查找
二分法查找，也稱折半查找，是一種在有序數組中查找特定元素的搜索算法。查找過程可以分為以下步驟：
（1）首先，從有序數組的中間的元素開始搜索，如果該元素正好是目標元素（即要查找的元素），則搜索過程結束，否則進行下一步。
（2）如果目標元素大於或者小於中間元素，則在數組大於或小於中間元素的那一半區域查找，然後重復第一步的操作。
（3）如果某一步數組為空，則表示找不到目標元素。
// 非遞歸算法
function binary_search(arr, key) {
var low = 0;
var high = arr.length - 1;
while(low <= high) {
var mid = Math.floor((low + high) / 2);
if (key == arr[mid]) {
return mid;
} else if (key < arr[mid]) {
high = mid - 1;
} else if (key > arr[mid]) {
low = mid + 1;
} else {
return -1;
}
}
return -1;
}
var arr = [1, 22, 25, 30, 45, 100];
binary_search(arr, 10);
// 遞歸算法
function binary_search(arr, key, low, high) {
if (low > high) {
return -1;
}
var mid = Math.floor((low + high) / 2);
if (key == arr[mid]) {
return mid;
} else if (key < arr[mid]) {
high = mid - 1;
return binary_search(arr, key, low, high);
} else if (key > arr[mid]) {
low = mid + 1;
return binary_search(arr, key, low, high);
} else {
return -1;
}
}
var arr = [1, 22, 25, 30, 45, 100];
binary_search(arr, 100, 0, arr.length - 1);
作者：GeniusLyzh
出處：http://www.cnblogs.com/GeniusLyzh/
本文鏈接：https://www.cnblogs.com/GeniusLyzh/p/5272902.html
本文版權歸作者和博客園共有，歡迎轉載，須保留此段聲明，並給出原文鏈接，謝謝！
如果閱讀了本文章，覺得有幫助，歡迎點擊右下角推薦
web前端常見面試題