一直以來都有寫點什么東西的想法，但又整天猶猶豫豫的，一會覺得準備不夠充分，寫的內容沒什么質量，一會又覺得沒什么內容可寫的，以至于一拖再拖。萬事開頭難，難著難著就沒有下面了，以此先開個頭，記錄自己的成長歷程也是不錯的，或許順便還能幫上一些人呢。

分享個剛踏出校門的菜鳥所整理的前端面試題，當初被問到一時答不出來的問題，不會很詳細和深入，對面試還是有點用的，僅供參考。

• 索引

• 1.事件冒泡、事件捕獲
• 2.js的數據類型和判斷方法
• 3.js中的六種假值
• 4.js添加、刪除一個節點
• 5.js獲取日期(#l5)
• 6.正則
• 7.eval的用法
• 8.閉包
• 9.獲取元素最終CSS樣式的方法
• 10.普通函數和構造函數的區別
• 11.瀏覽器的兼容
• 12.數組去重
• 13.sessionStorage 、localStorage 和 cookie 之間的區別
• 14.行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
• 15.頁面導入樣式時，使用link和@import有什么區別？
• 16.對瀏覽器內核的理解
• 17.常見的瀏覽器內核有哪些？
• 18.HTML5新特性
• 19.如何處理HTML5新標簽的瀏覽器兼容問題
• 20.簡述你對語義化的理解
• 21.Form表單中method=post/get兩種數據傳輸的方式的區別
• 22.回調函數和普通函數的區別
• 23.web頁面性能優化
• 24.JSON和JSONP的區別
• 25.call 和 apply 的區別
• 26.transform的屬性
• 27.css3的動畫
• 28.js不同瀏覽器兼容問題
• 29.ios-安卓兼容問題
• 30.es6（es2015）常用語法

1.事件冒泡、事件捕獲

1）冒泡型事件：事件從事件目標開始，往上冒泡直到頁面的最上一級標簽（document）。

2）捕獲型事件：事件從最上一級標簽（document）開始往下查找，直到捕獲到事件目標。

3）DOM事件流：同時支持兩種事件模型：捕獲型事件和冒泡型事件，但是，捕獲型事件先發生。兩種事件流會觸及DOM中的所有對象，從document對象開始，也在document對象結束。

W3C標準瀏覽器用addEventListener(event,fn,useCapture)方法添加事件；基中第3個參數useCapture是一個Boolean值，用來設置事件是在事件捕獲時執行，還是事件冒泡(false)時執行。

不兼容W3C的瀏覽器(IE)用attachEvent()方法，此方法沒有相關設置。

E的事件模型默認是在事件冒泡時執行的，也就是在useCapture等于false的時候執行，所以把在處理事件時把useCapture設置為false是比較安全，也實現兼容瀏覽器的效果。

事件的傳播是可以阻止的：

在W3c中，使用stopPropagation（）方法

在IE下設置cancelBubble = true；

2.js的數據類型和判斷方法

1）js中有5種數據類型：

Undefined 、 Null 、 Boolean 、 Number 和 String；

還有一種復雜的數據類型Object。

2）數據類型判斷

// typeof，判斷數組時是Object；// instanceof，判斷已知對象類型的方法 alert(c instanceof Array) // ---------------> trueObject.prototype.toString.call() alert(Object.prototype.toString.call(c) === ‘[object Array]’) //-------> true;

3.js中的六種假值

false 、 null 、 undefined 、 0 、 '' (空字符串) 、 NaN；

除了這6個外，其它均為“真” ，包括對象、數組、正則、函數等。注意 '0'、'null'、'false'、{}、[]也都是真值。

4.js添加、刪除一個節點

<script> window.onload=function(){//----------------------添加節點var boxObj = document.getElementById("box");var newNode = document.createElement("h1");var txtNode = document.createTextNode("h1內容");newNode.appendChild(txtNode);boxObj.appendChild(newNode);//----------------------刪除節點var oldNode = document.getElementsByTagName("p")[0];boxObj.removeChild(oldNode); } </script>

5.js獲取日期

// 月份和星期需要加1。var t=new Date(); t.getFullYear()//年份 t.getMonth()//月份 t.getDate()//一個月的當天 t.getDay()//星期 t.getHours()//小時 t.getMinutes()//分鐘 t.getSecounds()//秒 t.getTime()//返回1970年1月1日至今的毫秒數 t.parse("2017/1/1/ 00:00:00")//返回1970年1月1日到指定日期的毫秒數 t.toLocaleString()//完整日期時間

6.正則

// /^[ab]{2,6}$/i // 方括號是只能在ab中選一個； // 大括號是只能出現2-6次； // i是忽略大小寫。// \d任意數字； // \D非數字； // \w[A-Z a-z _ 0-9]；

7.eval的用法？

1）eval() 函數可計算某個字符串，并執行其中的的 JavaScript 代碼。
2）該方法只接受原始字符串作為參數，如果 string 參數不是原始字符串，那么該方法將不作任何改變地返回。因此請不要為 eval() 函數傳遞 String 對象來作為參數。

var str="alert('"+"ok"+"');"; eval(str);

8.閉包

一、閉包（closure）是Javascript語言的一個難點，也是它的特色，很多高級應用都要依靠閉包實現。
閉包有三個特性：
1.函數嵌套函數
2.函數內部可以引用外部父函數的參數和變量
3.參數和變量不會被垃圾回收機制回收

二、閉包是指有權訪問另一個函數作用域中的變量的函數，創建閉包的最常見的方式就是在A函數內創建B函數，通過B函數訪問A函數的局部變量

三、使用閉包有一個優點，也是它的缺點，就是可以把局部變量駐留在內存中，可以避免使用全局變量。全局變量在每個模塊都可調用，這勢必將是災難性的。
所以推薦使用私有的，封裝的局部變量。

四、一般函數執行完畢后，局部活動對象就被銷毀，，內存中僅僅保存全局作用域。但閉包的情況不同！

五、那么使用閉包有什么好處呢？使用閉包的好處是：
1.希望一個變量長期駐扎在內存中
2.避免全局變量的污染
3.私有成員的存在

9.獲取元素最終CSS樣式的方法：

1、obj.style.attr :獲取內部樣式。 （attr代表CSS樣式屬性）

2、obj.currentStyle[attr] : 兼容IE，獲取元素最終樣式（內部、外部樣式最后的效果），只讀

3、window.getComputedStyle(obj , null)[attr]; 兼容FF，chrome,safiri，只讀

// 測試兼容性alert(cont.currentStyle); //在谷歌中輸出“undefined”，在IE中輸出“[object CSSCurrentStyleDeclaration]”;// 示例var cont=document.getElementById("cont");// alert(cont.currentStyle);if (cont.currentStyle){alert("height:"+cont.currentStyle["height"]);}else{alert("height:"+getComputedStyle(cont,null)["height"]}

10.普通函數和構造函數的區別 ：

普通函數與構造函數相比有四個明顯特點：
1.不需要用new關鍵字調用
2.可以用return語句返回值
3.函數內部不建議使用this關鍵字
4.函數命名以駝峰方式，首字母小寫

11.瀏覽器的兼容

1）margin加倍的問題
設置為float的div在ie下設置的margin會加倍。這是一個ie6都存在的bug。解決方案是在這個div里面加上display:inline;

2）文本在Div的垂直居中問題
vertical-align:middle; 將行距增加到和整個DIV一樣高：line-height:200px; 然后插入文字，就垂直居中了。缺點是要控制內容不要換行。

12.數組去重

//第一種 刪除后面重復元素function removeRepeat1(a){for(var i=0;i<a.length;i++){for(var j=i+1;j<a.length;j++){if(a[i]===a[j]){a.splice(j,1);j--; //否則若是多個一樣的數字連在一起則只能去掉一個}}} return a.sort(function(a,b){return a-b}); } console.log(removeRepeat1(arr));//第二種 相互比較元素，碰到相同的則跳出循環function removeRepeat(a) {var b = [], n = a.length;for (var i = 0; i < n; i++){for (var j = i+1; j < n; j++){if (arr[i] === arr[j]){j=false;break;}}if(j){b.push(a[i]);}}return b.sort(function(a,b){return a-b}); }console.log(removeRepeat(arr));

13.sessionStorage 、localStorage 和 cookie 之間的區別

共同點：

都是保存在瀏覽器端，且同源的。

區別：

1）cookie數據始終在同源的http請求中攜帶（即使不需要），即cookie在瀏覽器和服務器間來回傳遞。而sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。

2）存儲大小限制也不同，cookie數據不能超過4k，同時因為每次http請求都會攜帶cookie，所以cookie只適合保存很小的數據，如會話標識。sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。

3）數據有效期不同，sessionStorage：僅在當前瀏覽器窗口關閉前有效，自然也就不可能持久保持；localStorage：始終有效，窗口或瀏覽器關閉也一直保存，因此用作持久數據；cookie只在設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉。

4）作用域不同，sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個頁面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。

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

（1）行內元素有：a b span img input select strong（強調的語氣）

（2）塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

（3）常見的空元素(沒有內容的HTML內容被稱為空元素)：

<br> <hr> <img> <input> <link> <meta>

15.頁面導入樣式時，使用link和@import有什么區別？

（1）link屬于XHTML標簽，除了加載CSS外，還能用于定義RSS, 定義rel連接屬性等作用；而@import是CSS提供的，只能用于加載CSS;

（2）頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;

（3）import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標簽，無兼容問題;

16.對瀏覽器內核的理解

主要分成兩部分：
渲染引擎(layout engineer或Rendering Engine)和JS引擎。

渲染引擎：

負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，然后會輸出至顯示器或打印機。瀏覽器的內核的不同對于網頁的語法解釋會有不同，所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網絡內容的應用程序都需要內核。

JS引擎則：

解析和執行javascript來實現網頁的動態效果。

最開始渲染引擎和JS引擎并沒有區分的很明確，后來JS引擎越來越獨立，內核就傾向于只指渲染引擎。

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

Trident內核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]

Gecko內核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等

Presto內核：Opera7及以上。 [Opera內核原為：Presto，現為：Blink;]

Webkit內核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]

