前端常見面試題

時間 2019-11-14

原文原文鏈接

一、你作的頁面在哪些流覽器測試過？這些瀏覽器的內核分別是什麼?
IE: trident內核
Firefox：gecko內核
Safari:webkit內核
Opera:之前是presto內核，Opera現已改用Google Chrome的Blink內核
Chrome:Blink(基於webkit，Google與Opera Software共同開發)

二、描述一下漸進加強和優雅降級之間的不一樣嗎?css

漸進加強 progressive enhancement：
針對低版本瀏覽器進行構建頁面，保證最基本的功能，
而後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
優雅降級 graceful degradation：
一開始就構建完整的功能，而後再針對低版本瀏覽器進行兼容。
區別：
a. 優雅降級是從複雜的現狀開始，並試圖減小用戶體驗的供給
b. 漸進加強則是從一個很是基礎的，可以起做用的版本開始，並不斷擴充，以適應將來環境的須要
c. 降級（功能衰減）意味着往回看；而漸進加強則意味着朝前看，同時保證其根基處於安全地帶

三、超連接訪問事後hover樣式就不出現的問題是什麼？如何解決？
被點擊訪問過的超連接樣式不在具備hover和active了,解決方法是改變CSS屬性的排列順序:
L-V-H-A（link,visited,hover,active）

四、行內元素和塊級元素的具體區別是什麼？行內元素的padding和margin可設置嗎？
塊級元素(block)特性：
老是獨佔一行，表現爲另起一行開始，並且其後的元素也必須另起一行顯示; 寬度(width)、高度(height)、內邊距(padding)和外邊距(margin)均可控制;

內聯元素(inline)特性：
和相鄰的內聯元素在同一行; 寬度(width)、高度(height)、內邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變（也就是padding和margin的left和right是能夠設置的），就是裏面文字或圖片的大小。

五、瀏覽器還有默認的天生inline-block元素（擁有內在尺寸，可設置高寬，但不會自動換行），有哪些？
答案：<input> 、<img> 、<button> 、<texterea> 、<label>。

六、什麼是外邊距重疊？重疊的結果是什麼？
外邊距重疊就是margin-collapse。
在CSS當中，相鄰的兩個盒子（多是兄弟關係也多是祖先關係）的外邊距能夠
結合成一個單獨的外邊距。這種合併外邊距的方式被稱爲摺疊，而且於是所結合成
的外邊距稱爲摺疊外邊距。

摺疊結果遵循下列計算規則：
兩個相鄰的外邊距都是正數時，摺疊結果是它們二者之間較大的值。兩個
相鄰的外邊距都是負數時，摺疊結果是二者絕對值的較大值。兩個外邊距一
正一負時，摺疊結果是二者的相加的和。

七、css中可讓文字在垂直和水平方向上重疊的兩個屬性是什麼？
垂直方向：line-height 水平方向：letter-spacing

八、關於letter-spacing的妙用知道有哪些麼？
能夠用於消除inline-block元素間的換行符空格間隙問題。

word-spacing 屬性增長或減小單詞間的空白（即字間隔）。
letter-spacing 屬性增長或減小字符間的空白（字符間距）。

九、用js實現隨機選取10–100之間的10個數字，存入一個數組，並排序。html

方法一：
var iArray = [];
function getRandom(istart, iend){
var iChoice = iend - istart +1; //肯定取值區間
return Math.floor(Math.random() * iChoice + istart; //隨機取值
}
for(var i=0; i<10; i++){
iArray.push(getRandom(10,100)); //隨機取十個值放入數組
}
iArray.sort(function(a,b){return a>b;});

方法二：
var arr=[];
for(i=0;i<10;i++){
var r=Math.floor(Math.random()*91+10);
arr.push(r);
}
alert(arr.sort());//升序排列
alert(arr.sort(function(a,b){return a>b;}));//升序排列
alert(arr.sort(function(a,b){return a<b;})));//降序排列
前端

十、事件的三個階段git

分別是捕獲，目標，冒泡階段，低版本IE不支持捕獲階段

十一、事件委託：通俗的講，事件就是onclick，onmouseover，onmouseout，等就是事件，
利用冒泡的原理，把事件加到父級上，觸發執行效果
冒泡型事件：事件按照從最特定的事件目標到最不特定的事件目標(document對象)的順序觸發
捕獲型事件(event capturing)：事件從最不精確的對象(document 對象)開始觸發，而後到最精確

十二、組織冒泡事件IEwindow.event.cancelBubble = truegithub

在w3c模型中你必須調用事件的stopPropagation()方法web