18.HTML5新特性

主要是關于圖像，位置，存儲，多任務等功能的增加。

1 繪畫 canvas;

2 用于媒介回放的 video 和 audio 元素;

3 本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉后數據不丟失;

4 sessionStorage 的數據在瀏覽器關閉后自動刪除;

5 語意化更好的內容元素，比如 article、footer、header、nav、section;

6 表單控件，calendar、date、time、email、url、search;

7 新的技術webworker, websockt, Geolocation;

19.如何處理HTML5新標簽的瀏覽器兼容問題

IE8/IE7/IE6支持通過document.createElement方法產生的標簽，
可以利用這一特性讓這些瀏覽器支持HTML5新標簽，
瀏覽器支持新標簽后，還需要添加標簽默認的樣式。

當然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

<!--[if lt IE 9]> <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> <![endif]-->

20.簡述你對語義化的理解

讓頁面的內容結構化，結構更清晰，便于瀏覽器、搜索引擎解析；

便于看代碼的人將網站分塊，能更好的讀代碼和維護。

21.Form表單中method=post/get兩種數據傳輸的方式的區別

一、Form提供了兩種數據傳輸的方式——get和post， get是默認方法;

二、傳輸方式不同：

（1）Get 方法通過 URL 請求來傳遞用戶的數據，將表單內各字段名稱與其內容，以成對的字符串連接，置于 action 屬性所指程序的 url 后，如http://www.mdm.com/test.asp?name=asd&password=sad，數據都會直接顯示在 url 上，就像用戶點擊一個鏈接一樣；