1三、事件綁定 IE的attachEvent函數替代。
非IE瀏覽器中使用W3C的addEventListener
解除綁定事件:detachEvent()
removeEventListener()

1四、事件代理/委託優勢
能夠大量節省內存佔用，減小事件註冊，好比在table上代理全部td的click事件就很是棒
能夠實現當新增子對象時無需再次對其綁定事件，對於動態內容部分尤其合適
(事件代理的應用經常使用應該僅限於上述需求下，若是把全部事件都用代理就可能會出現事
件誤判，即本不該用觸發事件的被綁上了事件，
事實上我見過有人把頁面裏的全部事件都綁定到document用委託的，
這是極其不明智的作法。)
(以後對方可能要求你手寫原生js【實現事件代理】，並要求兼容瀏覽器，其實就是考覈
對事件對象e的瞭解程度，以及在IE下對應的屬性名。其實此時若是你說就是用
target，currentTarget，
以及IE下的srcElement和this，基本就能夠略過了。)

1五、當一個DOM節點被點擊時候，咱們但願可以執行一個函數，應該怎麼作？
直接在DOM裏綁定事件：<div onclick=」test()」></div>
在JS裏經過onclick綁定：xxx.onclick = test
經過事件添加進行綁定：addEventListener(xxx, ‘click’, test)
　　那麼問題來了，Javascript的事件流模型都有什麼？

「事件冒泡」：事件開始由最具體的元素接受，而後逐級向上傳播
「事件捕捉」：事件由最不具體的節點先接收，而後逐級向下，一直到最具體的
「DOM事件流」：三個階段：事件捕捉，目標階段，事件冒泡

1六、中止事件冒泡
//若是提供了事件對象，則這是一個非IE瀏覽器
if ( e && e.stopPropagation )
//所以它支持W3C的stopPropagation()方法
e.stopPropagation();
else
//不然，咱們須要使用IE的方式來取消事件冒泡
window.event.cancelBubble = true;
return false;

1七、阻止瀏覽器的默認行爲
JavaScript代碼：
//若是提供了事件對象，則這是一個非IE瀏覽器
if ( e && e.preventDefault )
//阻止默認瀏覽器動做(W3C)
e.preventDefault();
else
//IE中阻止函數器默認動做的方式
window.event.returnValue = false;
return false;

1八、跨域
(這裏說的js跨域是指經過js在不一樣的域之間進行數據傳輸或通訊，
好比用ajax向一個不一樣的域請求數據，或者經過js獲取頁面中
不一樣域的框架中(iframe)的數據。只要協議、域名、端口有任何一個不一樣，
都被看成是不一樣的域。)
首先什麼是跨域，簡單地理解就是由於JavaScript同源策略的限制
JSONP : JSON with Padding
用script標籤加載資源是沒有跨域問題的
在資源加載進來以前定義好一個函數，這個函數接收一個參數（數據），函數裏面利用這個參數作一些事情
而後須要的時候經過script標籤加載對應遠程文件資源，當遠程的文件資源被加載進來的時候，就會去執行咱們前面定義好的函數，而且把數據看成這個函數的參數傳入進(動態建立script標籤,執行回調函數)
因此能夠把須要跨域的請求改爲用script腳本加載便可，服務器返回執行字符串，
可是這個字符串是在window全局做用域下執行的，你須要把他返回到你的代碼的做用域內，
這裏就須要臨時建立一個全局的回調函數，並把到傳到後臺，最後再整合實際要請求的數組，
返回給前端，讓瀏覽器直接調用，用回調的形式回到你的原代碼流程中。

1九、css垂直居中方法(3中方法)ajax

方法一：小程序

position:absolute;微信小程序

top:0;
bottom:0;
left:0;
right:0;
margin:auto;
height:240px;
width:70%;跨域

方法二：推薦使用

position: absolute;

top: 50%;
left: 50%;
height: 40px;
width: 40px;
background: pink;
margin-top: -20px;

margin-left: -20px;

方法三：給parent加

display: -moz-box;
display: -webkit-box;
-webkit-box-align: center;
-webkit-box-pack: center;
-moz-box-align: center;
-moz-box-pack: center;

20、清除浮動的幾種方式，各自的優缺點

方法一：

加一個空標籤<div style="clear:both"></div>

(理論上能清楚任何標籤，增長無心義的標籤)

方法二：

給父級加一個overflow:hidden(auto,zoom:1)

定義CSS屬性：overflow:auto，便可！也能夠用overflow:hidden；」zoom:1″用於兼容IE6，也能夠用width:100%。

(空標籤元素清除浮動而不得不增長無心代碼的弊端,,使用zoom:1用於兼容IE)

方法三：推薦使用(用afert僞元素清除浮動用於非IE瀏覽器)
.clearfix:after{
content: "020";
display: block;
height: 0;
clear: both;
visibility: hidden;

}

方法四：pc端推薦使用（非PC端不方便）

直接給父元素設置寬高

2一、什麼是盒子模型？
在網頁中，一個元素佔有空間的大小由幾個部分構成，其中包括元素的內容（content）
，元素的內邊距（padding），元素的邊框（border），元素的外邊距（margin）四個部分。
這四個部分佔有的空間中，有的部分能夠顯示相應的內容，而有的部分只用來分隔相鄰的
區域或區域。4個部分一塊兒構成了css中元素的盒模型。

2二、行內元素有哪些？塊級元素有哪些？空(void)元素有那些？
行內元素：a、b、span、img、input、strong、select、label、em、button、textarea
塊級元素：div、ul、li、dl、dt、dd、p、h1-h六、blockquote
空元素：即系沒有內容的HTML元素，例如：br、meta、hr、link、input、img

2三、簡述一下src與href的區別
href 是指向網絡資源所在位置，創建和當前元素（錨點）或當前文檔（連接）之間的連接，
用於超連接。
src是指向外部資源的位置，指向的內容將會嵌入到文檔中當前標籤所在位置
在請求src資源時會將其指向的資源下載並應用到文檔內，例如js腳本，
img圖片和frame等元素。當瀏覽器解析到該元素時，會暫停其餘資源的下載和處理，
直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，相似於將所指向
資源嵌入當前標籤內。這也是爲何將js腳本放在底部而不是頭部

2四、什麼是CSS Hack?
通常來講是針對不一樣的瀏覽器寫不一樣的CSS,就是 CSS Hack。

IE瀏覽器Hack通常又分爲三種，條件Hack、屬性級Hack、選擇符Hack

_marging \\IE 6
+margin \\IE 7
Marging:0 auto \9 全部Ie
Margin \0 \\IE 8

2五、簡述同步和異步的區別
同步是阻塞模式，異步是非阻塞模式。
同步就是指一個進程在執行某個請求的時候，若該請求須要一段時間才能返回信息，
那麼這個進程將會一直等待下去，直到收到返回信息才繼續執行下去；
異步是指進程不須要一直等下去，而是繼續執行下面的操做，
無論其餘進程的狀態。當有消息返回時系統會通知進程進行處理，
這樣能夠提升執行的效率。

2六、px和em的區別
px和em都是長度單位，區別是，px的值是固定的，指定是多少就是多少，計算比較容易。
em得值不是固定的，而且em會繼承父級元素的字體大小。
瀏覽器的默認字體高都是16px。因此未經調整的瀏覽器都符合: 1em=16px。
那麼12px=0.75em, 10px=0.625em

2七、怎樣添加、移除、移動、複製、建立和查找節點？
1）建立新節點
createDocumentFragment() //建立一個DOM片斷
createElement() //建立一個具體的元素
createTextNode() //建立一個文本節點
2）添加、移除、替換、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替換
insertBefore() //插入
3）查找
getElementsByTagName() //經過標籤名稱
getElementsByName() //經過元素的Name屬性的值
getElementById() //經過元素Id，惟一性

2八、如何消除一個數組裏面重復的元素？

方法一：

console.log(arr.quchong());

2九、在js中，數組是特殊的對象，凡是對象有的性質，數組都有，數組表示有序數據的集合，而對象表示無序數據的集合。
那僞數組是什麼呢，固然它也是對象，僞數組通常具備如下特色：
按索引方式存儲數據；
具備length屬性；
沒有數組的push、shift、pop等方法;
function的arguments對象，還有getElementsByTagName、ele.childNodes等返回的NodeList對象，或者自定義的某些對象，這些均可以是僞數組。
咱們能夠經過如下幾種方式將僞數組轉換爲標準數組：
使用Array.prototype.slice.call();
方法一：
Array.prototype.slice.call({
0:"likeke",
1:12,
2:true,
length:3
});
//["likeke", 12, true]
使用[].slice.call()，瞭解js原型鏈的都知道，實際上這種方法和第一中方法是同樣的，但上面第一種方式相對效率更高。
Js代碼收藏代碼
[].slice.call({
0:"likeke",
1:12,
2:true,
length:3
});
//["likeke", 12, true]
使用ES6中Array.from方法;
方法二：
Array.from({
0:"lk",
1:12,
2:2013,
3:"長安大學",
length:4
});

//["lk", 12, 2013, "長安大學"]

方法三：