（2）Post是將表單中的數據放在form的數據體中，按照變量和值相對應的方式，傳遞到action所指向URL。?

三、安全性不同：

（1）Get是不安全的，因為在傳輸過程，數據被放在請求的URL中，而如今現有的很多服務器、代理服務器或者用戶代理都會將請求URL記錄到日志文件中，然后放在某個地方，這樣就可能會有一些隱私的信息被第三方看到。另外，用戶也可以在瀏覽器上直接看到提交的數據，一些系統內部消息將會一同顯示在用戶面前。

（2）Post的所有操作對用戶來說都是不可見的。?

四、傳輸數據長度不同：

（1）Get傳輸的數據量小，這主要是因為受URL長度限制；

（2）而Post可以傳輸大量的數據，所以在上傳文件只能使用Post

五、支持的字符集不同：
（1）Get限制Form表單的數據集的值必須為ASCII字符
（2）而Post支持整個ISO10646字符集。

22.回調函數和普通函數的區別

普通函數，被其他函數調用時，是在調用者內部直接寫函數名調
回調函數，通常是作為參數傳遞給調用者，調用者并不知道自己調用的到底是什么
另外有一點，回調函數大多用于多線程的情況

function show() {alert("回調"); } function main(num,callback){alert(num);callback(); } main(8,show);