僞數組（類數組）：沒法直接調用數組方法或指望length屬性有什麼特殊的行爲，
但仍能夠對真正數組遍歷方法來遍歷它們。典型的是函數的argument參數，
還有像調用getElementsByTagName,document.childNodes之類的,
它們都返回NodeList對象都屬於僞數組。可使用
Array.prototype.slice.call(fakeArray)將數組轉化爲真正的Array對象。
function log(){
var args = Array.prototype.slice.call(arguments);
//爲了使用unshift數組方法，將argument轉化爲真正的數組
args.unshift('(app)');
console.log.apply(console, args);
}

30、請描述一下cookies，sessionStorage和localStorage的區別
sessionStorage用於本地存儲一個會話（session）中的數據，這些數據只有
在同一個會話中的頁面才能訪問而且當會話結束後數據也隨之銷燬。
所以sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。
而localStorage用於持久化的本地存儲，除非主動刪除數據，不然數據是永遠不

會過時的。

web storage和cookie的區別
Web Storage的概念和cookie類似，區別是它是爲了更大容量存儲設計的。Cookie的大小是受限的，而且每次你請求一個新的頁面的時候Cookie都會被髮送過去，這樣無形中浪費了帶寬，
另外cookie還須要指定做用域，不能夠跨域調用。
除此以外，Web Storage擁有setItem,getItem,removeItem,clear等方法，
不像cookie須要前端開發者本身封裝setCookie，getCookie。可是Cookie也
是不能夠或缺的：Cookie的做用是與服務器進行交互，做爲HTTP規範的一部分而存
在，而Web Storage僅僅是爲了在本地「存儲」數據而生

3一、寫一個function，清除字符串先後的空格。（兼容全部瀏覽器）
function trim(str){
if(str & typeof str ==="string"){
return str.replace(/(^s*)|(s*)$/g,""),
}
}
//去左空格;
function ltrim(s){
return s.replace(/(^\s*)/g, "");
}
//去右空格;
function rtrim(s){
return s.replace(/(\s*$)/g, "");
}
//去左右空格;
function trim(s){
return s.replace(/(^\s*)|(\s*$)/g, "");
}

3二、什麼是AJAX
AJAX = 異步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

3三、寫出幾種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)
9.ie 6 不支持!importantz

3四、img標籤上title與alt屬性的區別是什麼?
Alt 當圖片不顯示是用文字表明。
Title 爲該屬性提供信息

3五、描述css reset的做用和用途。
Reset重置瀏覽器的css默認屬性瀏覽器的品種不一樣，樣式不一樣，而後重置，讓他們統一

3六、解釋css sprites，如何使用。
Css精靈把一堆小的圖片整合到一張大的圖片上，減輕服務器對圖片的請求數量

3七、瀏覽器標準模式和怪異模式之間的區別是什麼?
盒子模型渲染模式的不一樣
使用window.top.document.compatMode可顯示爲何模式

3八、你如何對網站的文件和資源進行優化?期待的解決方案包括
文件合併
文件最小化/文件壓縮
使用CDN託管
緩存的使用

3九、什麼是語義化的HTML?
直觀的認識標籤對於搜索引擎的抓取有好處
語義化的HTML就是寫出的HTML代碼，符合內容的結構化（內容語義化），選擇合適的標籤（代碼語義化），可以便於開發者閱讀和寫出更優雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。
　　1.語義化有利於SEO，有利於搜索引擎爬蟲更好的理解咱們的網頁，從而獲取更多的有效信息，提高網頁的權重。
　　2.在沒有CSS的時候可以清晰的看出網頁的結構，加強可讀性。
　　3.便於團隊開發和維護，語義化的HTML可讓開發者更容易的看明白，從而提升團隊的效率和協調能力。
　　4.支持多終端設備的瀏覽器渲染

40、事件綁定和普通事件有什麼區別
事件綁定就是針對dom元素的事件，綁定在dom元素上
普通事件即爲非針對dom元素的事件

4一、IE和DOM事件流的區別
1.執行順序不同、
2.參數不同
3.事件加不加on
4.this指向問題

4二、IE和標準下有哪些兼容性的寫法
var oEvent = ev||window.event;
document.documentElement.clientWidth || document.body.clientWidth
var target = ev.srcElement||ev.target

4三、ajax請求的時候get 和post方式的區別
一個在url後面一個放在虛擬載體裏面
有大小限制
安全問題
應用不一樣一個是論壇等只須要請求的，一個是相似修改密碼的

4四、call和apply的區別
Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)

4五、this 關鍵字的指向
obj.foo() == obj //方法調用模式,this指向obj
foo() == window; //函數調用模式,this指向window
new obj.foo() == obj //構造器調用模式, this指向新創建對象