23.web頁面性能優化

一、減少HTTP請求：

這個是由于瀏覽器對同一個host有并行下載的限制,http請求越多,總體下載速度越慢

（1）使用CSS Sprites

（2）合并JS和CSS文件
二、CSS、JS方面：

1） 一般情況下建議css和js采用外聯式。

2）將CSS放在頂部:?能加快頁面內容顯示,并且能避免頁面產生白屏

3）將JS放在底部 ： JS會阻塞對其后面內容的呈現

4） 精簡JS和CSS文件 ：減少重復性代碼，代碼重復利用，在這里顯得特別重要。要把你的css規劃好，盡量的采用縮寫，這樣可以減少css文件的大小，那么對css做相應的規劃也可以減少css的個數，減少http請求數，js同理。

5）移除重復的腳本

三、背景圖片數量及大小的優化

1）內容圖片要優化，減少文件大小。

2）背景圖片：

（1）圖片精靈 css sprite ，減少圖片數量，減少HTTP請求。

（2）png8的格式會相對比gif小

四、可以模仿淘寶，使用CDN,圖片,jS,css互相之間都使用了不同的域名.單是圖片服務器,下面又使用了很多不同的服務器,比如img01.taobaocdn.com等等

24.JSON和JSONP的區別

1）JSON：是一種輕量級的數據交換格式，可以在瀏覽器和服務器之間交換信息。

2）JSONP(JSON With Padding)，就是打包在函數調用中的的JSON（或者包裹的JSON），用來實現跨域請求。

3）JSON是一種數據格式，JSONP是一種數據調用方式。

25.call 和 apply 的區別

1）在js中call和apply它們的作用都是將函數綁定到另外一個對象上去運行，兩者僅在定義參數方式有所區別

2) apply和call的用法只有一個地方不一樣，除此之外，其他地方基本一模一樣

a.call(b,arg1,arg2…)apply(b,[arg1,arg2]) //apply只有2個參數，它將call的參數（arg1,arg2…）放在一個數組中作為apply的第二參數

26.transform的屬性

rotate（0deg）順時針旋轉0度
skew（x，y）變形，不旋轉 skewX（deg） skewY（deg）
scale（x，y）縮放
translate（x，y）位移

transf-origin 改變原點：

top（50%，0） right（100%，50%）
bottom（50%，100%） left（0，,50%）

27.css3的動畫

transition-property：all所有要運動的屬性名
-duration：2s 過渡時間
-timing-function：ease/linear指定過度函數
-delay：延遲時間

關鍵幀
@Keyframes a{
0%{}
100%{}}

animation：a 2s；（a為上面的函數名）
animation-iteration-count：infinite（無限循環）循環次數

28.js不同瀏覽器兼容問題

七、input.type屬性問題

問題說明：IE下 input.type 屬性為只讀；但是Firefox下 input.type 屬性為讀寫。
解決辦法：不修改 input.type 屬性。如果必須要修改，可以先隱藏原來的input，然后在同樣的位置再插入一個新的input元素。

八、window.event問題

問題說明：window.event 只能在IE下運行，而不能在Firefox下運行，這是因為Firefox的event只能在事件發生的現場使用。
解決方法：在事件發生的函數上加上event參數，在函數體內(假設形參為evt)使用 var myEvent = evt?evt:(window.event?window.event:null)
示例：

<input type="button" onclick="doSomething(event)"/> <script language="javascript"> function doSomething(evt) { var myEvent = evt?evt:(window.event?window.event:null) ... }

九、event.x與event.y問題

問題說明：IE下，even對象有x、y屬性，但是沒有pageX、pageY屬性；Firefox下，even對象有pageX、pageY屬性，但是沒有x、y屬性。
解決方法：var myX = event.x ? event.x : event.pageX; var myY = event.y ? event.y:event.pageY;
如果考慮第8條問題，就改用myEvent代替event即可。

十七、innerText的問題.

問題說明：innerText在IE中能正常工作，但是innerText在FireFox中卻不行。
解決方法：在非IE瀏覽器中使用textContent代替innerText。

if(navigator.appName.indexOf("Explorer") >-1){ document.getElementById('element').innerText = "my text"; } else{ document.getElementById('element').textContent = ";my text"; } // [注] innerHTML 同時被ie、firefox等瀏覽器支持，其他的，如outerHTML等只被ie支持，最好不用。

29.ios-安卓兼容問題

1）虛擬鍵盤引起的兼容問題。
ios虛擬鍵盤懸浮到瀏覽器上，蓋住輸入框；安卓會把瀏覽器窗口頂起，瀏覽器高度變小

2）上下拉動滾動條時卡頓、慢
body {-webkit-overflow-scrolling:
touch; overflow-scrolling: touch;}

Android3+和iOS5+支持CSS3的新屬性為overflow-scrolling

3）iphone及ipad下輸入框默認內陰影
Element{
-webkit-appearance:none;
}

4）active兼容處理 即 偽類 :active 失效

// 方法一：body添加ontouchstart <body ontouchstart="">// 方法二：js給 document 綁定 touchstart 或 touchend 事件 <style> a {color:#000; } a:active {color:#fff; } </style> <a herf=foo >bar</a> <script>document.addEventListener('touchstart',function(){},false); </script>

30.es6（es2015）常用語法

1）變量聲明const和let
let表示變量、const表示常量。let和const都是塊級作用域。（ {}大括號內的代碼塊即為let 和 const的作用域。）

2）函數默認參數

function action(num = 200) {console.log(num) } action(0) // 0 action() //200 action(300) //300

3）箭頭函數
不需要 function 關鍵字來創建函數
省略 return 關鍵字
繼承當前上下文的 this 關鍵字
ps：當你的函數有且僅有一個參數的時候，是可以省略掉括號的。當你函數返回有且僅有一個表達式的時候可以省略{} 和 return

4）對象簡寫
ES6通過省略冒號與 function 關鍵字，將這個語法變得更簡潔
`const people = { name: 'lux', getName () { console.log(this.name) } }

5）解構

// ES5我們提取對象中的信息形式如下：const people = {name: 'lux',age: 20 } const name = people.name const age = people.age console.log(name + ' --- ' + age)// 在ES6，解構能讓我們從對象或者數組里取出數據存為變量：//對象const people = {name: 'lux',age: 20 } const { name, age } = people console.log(`${name} --- ${age}`) //數組 const color = ['red', 'blue'] const [first, second] = color console.log(first) //'red' console.log(second) //'blue'

6）展開運算符（...）
組裝對象或者數組

//數組 const color = ['red', 'yellow'] const colorful = [...color, 'green', 'pink'] console.log(colorful) //[red, yellow, green, pink] //對象 const alp = { fist: 'a', second: 'b'}const alphabets = { ...alp, third: 'c' }console.log(alphabets) //{ "fist": "a", "second": "b", "third": "c" }

7） Promise
說白了就是用同步的方式去寫異步代碼。

fetch('/api/todos') .then(res => res.json()) .then(data => ({ data })) .catch(err => ({ err }));

面試題：

setTimeout(function() {console.log(1)}, 0);new Promise(function executor(resolve) {console.log(2);for( var i=0 ; i<10000 ; i++ ) {i == 9999 && resolve();}console.log(3);}).then(function() {console.log(4);});console.log(5); // 順序：2 3 5 4 undefined（resolve()） 1

轉載于:https://www.cnblogs.com/xiangzhaode/p/10646176.html

總結

以上是生活随笔為你收集整理的菜鸡前端面试题整理日记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。