【重點提前說】這篇博客里的問題涉及到了JS中常見的的基礎知識點，也是面試中常見的一些問題，建議初入職場的園友Mark收藏，本文會持續更新~
1、 引入JS的三種方式
1、在HTML標簽中直接使用，直接內嵌JS（但是不提倡使用）；
>>>不符合W3C關於內容和行為分離的要求；
2、在HTML頁面中使用<scrip> </script>標簽包裹JS代碼；
>>>script標簽可以放到頁面的各種位置；
3、引入外部的JS文件使用<script> </script>標簽；
2、 JS中的變量聲明
3、 JS中變量的數據類型
4、 常用的數值函數
parseInt()只能轉字符串，轉其他的類型都是NAN；而Number（）能轉所有的數據類型；
5、 運算符注意事項
6、 判斷水仙花數
7、 If結構，循環結構，支持的判斷結果：
8、 循環控制語句：
9、 斐波那契數列:1,1,2,3,5,8,13,21……
10、 JS中函數的調用方式/事件的綁定方式
11、 window對象的常用方法
12、 DOM操作的相關方法
13、 鍵盤事件&確定鍵盤按鍵
14、 DOM2 兼容寫法：
15、 事件冒泡&事件捕獲&阻止默認事件
16、 數組常用方法：
17、 引用數據類型&基本數據類型：
18、 Number類常用方法：
19、 String類常用方法：
20、 Date類：
21、 楊輝三角：
22、 正則表達式聲明：
23、 正則表達式常用規則：
24、 正則中的test與exec方法：
25、 foreach與each的區別？
forEach是js中的方法（針對數組），而each是jquery中的方法（針對jquery對象，即$( )；
1.forEach方法：如下圖所示
輸出結果：
2.each方法：如下圖所示
輸出結果：
26、document load 和document ready的區別
Document.onload
是在結構和樣式加載完才執行js
window.onload
：不僅僅要在結構和樣式加載完，還要執行完所有的樣式、圖片這些資源文件，全部加載完才會觸發window.onload事件
Document.ready原生種沒有這個方法，jquery中有 $().ready(function)
27、什么是CSS Hack？怎么表示？
CSS hack由於不同廠商的
瀏覽器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一廠商的瀏覽器的不同版本，如IE6和IE7，對CSS的解析認識不完全一樣，因此會導致生成的頁面效果不一樣，得不到我們所需要的頁面效果。 這個時候我們就需要針對不同的瀏覽器去寫不同的CSS，讓它能夠同時兼容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁面效果。
簡單的說，CSS hack的目的就是使你的CSS代碼兼容不同的瀏覽器。當然，我們也可以反過來利用CSS hack為不同版本的瀏覽器定制編寫不同的CSS效果。
方式一 條件注釋法 方法二 類內屬性前綴法 方式三：選擇器前綴法
28、Javascript中callee和caller的作用？
arguments.callee：獲得當前函數的引用
caller是返回一個對函數的引用，該函數調用了當前函數；
callee是返回正在被執行的function函數，也就是所指定的function對象的正文。
29、簡述創建函數的幾種方式
第一種（函數聲明）：
function sum1(num1,num2){ return num1+num2; }
第二種（函數表達式）：
var sum2 = function(num1,num2){ return num1+num2; }
匿名函數：
function(){}:
只能自己執行自己
第三種（函數對象方式）：
var sum3 = new Function("num1","num2","return num1+num2");
30、把 Script 標簽 放在頁面的最底部的body封閉之前 和封閉之后有什么區別？瀏覽器會如何解析它們？
如果說放在body的封閉之前，將會阻塞其他資源的加載
如果放在body封閉之后，不會影響body內元素的加載
31、iframe的優缺點？
優點：
1. 解決加載緩慢的第三方內容如圖標和廣告等的加載問題
2. Security sandbox安全沙盒
3. 並行加載腳本
缺點：
1. iframe會阻塞主頁面的Onload事件
2. 即使內容為空，加載也需要時間
3. 沒有語意
32、請你談談Cookie的弊端？
缺點：
1.`Cookie`數量和長度的限制。
每個domain最多只能有20條cookie，每個cookie長度不能超過4KB，否則會被截掉。
2.安全性問題。
如果cookie被人攔截了，那人就可以取得所有的session信息。即使加密也與事無補，因為攔截者並不需要知道cookie的意義，他只要原樣轉發cookie就可以達到目的了。
3.有些狀態不可能保存在客戶端。
例如，為了防止重復提交表單，我們需要在服務器端保存一個計數器。如果我們把這個計數器保存在客戶端，那么它起不到任何作用。
33、js延遲加載的方式有哪些？
1. defer和async
2. 動態創建DOM方式（創建script，插入到DOM中，加載完畢后callBack）
3. 按需異步載入js
34、documen.write和 innerHTML 的區別？
document.write 只能重繪整個頁面
innerHTML 可以重繪頁面的一部分
35、哪些操作會造成內存泄漏？
內存泄漏指任何對象在您不再擁有或需要它之后仍然存在。
垃圾回收器定期掃描對象，並計算引用了每個對象的其他對象的數量。如果一個對象的引用數量為 0（沒有其他對象引用過該對象），或對該對象的惟一引用是循環的，那么該對象的內存即可回收。
1. setTimeout 的第一個參數使用字符串而非函數的話，會引發內存泄漏。
2. 閉包
3. 控制台日志
4. 循環（在兩個對象彼此引用且彼此保留時，就會產生一個循環）
36、JS是一門什么類型的語言?
JS可以模擬實現繼承和封裝，但是不能模擬實現多態，故js是基於事件的，基於對象的輕量級腳本語言。
37、語言有哪幾種類型？各有什么特點？
1、語言的分類：
①、面向機器：匯編語言。
②、面向過程：C語言
③、面向對象：Java、C++、PHP等。
2、面向過程與面向對象：
①、面向過程：專注於如何去解決一個問題的過程步驟，編程的特點是由一個個的函數去實現每一步的過程步驟，沒有類和對象的概念。
②、面向對象：專注於由哪一個對象來解決這個問題，編程特點是出現了一個個的類，從類中拿到對象
【面向對象的三大特征】 繼承、封裝、多態
【區別】
對於調用者來說，面向過程需要調用者自己去實現各種函數，
而面向對象，只需要告訴調用者對象中具體方法的功能，不需要調用者去了解方法中的實現細節。
38、JavaScript中類和對象的關系：
類是抽象的，對象是具體的
類是對象的抽象化，對象是類的具體化；
★類是一個抽象的概念，只能說類有屬性和方法，但是不能給屬性和方法賦具體的值。
例如:人類有身高，但是不能說出具體數值
★對象是一個具體的個例，是將類中的屬性進行具體賦值而來的個體；
例如：張三是人類中的一個個體，身高180cm。
39、實現繼承的三種方式？
1、使用call bind apply來實現繼承。
2、通過擴展object來實現繼承。
3、使用原型實現繼承。
40、 什么叫封裝？有什么方法和特點？
① 方法的封裝： 將類內部的函數進行私有化處理，不對外提供調用接口，無法在類外部使用的方法，稱為私有方法，即方法的封裝。
② 屬性的封裝： 將類中的屬性進行私有化處理，對外不能直接使用對象名訪問(私有屬性)。 同時，需要提供專門用於設置和讀取私有屬性的set/get方法，讓外部使用我們提供的方法，對屬性進行操作。 這就叫屬性的封裝。
封裝不是拒絕訪問，而是限制訪問。 要求調用者，必須使用我們提供的set/get方法進行屬性的操作，而不是直接拒絕操作。
因此，單純的屬性私有化，不能稱為封裝！必須要私有化之后，提供對應的set/get方法。
41、 原生JS對象與JQuery對象之間的相互轉化方式有哪些？
① 使用$("")選中的是JQuery對象，只能調用JQuery函數，而不能使用元素的JS事件與函數；
② 原生的JS對象轉為 JQuery對象
可以使用$() 包裹即可以轉為JQuery對象
var p = document.getElementsByTagName("p");
$("p").click(); √ 原生的JS對象已經轉為 JQuery對象；
③ JQuery轉為原生JS對象：
使用get(index)或者[index]
$("#p").get(0).onclick() = function () {}; √
$("#p").[0].onclick() = function () {}; √
42、JS常用的內置對象有哪些？它們各自的一些方法有哪些？：
1、Boolean類、Number類:、String類、Date日期類、
2、常用方法：
Number類：
.toString() 將數值類型轉換成字符串類型；
.toLocaleString()將數值按照本地格式順序轉換成字符串，一般從右開始，三個一組加都好分隔開；
.toFixed(n)；將數字保留n位小數，並將其轉換為字符串格式；
.toPrecision(n):將數字格式化為指定長度。n表示不含小數點的位數長度。如果n<原數字長度，則用科學計數法表示。
.valueOf() 返回Number對象的基本數字值；
String類：
str.length 返回字符串的長度，即為字符數；
str.toLowerCase()將字符串所有的字符轉成小寫；
str.UpLowerCase()將字符串所有的字符轉成大寫；
str.charAt(N)截取數組的第N個字符，相當於str[N]；
str.indexOf("srt",index)查找子串在字符串中出現的位置，如果沒有找到返回-1，其他同數組的indexOf方法；
str.lastIndexOf()同數組。
str.subString (begin,end) 截取數組中的某一部分並返回截取的字符串
>>>傳入一個參數，表示是開始的區間，默認將截取到字符串末尾；
>>>傳入兩個參數，表示開始和結束的下標，是一個左閉右開區間；
str.split(分隔符)將字符串以指定分隔符分隔存入數組中，
str.replace(old，new)將字符串中的字符進行替換；
Date日期類：
1、new Date();返回當前最新時間；
new Date("2017,08,29,12:33:29") 返回指定時間；
43、什么是Jquery中的文檔就緒函數？
文檔就緒函數防止文檔在未完全加載之前，運行JQuery代碼；
$(document).ready(function() {
//JQuery代碼
})；
簡寫形式如下：
$(function(){});
[文檔就緒函數&window.onload的區別]
① window.onload必須等到網頁中的所有內容(包括圖片視頻)加載完成后才能執行代碼；
文檔就緒函數只需要在 網頁DOM結構加載完成之后，就可以執行代碼；
② window.onload只能寫一個，寫多個之后只會執行最后一個；
文檔就緒函數可以寫多個，而且不會覆蓋。
44、常用的CSS的預處理器有哪些？
less
sass 常用的編譯方式
它們之間的區別：
SCSS中的嵌套：選擇器嵌套 屬性嵌套 偽類嵌套
混合宏、繼承、占位符：
① 混合宏:使用@mixin聲明混合宏，在其他選擇器中使用@include調用混合宏
② 繼承 ：聲明一個普通的class，在其他的選擇器中使用extend 繼承這個class；
③ 占位符 ：使用%聲明%占位符，在其他選擇器中使用@extend 繼承占位符；
45、簡述下JS中的事件分類
1、鼠標事件： click/dblclick/onmouseon/onmouseover.....
2、HTML事件： onload/onscroll/onsubmit/onchange/onfocus....
3、鍵盤事件：
keydown:鍵盤按下時觸發
keypress:鍵盤按住時觸發
keyup:鍵盤抬起時觸發
【確定觸發的按鍵】
① 在觸發的函數中傳入一個參數e，表示鍵盤事件；
② 使用e.keyCode，取到按鍵的Ascii碼值，進而確定觸發按鍵；
③ 所有瀏覽器的兼容寫法(一般並不需要)
46、淺談JavaScript的優點和缺點：
優點：
- 性能：由於JavaScript運行在客戶端，節省了web服務器的請求時間和帶寬
- 輕量級的腳本語言，比較容易學習
- 運行在用戶機器上，運行結果和處理相對比較快。
- 可以使用第三方附加組件來檢查代碼片段。
缺點：
- 安全問題：由於JavaScript在客戶端運行，可能被用於黑客目的。
- 渲染問題：在不同瀏覽器中的處理結果可能不同。
47、淺談jQuery的優點和缺點：
使用jQuery最大的好處是少量的代碼做更多的事情。
Write Less Do More
看個簡單例子，獲取元素的值，使用JavaScript：
Javascript代碼
- document.getElementById(‘elementid').value
使用jQuery：
Jquery代碼
- $(‘#elementid').val();
與JavaScript相比，jQuery的語法更加簡單。
通過jQuery，可以很容易地瀏覽文檔、選擇元素、處理事件以及添加效果等，同時還允許開發者定制插件。
優點：
- jQuery消除了JavaScript跨平台兼容問題。
- 相比其他JavaScript和JavaScript庫，jQuery更容易使用。
- jQuery有一個龐大的庫/函數。
- jQuery有良好的文檔和幫助手冊。
- jQuery支持AJAX。
缺點：
- 由於不是原生JavaScript語言，理解起來可能會受到限制。
- 項目中需要包含jQuery庫文件。如果包含多個版本的jQuery庫，可能會發生沖突。
48、淺談angular優缺點
簡介：angularjs是一個javascript框架。通過script腳本引入，他是一個用Javascript編寫的庫。angularjs通過指令擴展了HTML，通過表達式綁定數據到HTML中。AngularJS主要考慮的是構建CRUD（增刪改查）應用。幸運的是，至少90%的WEB應用都是CRUD應用。
優點：
1. 改變操作dom的方式
將傳統的JQuery的先選擇元素，在操作的方式改變成了直接對於元素本身的操作。
這依賴於強大的Html Parser的能力和directive靈活。
2. 后端MVC前端化
3. 數據操作
缺點：
1、框架略笨重
2、不適合頁面復雜的網站類型開發：
內容網站，需要SEO的。(SEO目前也有了prerender解決方案) https//
prerender.io
交互頻繁的，如游戲之類交互體驗網站。
49、什么叫做事件委派？有什么作用？（優點）
Jq中的事件委派on
>>>將原本需要綁定到子元素上的事件，綁定到其祖先節點乃至根節點上面，再委派給子元素節點，生效！
eg: $("p").on("click",function(){});
事件委派 如下：
$(document).on("click","p",function(){});
>>>作用：
不使用事件委派的綁定方式，只能將事件綁定到初始化時的子元素標簽上，
當頁面新增同類型標簽時，這些新增的標簽上，沒有之前綁定的事件。
而使用 事件委派時 ，當頁面新增更同類型標簽時,這些新增的事件也具有之同類型前標簽所綁定的事件！
off()取消事件綁定
$("p").off("click"):取消單事件綁定
$("p").off("click mouseover dbclick"):取消多事件綁定
$(document).off("click"，"p"):取消委派事件綁定
$("p").off()取消所有的事件綁定
50、詳細介紹下 CSS的動畫
1、 css的transition transition抓住了所設置變化屬性的起始態和完成態，通過設定的速度曲線來完成動畫。可以涉及到各種變化的css屬性，默認為all，則所有變化的屬性都會在出發時，以動畫的形式展現出來。
tips：transform是一種變化屬性，該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。可以作為transition中需要變化的屬性。
2.css3的animation屬性
使用animation屬性制作動畫可以更加靈活的設置動畫幀，通過不同keyframe（動畫幀）的設置，實現很多優雅的效果，keyframe中的百分數是動畫完成總時間的比例。
animation是設置總的動畫效果，而keyframe中設置上相應的動畫名字，然后在keyframe中設置具體的動畫效果。
JS中的動畫
3.原生js動畫
原生js動畫利用js代碼，將動畫一步以函數的方式寫出來，可以實現多種動畫樣式，而且可以自己做兼容性處理，自己設立每一步的動畫效果，並且能夠完成比較復雜的效果，但是代碼量很大。
51、Jquery與jQuery UI 有啥區別？
*jQuery是一個js庫，主要提供的功能是選擇器，屬性修改和事件綁定等等。
*jQuery UI則是在jQuery的基礎上，利用jQuery的擴展性，設計的插件。
提供了一些常用的界面元素，諸如對話框、拖動行為、改變大小行為等等
52、jquery 中如何將數組轉化為json字符串，然后再轉化回來？
jQuery中沒有提供這個功能，所以你需要先編寫兩個jQuery的擴展：
$.fn.stringifyArray = function(array) { return JSON.stringify(array) } $.fn.parseArray = function(array) { return JSON.parse(array) } 然后調用： $("").stringifyArray(array)
53、函數實現阻止冒泡函數的功能？
54、什么是閉包？ 寫一個簡單的閉包？
我的理解是，閉包就是能夠讀取其他函數內部變量的函數。在本質上，閉包就是將函數內部和函數外部連接起來的一座橋梁。
JS中提供了一種閉包的概念：在函數中，定義一個子函數，子函數可以訪問父函數的私有變量，
可以在子函數中進行操作，最后將子函數通過return返回。
閉包的作用:
① 可以在函數外部訪問函數的私有變量；
② 讓函數內部的變量，可以始終存在於內存中，不會在函數調用完成之后立即釋放！
55、call和apply的區別是什么？
參數形式不同，call(obj, pra, pra)后面是單個參數。apply(obj, [args])后面是數組。
56、為什么不能定義1px左右的div容器？
IE6下這個問題是因為默認的行高造成的，解決的方法也有很多，例如：
overflow:hidden | zoom:0.08 | line-height:1px
57、bind(), live(), delegate()的區別
bind： 綁定事件，對新添加的事件不起作用，方法用於將一個處理程序附加到每個匹配元素的事件上並返回jQuery對象。
live： 方法將一個事件處理程序附加到與當前選擇器匹配的所有元素（包含現有的或將來添加的）的指定事件上並返回jQuery對象。
delegate： 方法基於一組特定的根元素將處理程序附加到匹配選擇器的所有元素（現有的或將來的）的一個或多個事件上。
58、簡述link和import的區別？
區別1：link是XHTML標簽，除了加載CSS外，還可以定義RSS等其他事務；@import屬於CSS范疇，只能加載CSS。
區別2：link引用CSS時，在頁面載入時同時加載；@import需要頁面網頁完全載入以后加載。
區別3：link是XHTML標簽，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。
區別4：link支持使用Javascript控制DOM去改變樣式；而@import不支持。
59、你如何優化自己的代碼？
1、代碼重用
2、避免全局變量（命名空間，封閉空間，模塊化mvc..）
3、拆分函數避免函數過於臃腫：單一職責原則
4、適當的注釋，尤其是一些復雜的業務邏輯或者是計算邏輯，都應該寫出這個業務邏輯的具體過程
內存管理，尤其是閉包中的變量釋放
60、使用js實現這樣的效果：在文本域里輸入文字時，當按下enter鍵時不換行，而是替換成“{{enter}}”,(只需要考慮在行尾按下enter鍵的情況).
textarea.
onkeydown=function(e){
e.preventDefault();//
為了阻止enter鍵的默認換行效果
if(e.keycode==”enter
鍵碼”){
testarea.value+=”{{enter}}”;
}
61、請簡要描述web前端性能需要考慮哪方面，你的優化思路是什么？
參見雅虎14web優化規則
減少http請求：
1、小圖弄成大圖，
2、合理的設置緩存
3
、資源合並、壓縮
將外部的js文件置底
62、簡述readyonly與disabled的區別
readonly
只針對input(text / password)和textarea有效，
而disabled對於所有的表單元素都有效，當表單元素在使用了disabled后，當我們將表單以POST或GET的方式提交的話，這個元素的值不會被傳遞出去，而readonly會將該值傳遞出去
63、請盡可能詳盡的解釋ajax的工作原理
思路：先解釋異步，再解釋ajax如何使用
Ajax的原理簡單來說通過XmlHttpRequest對象來向服務器發異步請求，從服務器獲得數據，然后用javascript來操作DOM而更新頁面。這其中最關鍵的一步就是從服務器獲得請求數據。要清楚這個過程和原理，我們必須對 XMLHttpRequest有所了解。
XMLHttpRequest是ajax的核心機制，它是在IE5中首先引入的，是一種支持異步請求的技術。簡單的說，也就是javascript可以及時向服務器提出請求和處理響應，而不阻塞用戶。達到無刷新的效果。
64、為什么擴展javascript內置對象不是好的做法？
因為擴展內置對象會影響整個程序中所使用到的該內置對象的原型屬性
65、瀏覽器標准模式和怪異模式之間的區別是什么？
標准模式是指，瀏覽器按W3C標准解析執行代碼；
怪異模式則是使用瀏覽器自己的方式解析執行代碼，因為不同瀏覽器解析執行的方式不一樣，所以我們稱之為怪異模式。
瀏覽器解析時到底使用標准模式還是怪異模式，與你網頁中的DTD聲明直接相關，DTD聲明定義了標准文檔的類型（標准模式解析）文檔類型，會使瀏覽器使用相應的方式加載網頁並顯示，忽略DTD聲明,將使網頁進入怪異模式。
66、如果設計中使用了非標准的字體，你該如何去實現？
先通過font-face定義字體，再引用
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */
}
67、簡述.trigger與.triggerHandler的區別
.trigger()自動 觸發某元素事件；
第一個參數：是需要觸發的事件類型；
第二個參數：(可選)數組格式，表示傳遞給事件函數的參數；
>>>傳遞進來的參數，可以在事件函數中，定義形參進行獲取
(形參第一個必須是event事件，所以從第二個開始為所傳遞的參數！)
>>> 也可以直接在函數中，使用arguements對象數組，讀取參數;
.triggerHandler()：功能同上，區別如下：
① .triggerHandler()不能觸發瀏覽器默認的HTML事件，如submit等；
② .trigger()可以觸發頁面中所有匹配元素的事件；
而.triggerHandler()只能觸發第一個匹配元素的事件；
③ .trigger()的返回值，返回的是調用當前函數的對象，符合JQuery的可鏈式語法；
.triggerHandler()返回的是事件函數的返回值，如果事件函數沒有返回值，則返回的是Undefined；
69、call bind apply 這三個函數有什么共同的作用？
通過函數名調用這三個函數，可以強行將函數中的this指定為某一個對象
三個函數的唯一區別，在於接受func的
參數列表的形式不同，除此之外，功能上沒有差別！
三個函數的寫法(區別)
① call寫法：func.call(func的this指向的obj,func參數1,func參2,....);
② apply寫法：func.apply(func的this指向的obj,[func參數1,func參2,....]);
③ bind寫法：func.bind(func的this指向的obj),(func參數1,func參2,....);
70、擴展Object實現繼承
① 聲明一個父類函數
function Parent (){}
聲明一個子類函數
function Son (){}
② 通過prototype給Object類添加一個擴展方法：
Object.prototype.extend = function (parent) {
for(var i in parent){
this[i] = parent[i];
}
}
③ 分別拿到父類對象和子類對象: 實例化
var p = new Parent();
var s = Son();
④ 用子類對象調用擴展方法，實現從繼承操作：
s.extend(p)
實現繼承的原理：
通過循環將父類對象的所有屬性和方法，全部賦給子類對象。
關鍵點在於for-in循環，即使不擴展Object，也能通過簡單的循環實現操作；
71、詳細解釋下JS中的this指向問題
誰最終調用函數，this就指向誰！
this指向的規律 ：(跟函數的調用方式息息相關！)
① 通過 【 函數名() 】 調用的，this永遠指向window；
② 通過 【 對象.方法 】調用的，this永遠指向對象。obj.func();
③ 函數作為數組中的 一個元素，通過數組下標調用的 【 arr[i]() 】，this指向數組arr。
④ 函數作為window內置函數的回調函數使用，this指向widow；
setTimeout() setInterval()等
⑤ 函數作為構造函數，使用new關鍵字調用，this指向新new出的對象。
72、BootStrap的優點和缺點:
優點：
流媒體網格布局
響應式設計
自定義表單元素
頁面排版
JavaScript交互性
跨瀏覽器兼容性
BT柵格系統的本質就是通過CSS3的媒體查詢實現的
BootStrap的缺點:
兼容性可能不太好
73、什么是漸進增強（progressive enhancement）、優雅降級（graceful degradation）呢？
漸進增強（progressive enhancement）：針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。（
從被所有瀏覽器支持的基本功能開始，逐步地添加那些只有新式瀏覽器才支持的功能，向頁面添加無害於基礎瀏覽器的額外樣式和功能。當瀏覽器支持時，它們會自動地呈現出來並發揮作用。）
優雅降級（graceful degradation）：一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。（
Web站點在所有新式瀏覽器中都能正常工作，如果用戶使用的是老式瀏覽器，則代碼會檢查以確認它們是否能正常工作。由於IE獨特的盒模型布局問題，針對不同版本的IE的hack實踐過優雅降級了，為那些無法支持功能的瀏覽器增加候選方案，使之在舊式瀏覽器上以某種形式降級體驗卻不至於完全失效。）
區別：優雅降級是從復雜的現狀開始，並試圖減少用戶體驗的供給，而漸進增強則是從一個非常基礎的、能夠起作用的版本開始，並不斷擴充，以適應未來環境的需要。
74、常見的瀏覽器狀態碼
200--請求成功！
500--內部服務器錯誤！
404--請求失敗！
75、詳述jQuery中Ajax的寫法以及get和post的區別
$.ajax() 通過 HTTP 請求加載遠程數據。jQuery 最底層 AJAX 實現函數。
接受一個大的對象。對象里面的屬性和方法，表示ajax請求的相關設置：
① url:被請求的遠程文件的路徑。
② Ajax請求的類型，可選值get/post.
回調函數：
•success： 請求成功的回調函數。接受一個參數data，表示后台返回的數據。
•dataType：預期服務器返回的數據類型。
"json": 返回 JSON 數據 。
"text": 返回純文本字符串
•data：對象格式。向后台發送一個對象，表示傳遞的數據。
常用於type為post的請求方式。
如果type為get,可以使用？直接追加載URL后面。
•error:請求失敗時的回調函數
•statusCode:接受一個對象，對象的鍵值對是status狀態碼和對應的回調函數，
表示當請求狀態碼是對應數字時，執行具體的操作函數.
$.get(); $.post(); 這兩個函數，是在$.ajax()的基礎上進行封裝而來。可以直接默認發送get請求或post請求；
*
* 接受四個參數：
* ① 請求的URL路徑。 相當於$.ajax()里面的url；
* ② 向后台傳遞的數據。 相當於$.ajax()里面的data；
* ③ 請求成功的回調函數。 相當於$.ajax()里面的success；
* ① 預期返回的數據類型。 相當於$.ajax()里面的dataType；
76、IE和DOM事件流的區別
IE9以前：attachEvent(“onclick”)、detachEvent(“onclick”)
IE9開始跟DOM事件流是一樣的，都是addEventListener
77、IE跟DOM事件流有什么區別
① 闡述事件綁定方式：
IE9以前：attachEvent(“onclick”)、detachEvent(“onclick”)
IE9開始:跟DOM事件流是一樣的，都是addEventListener
② 這兩種綁定方式的區別：
寫法上的區別：
attachEvent兩個參數、事件帶on
addEventListener 三個參數、事件不帶on、true/false表示捕獲/冒泡
功能上的區別：
attachEvent綁定的事件全部冒泡、addEventListener根據第三個參數是true還是false決定冒泡還是捕獲。
③ 事件冒泡和事件捕獲。
冒泡： 當觸發一個事件時，會從當前節點開始，依次觸發其祖先節點的同類型事件。
捕獲： 從根節點開始，依次觸發其祖先節點同類型事件，直到節點自身。
78、IE和標准下有哪些兼容性的寫法？
1、獲取事件對象(事件因子)： ev = e || window.event;
2、DOM2
添加事件： if(dom.attachEvent){
Dom. attachEvent(“onclick”,function);
}else{
Dom.
addEventListener(“click”,function);
}
3、取消事件冒泡： if (e.stopPropagation) {
e.stopPropagation(); //IE以外
} else {
e.cancelBubble = true; //IE8之前
}
4、取消默認事件：if (e.preventDefault) {
e.preventDefault(); //IE以外
} else {
e.returnValue = false; //IE
}
79、API是什么？
API（Application Programming Interface,應用程序編程接口）是一些預先定義的函數，目的是提供應用程序與開發人員基於某軟件或硬件得以訪問一組例程的能力，而又無需訪問源碼，或理解內部工作機制的細節。
在編程語言中，API通常指語言中內置的函數、接口、類等系統工具。我們編程人員無需關心這些函數的實現細節，只需要按照API文檔的要求，給函數傳入指定參數接受返回值即可。
在前后台傳遞數據，API也是后台提供給前台的接口，前台只需要按照要求請求接口並發送指定參數，結課接受JSON字符串。例如：https://api.douban.com/v2/book/1220562
80、Javascript事件處理器在線程空閑之前不會運行是什么意思？
JS
是一個單線程應用，也就是說，當某一段代碼正在執行的時候，其他代碼如果需要執行也必須等到這個線程結束后，才能執行。
代碼執行到for循環時，當for循環執行第一次，遇到第一個setTimeout時並不會立即觸發，因為for循環還有結束，現在的線程被for循環阻塞。setTimeout必須等到for循環的線程結束以后，也就是線程空閑之后，才能執行，而這時候i已經變成了4.
所以最終打印三個4. 解決的辦法可以將var改成let，或者for循環中嵌套自執行函數。 原理。。。。。
81、js中callee和caller的作用
寫法不同：
callee是Arguments的一個屬性，在函數中使用Arguments.callee調用。
C
aller在函數中，直接使用函數名調用。 Func. Caller
功能不同：
Arguments.callee 返回的是，當前函數自身的引用！！
F
unc. Caller 返回的是，當前函數在哪個函數中調用。 如果函數時頂層調用，則返回null
function func(){
console.log(func.caller);
}
func(); // null
function func1(){
func();
}
func1(); // 返回func1
82、js中的保留字是什么？
程序中預定義的關鍵字(函數名、類名、屬性名、方法名等標識符)都是js中的保留字。 這些保留字，不允許用戶再次聲明為變量、方法、函數
保留字在編譯器中會變色。
83、工廠方式創建js對象是啥方式 （JS中創建對象的多種方式）
① 字面量模式： var obj = {}
混合模式就是我們所說的將屬性添加到成員屬性(構造函數模式)，將方法添加到原型方法（原型模式）
84、js延遲加載的方式有哪些？
+
將JS代碼放在文檔最后也是延遲加載的方式之一。
85、documen.write和 innerHTML 的區別？
documen.write 是直接在整個文檔中，寫入代碼。會覆蓋掉其他已有代碼。
innerHTML 是選中一個節點后，修改節點里面的代碼，只影響當前節點。
86、解釋jsonp的原理，以及為什么不是真正的ajax
后續講解
87、javascript 中的垃圾回收機制？閉包中的內存釋放？
Js
中的垃圾回收機制，函數中的變量，會在函數執行完成后，被回收處理。
但是，如果函數中使用了閉包，那么函數中的變量將始終被內部的函數持有，而不會在函數執行完成后釋放。
閉包的兩個重要作用：
① 可以讓函數外部，能夠訪問函數內部的變量。
② 讓函數內部的變量在函數執行完成后，不會被釋放，而始終保持在內存中
88、哪些操作會造成內存泄漏
大量使用全局變量
大量使用閉包
清除DOM節點時，只清除節點，而沒有刪除事件
89、js中的精度問題
JS
中在浮點數運算或者大整數運算的時候，可能導致不准確的結果出現。 例如0.7+0.1=0.7999999999999 解決辦法可以將數字*10相加，然后再除以10
90、簡述defer和async的區別
1.默認引用 script:<script type="text/javascript" src="x.min.js"></script>
當瀏覽器遇到 script 標簽時，文檔的解析將停止，並立即下載並執行腳本，腳本執行完畢后將繼續解析文檔。
2.async模式 <script type="text/javascript" src="x.min.js" async="async"></script>
當瀏覽器遇到 script 標簽時，文檔的解析不會停止，其他線程將下載腳本，腳本下載完成后開始執行腳本，腳本執行的過程中文檔將停止解析，直到腳本執行完畢。
3.defer模式 <script type="text/javascript" src="x.min.js" defer="defer"></script>
當瀏覽器遇到 script 標簽時，文檔的解析不會停止，其他線程將下載腳本，待到文檔解析完成，腳本才會執行。
91、業界常用的優化WEB頁面加載速度的方法（可以分別從頁面元素展現，請求連接，css,js,服務器等方面介紹）
92、解釋什么是sql注入，xss漏洞？
93、解釋下這個css選擇器發生什么？ [role=nav]>ul a:not([href^=mailto]){}
[role=nav] 選中頁面中 role屬性等於nav的元素. 也就是導航欄
[role=nav]>ul 導航欄中的子節點 ul
[role=nav]>ul a UL里面的a標簽
a:not([href^=mailto]) 選中a標簽，除了href屬性使用mailto開頭的。
選中導航欄中的ul里面的不是mailto的a標簽。
94、有這樣一個URL：http://item.taobao.com/item.htm?a=1&b=2&c= e &d=xxx，請寫一段JS程序提取URL中的各個GET參數(參數名和參數個數不確定)，將其按key-value形式返回到一個json結構中，如{a:’1′,?b:’2′,?c:”,?d:’xxx’,?e:undefined}。
95、以下哪個單詞不屬於javascript保留字 B
A.with
B.parent
C.class
D.void
96、 動態創建DOM方式（創建script，插入到DOM中，加載完畢后callBack）
97、 按需異步載入js
99、簡單的介紹下JS面向對象中的__proto__與prototype
1、prototype:函數的原型對象
① 只有函數才有prototype，而且所有的函數必然有prototype!
② prototype本身也是一個對象！
③ prototype指向了當前函數所在的引用地址！
2、__proto__：對象的原型
① 只有對象才有__proto__，而且所有的對象必有__proto__；
② __proto__也是一個對象，所以也有自己的__proto__，順着這條線向上找的順序，就是原型鏈。
③ 數組都是對象，也都有自己的__proto__；
3、實例化一個類，拿到對象的原理：
實例化一個類的時候，實際上是將新對象的__proto__，指向構造函數所在的prototype；
也就是說：zhangsan.__proto__ ==Person.prototype √
4、所有對象的__proto__沿着原型鏈向上查找都將指向Object的prototype;
Object的prototype的原型，指向null；
100、簡述下什么是CSShack以及其表現形式有哪些？
CSS hack由於不同廠商的
瀏覽器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一廠商的瀏覽器的不同版本，如IE6和IE7，對CSS的解析認識不完全一樣，因此會導致生成的頁面效果不一樣，得不到我們所需要的頁面效果。 這個時候我們就需要針對不同的瀏覽器去寫不同的CSS，讓它能夠同時兼容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁面效果。
簡單的來說：
CSS hack的目的就是使你的CSS代碼兼容不同的瀏覽器。
表現形式：
（1）方式一 條件注釋法
（2）方式二 類內屬性前綴法
（3）CSS hack方式三：選擇器前綴法
101、Require.js有什么作用？
1、實現了文件的異步加載，避免網頁失去響應。
2、管理模塊之間的依賴性，便於代碼的編寫和維護。
102、怎么檢測一個對象是不是一個類的實例？
instanceof：A instanceof B 檢測一個對象(A)是不是一個類(B)的一個實例；
louver instanceof Person;√ louver是函數Person的實例化；
louver instanceof Object;√ 所有對象都是Object的一個實例；
Person instanceof Object;√ 函數本身也是一個對象；
constructor：返回當前對象的構造函數；
103、zepto和jQuery的不同之處有哪些？
1、zepto不支持IE瀏覽器；
2、zepto增加了一些基本的觸摸事件：如tap，swip事件’
3、DOM操作的區別：添加ID時jQuery不會生效，而zepto會生效！
4、使用zepto時，load事件的處理函數會執行，使用jQuery時，load事件的處理函數不會執行。
5、事件委派的不同：
在zepto中，當a被點擊之后，一次性彈出內容為a事件和b事件，但是在jQuery中只會觸發委托彈出a事件，再點擊一次才會觸發b事件！
6、offse:zepto：返回left top width heigth
jQuery:只會返回left top
7、zepto無法隱藏元素的寬高，jQuery可以；
8、zepto不支持的選擇器：
① 基本偽類：first last eq(index)
② 內容偽類：contains(text) :empty :has(selector)
③ 可見性偽類：hidden visible
④ 屬性選擇器：[attribute = value]
⑤ 表單偽類：input :text :password :submit
⑥ 表單對象屬性：selected
104、使用JS跳轉頁面的方法：
Window.location="http://www.baidu.com";
細分幾種使用location跳轉頁面的類型：
location.replace("http://www.baidu.com"); 使用新的文檔替換當前文檔，替換以后，不能退回。
location.assign("http://www.baidu.com");加載新的文檔，加載之后，可以退回。
location.repload();重新加載當前頁面，即刷新頁面；
①、 location.repload(true) 強制刷新頁面，從服務器端重新加載頁面----Ctrl+f5;
②、 location.repload() 在本地刷新當前頁面---f5
105、一個頁面上有大量的圖片（大型電商網站），加載很慢，你有哪些方法優化這些圖片的加載，給用戶更好的體驗。
圖片懶加載，在頁面上的未可視區域可以添加一個滾動條事件，判斷圖片位置與瀏覽器頂端的距離與頁面的距離，如果前者小於后者，優先加載。
如果為幻燈片、相冊等，可以使用圖片預加載技術，將當前展示圖片的前一張和后一張優先下載。
如果圖片為css圖片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技術。
如果圖片過大，可以使用特殊編碼的圖片，加載時會先加載一張壓縮的特別厲害的縮略圖，以提高用戶體驗。
如果圖片展示區域小於圖片的真實大小，則因在服務器端根據業務需要先行進行圖片壓縮，圖片壓縮后大小與展示一致。
更換最新的圖片格式 谷歌的webp騰訊的tpg
合成雪碧圖
大圖分割加載
106、CSS3新增偽類有那些？
p:first-of-type 選擇屬於其父元素的首個 <p> 元素的每個 <p> 元素。
p:last-of-type 選擇屬於其父元素的最后 <p> 元素的每個 <p> 元素。
p:only-of-type 選擇屬於其父元素唯一的 <p> 元素的每個 <p> 元素。
p:only-child 選擇屬於其父元素的唯一子元素的每個 <p> 元素。
p:nth-child(2) 選擇屬於其父元素的第二個子元素的每個 <p> 元素。
:enabled、:disabled 控制表單控件的禁用狀態。
:checked，單選框或復選框被選中。
107、如何在 HTML5 頁面中嵌入音頻、視頻?
HTML 5 包含嵌入音頻文件的標准方式，支持的格式包括 MP3、Wav 和 Ogg：
<audio controls>
<source src="jamshed.mp3" type="audio/mpeg">
Your browser does'nt support audio embedding feature.
</audio>
和音頻一樣，HTML5 定義了嵌入視頻的標准方法，支持的格式包括：MP4、WebM 和 Ogg：
<video width="500px" height="500px" autoplay="autoplay" loop="loop">
<source src="binzhiliang1.mp4" type="video/mp4" >
Your browser does'nt support video embedding feature.
</source>
</video>
108、怎么取到一個網址並轉化為字符串格式存儲？
console.log(location.href);//返回當前完整路徑；
/*將js中的對象、數組，轉化*/
var str1 = JSON.stringify(jsonObj);
console.log(str1);
var obj = JSON.parse(str1);
console.log(obj);
109、如何優化網頁加載速度？
1.減少css，js文件數量及大小(減少重復性代碼，代碼重復利用)，壓縮CSS和Js代碼
2.圖片的大小
3.把css樣式表放置頂部，把js放置頁面底部
4.減少http請求數
5.使用外部 Js 和 CSS
110、知道css有個content屬性嗎？有什么作用？有什么應用？
知道。css的content屬性專門應用在 before/after 偽元素上，用來插入生成內容。最常見的應用是利用偽類清除浮動。
//一種常見利用偽類清除浮動的代碼
.clearfix:after {
content:"."; //這里利用到了content屬性
display:block;
height:0;
visibility:hidden;
clear:both; }
.clearfix {
*zoom:1;
}
after偽元素通過 content 在元素的后面生成了內容為一個點的塊級素，再利用clear:both清除浮動。
111、簡述下web storage和cookie的區別
1、
Web Storage相對於cookie來說，擁有更大的容量儲存。
2、Cookie的大小是受限的，並且每次你請求一個新的頁面的時候Cookie都會被發送過去，這樣無形 中浪費了帶寬。
3、cookie還需要指定作用域，不可以跨域調用。
4、Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie需要前端開發者自己封裝setCookie，getCookie。
5、但是Cookie也是不可以或缺的：Cookie的作用是與服務器進行交互，作為HTTP規范的一部分而存在 ，而Web Storage僅僅是為了在本地“存儲”數據而生。
112、為什么利用多個域名來存儲網站資源會更有效？
CDN緩存更方便
突破瀏覽器並發限制
節約cookie帶寬
節約主域名的連接數，優化頁面響應速度
防止不必要的安全問題
113、HTML5 Canvas 元素有什么用？
答：Canvas 元素用於在網頁上繪制圖形，該元素標簽強大之處在於可以直接在 HTML 上進行圖形操作。
115、請用js實現隨機選取10–100之間的10個數字，存入一個數組，並排序。
var iArray = []; funtion getRandom(istart, iend){ var iChoice = istart - iend +1; return Math.floor(Math.random() * iChoice + istart; } for(var i=0; i<10; i++){ iArray.push(getRandom(10,100)); } iArray.sort();
116、如何消除一個數組里面重復的元素？
方法一： var arr=[1,2,3,3,4,4,5,5,6,1,9,3,25,4]; function deRepeat(){ var newArr=[]; var obj={}; var index=0; var l=arr.length; for(var i=0;i<l;i++){ if(obj[arr[i]]==undefined){ obj[arr[i]]=1; newArr[index++]=arr[i]; }else if(obj[arr[i]]==1) } return newArr; } var newArr2=deRepeat(arr); alert(newArr2); //輸出1,2,3,4,5,6,9,25 方法二： var arr = [1,2,2,3,3,3,4,5,6]; function func (arr){ var newArr = new Array; newArr.push(arr[0]); for (var i=0;i<=arr.length;i++) { if (newArr.indexOf(arr[i])==-1) { newArr.push(arr[i]); } } document.write(newArr); } func(arr);
117、閉包：下面這個ul，如何點擊每一列的時候alert其index？
<ul id="test"> <li>這是第一條</li> <li>這是第二條</li> <li>這是第三條</li> </ul> 非閉包實現 var lis=document.querySelectorAll('li'); document.querySelector('#test').onclick=function(e){ for (var i = 0; i < lis.length; i++) { var li = lis[i]; if(li==e.target){ alert(i); } } }; //閉包實現 var lis=document.querySelectorAll('li'); for (var i = 0; i < lis.length; i++) { var li = lis[i]; li.onclick=(function(index){ return function(e){ alert(index); }; })(i); }
118、JavaScript數組元素添加、刪除、排序等方法有哪些？
Array.concat( ) 連接數組
Array.join( ) 將數組元素連接起來以構建一個字符串
Array.length 數組的大小
Array.pop( ) 刪除並返回數組的最后一個元素
Array.push( ) 給數組添加元素
Array.reverse( ) 顛倒數組中元素的順序
Array.shift( ) 將元素移出數組
Array.slice( ) 返回數組的一部分
Array.sort( ) 對數組元素進行排序
Array.splice( ) 插入、刪除或替換數組的元素
Array.toLocaleString( ) 把數組轉換成局部字符串
Array.toString( ) 將數組轉換成一個字符串
119、簡述remove和detach異同
* 1、相同點：
* ① 都會把當前標簽，以及當前標簽的所有子節點，全部刪除；
* ② 都可以在刪除時，把當前節點返回。並可以使用變量接受返回的節點，以便后期恢復；
* 2、 不同點：
* 使用接受的節點，恢復原節點時。
* remove只能恢復節點的內容，但是事件綁定，不能再恢復；
* detach不但恢復節點的內容，還能再恢復 事件的綁定；
120、Ajax 是什么? 如何創建一個Ajax？
Ajax並不算是一種新的技術，全稱是asynchronous javascript and xml，可以說是已有技術的組合，主要用來實現客戶端與服務器端的異步通信效果，實現頁面的局部刷新，帶來更好的用戶體驗；按需獲取數據，節約帶寬資源；早期的瀏覽器並不能原生支持ajax，可以使用隱藏幀（iframe）方式變相實現異步效果，后來的瀏覽器提供了對ajax的原生支持
使用ajax原生方式發送請求主要通過XMLHttpRequest(標准瀏覽器)、ActiveXObject(IE瀏覽器)對象實現異步通信效果
121、舉例簡述同步和異步的區別?
同步：阻塞的
-張三叫李四去吃飯，李四一直忙得不停，張三一直等着，直到李四忙完兩個人一塊去吃飯
=瀏覽器向服務器請求數據，服務器比較忙，瀏覽器一直等着（頁面白屏），直到服務器返回數據，瀏覽器才能顯示頁面
異步：非阻塞的
-張三叫李四去吃飯，李四在忙，張三說了一聲然后自己就去吃飯了，李四忙完后自己去吃
=瀏覽器向服務器請求數據，服務器比較忙，瀏覽器可以自如的干原來的事情（顯示頁面），服務器返回數據的時候通知瀏覽器一聲，瀏覽器把返回的數據再渲染到頁面，局部更新
122、如何解決跨域問題?
理解跨域的概念：協議、域名、端口都相同才同域，否則都是跨域
出於安全考慮，服務器不允許ajax跨域獲取數據，但是可以跨域獲取文件內容，所以基於這一點，可以動態創建script標簽，使用標簽的src屬性訪問js文件的形式獲取js腳本，並且這個js腳本中的內容是函數調用，該函數調用的參數是服務器返回的數據，為了獲取這里的參數數據，需要事先在頁面中定義回調函數，在回調函數中處理服務器返回的數據，這就是解決跨域問題的主流解決方案
123、頁面編碼和被請求的資源編碼如果不一致如何處理？
對於ajax請求傳遞的參數，如果是get請求方式，參數如果傳遞中文，在有些瀏覽器會亂碼，不同的瀏覽器對參數編碼的處理方式不同，所以對於get請求的參數需要使用 encodeURIComponent函數對參數進行編碼處理，后台開發語言都有相應的解碼api。對於post請求不需要進行編碼
124、簡述ajax 的過程。
1. 創建XMLHttpRequest對象,也就是創建一個異步調用對象
2. 創建一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證信息
3. 設置響應HTTP請求狀態變化的函數
4. 發送HTTP請求
5. 獲取異步調用返回的數據
6. 使用JavaScript和DOM實現局部刷新
寫法如下：
$.ajax() 通過 HTTP 請求加載遠程數據。jQuery 最底層 AJAX 實現函數。
接受一個大的對象。對象里面的屬性和方法，表示ajax請求的相關設置：
① url:被請求的遠程文件的路徑。
② Ajax請求的類型，可選值get/post.
回調函數：
•success： 請求成功的回調函數。接受一個參數data，表示后台返回的數據。
•dataType：預期服務器返回的數據類型。
"json": 返回 JSON 數據 。
"text": 返回純文本字符串
•data：對象格式。向后台發送一個對象，表示傳遞的數據。
常用於type為post的請求方式。
如果type為get,可以使用？直接追加載URL后面。
•error:請求失敗時的回調函數
•statusCode:接受一個對象，對象的鍵值對是status狀態碼和對應的回調函數，
表示當請求狀態碼是對應數字時，執行具體的操作函數.
404 - 頁面沒有找到！
403 - 服務器收到請求，但是拒絕提供服務！
200 - 請求成功！
500 - 內部服務器錯誤！
503 - 服務器當前不能處理客戶端的請求，一段時間后可能恢復正常
301 - 資源（網頁等）被永久轉移到其它URL！
125、闡述一下異步加載。
1. 異步加載的方案： 動態插入 script 標簽
2. 通過 ajax 去獲取 js 代碼，然后通過 eval 執行
3. script 標簽上添加 defer 或者 async 屬性
4. 創建並插入 iframe，讓它異步執行 js
126、請解釋一下 JavaScript 的同源策略。
所謂同源指的是：協議，域名，端口相同，同源策略是一種安全協議，指一段腳本只能讀取來自同一來源的窗口和文檔的屬性。
在前后台進行數據交互時，兩個文件必須處於同一域名同一端口號同一協議名之下，否則跨域請求
127、ajax的缺點
1、ajax不支持瀏覽器back按鈕。
2、安全問題 AJAX暴露了與服務器交互的細節。
3、對搜索引擎的支持比較弱。
4、破壞了程序的異常機制。
128、解釋jsonp的原理，以及為什么不是真正的ajax
Jsonp並不是一種數據格式，而json是一種數據格式，jsonp是用來解決跨域獲取數據的一種解決方案，具體是通過動態創建script標簽，然后通過標簽的src屬性獲取js文件中的js腳本，該腳本的內容是一個函數調用，參數就是服務器返回的數據，為了處理這些返回的數據，需要事先在頁面定義好回調函數，本質上使用的並不是ajax技術
129、什么是Ajax和JSON，它們的優缺點。
Ajax是全稱是asynchronous JavaScript andXML，即異步JavaScript和xml，用於在Web頁面中實現異步數據交互，實現頁面局部刷新。
優點：可以使得頁面不重載全部內容的情況下加載局部內容，降低數據傳輸量，避免用戶不斷刷新或者跳轉頁面，提高用戶體驗
缺點：對搜索引擎不友好；要實現ajax下的前后退功能成本較大；可能造成請求數據的增加跨域問題限制；
JSON是一種輕量級的數據交換格式，ECMA的一個子集
優點：輕量級、易於人的閱讀和編寫，便於機器（JavaScript）解析，支持復合數據類型（數組、對象、字符串、數字）
130、分別介紹下javascript的本地對象，內置對象和宿主對象
本地對象為獨立於宿主環境的ECMAScript提供的對象，包括Array Object RegExp等可以new實例化的對象
內置對象為Gload，Math 等不可以實例化的(他們也是本地對象，內置對象是本地對象的一個子集)
宿主對象為所有的非本地對象，所有的BOM和DOM對象都是宿主對象，如瀏覽器自帶的document,window 等對象。
圖解：
131、為什么利用多個域名來存儲網站資源會更有效？
1、速度保證：
確保用戶在不同地區能用最快的速度打開網站。
2、安全保障：
其中某個域名崩潰用戶也能通過其他域名問網站，
3、服務端：
並且不同的資源放到不同的服務器上有利於減輕單台服務器的壓力。
132、請說出三種減低頁面加載時間的方法
1、壓縮css、js文件
2、合並js、css文件，減少http請求
3、外部js、css文件放在最底下
4、減少dom操作，盡可能用變量替代不必要的dom操作
5、優化圖片加載的方式。
133、 知道什么是webkit么? 知道怎么用瀏覽器的各種工具來調試和debug代碼么?
Webkit是瀏覽器引擎，包括html渲染和js解析功能，手機瀏覽器的主流內核，與之相對應的引擎有Gecko（Mozilla Firefox 等使用）和Trident（也稱MSHTML，IE 使用）。
對於瀏覽器的調試工具要熟練使用，主要是頁面結構分析，后台請求信息查看，js調試工具使用，熟練使用這些工具可以快速提高解決問題的效率.
1、Elements 功能標簽頁：用來查看，修改頁面上的元素，包括DOM標簽，以及css樣式的查看，修改，還有相關盒模型的圖形信息
2、Console控制台：用於打印和輸出相關的命令信息，常用於JS錯誤調試。
3、Sources js資源頁面：這個頁面內我們可以找到當然瀏覽器頁面中的js 源文件，方便我們查看和調試(打斷點調試)
4、.Network 網絡請求標簽頁：可以看到所有的資源請求，包括網絡請求，圖片資源，html,css，js文件等請求，可以根據需求篩選請求項，一般多用於網絡請求的查看和分析，分析后端接口是否正確傳輸，獲取的數據是否准確，請求頭，請求參數的查看
5、.Timeline標簽頁可以顯示JS執行時間、頁面元素渲染時間，不做過多介紹
6、.Profiles標簽頁可以查看CPU執行時間與內存占用，不做過多介紹
7、.Resources標簽頁會列出所有的資源，以及HTML5的Database和LocalStore等，你可以對存儲的內容編輯和刪除 不做過多介紹
8、.Security標簽頁 可以告訴你這個網站的安全性，查看有效的證書等
9、.Audits標簽頁 可以幫你分析頁面性能，有助於優化前端頁面，分析后得到的報告
134、簡述一下 Handlebars 的基本用法？
Handlebars 是 JavaScript 一個語義模板庫，通過對view和data的分離來快速構建Web模板。
135、詳解在AngualrJS中使用$http進行數據請求的方法？
$http({ method: 'GET', /*請求的方法*/ url: 'h51701.json' /*請求的地址*/ }).then(function(obj){ /*請求成功的回調函數*/ alert("請求成功！"); $scope.data = obj.data; },function(){ /*請求失敗的回調函數*/ alert("請求失敗！"); }); [簡寫方式] 可以直接簡寫為get或者post方式： $http.get('/someUrl').then(successCallback, errorCallback); $http.post('/someUrl', data).then(successCallback, errorCallback);
136、如何讓一個標簽塊級顯示？
1、給該元素添加浮動屬性
2、給該元素添加絕對定位屬性
3、 給父元素添加display:flex屬性設置為彈性盒子（彈性盒子內部全是塊級標簽）
4、給其本身添加display:block/ inlineblock屬性
137、利用原生JS實現Ajax請求后台數據的步驟？
// 第一步： 獲得XMLHttpRequest對象 var ajax = new XMLHttpRequest(); // 第二步： 設置狀態監聽函數 ajax.onreadystatechange = function(){ console.log(ajax.readyState); console.log(ajax.status); // 第五步：在監聽函數中，判斷readyState=4 && status=200表示請求成功 if(ajax.readyState==4 && ajax.status==200){ // 第六步： 使用responseText、responseXML接受響應數據，並使用原生JS操作DOM進行顯示 console.log(ajax.responseText); console.log(ajax.responseXML);// 返回不是XML，顯示null console.log(JSON.parse(ajax.responseText)); console.log(eval("("+ajax.responseText+")")); } } // 第三步： open一個鏈接 ajax.open("GET","h51701.json",false);//true異步請求，false同步 // 第四步： send一個請求。 可以發送對象和字符串，不需要傳遞數據發送null ajax.send(null);
138、實現Ajax的跨域請求有哪些方法？
【跨域請求處理】
由於JS中存在同源策略，當請求不同協議名，不同端口號，不同主機名下面的文件時，將會違背同源策略，無法請求成功！需要進行跨域處理！
1、后台PHP進行設置，在后台請求的PHP文件中，寫入一條header:
header( "Access-Control-Allow-Origin:*");
表示允許哪些域名請求這個PHP文件，*表示所有的域名都允許。
2、使用src屬性+JSONP實現跨域
① 擁有src屬性的標簽自帶跨域功能，所以可以使用<script>標簽的src屬性請求后台屬性。
<script type="text/javascript" src="http://127.0.0.1/json.php"> </ script>
② 由於src在加載數據成功之后，會直接將加載內容放入到script標簽中，
所以后台直接返回JSON字符串將不能在script標簽中解析。
因此，后台應該返回給前台一個回調函數名，並將JSON字符串作為參數傳入，
后台PHP文件中返回 ： echo "callBack($str)";
③ 前台接收到返回的回調函數，將直接在script標簽中調用。因此需要聲明這樣的一個回調函數，作為請求成功的回調函數。
* function callBack(data) {
alert("請求成功！");
}
3、jQuery的Ajax實現JSONP
① 在Ajax請求時設置dataType:"jsonp"
② 后台返回時，依然需要返回回調函數，但是，在ajax發送請求時，會默認使用get請求將回調函數名發給后台，
后台可以使用$_GET['callback']取出回到函數名。
echo "{$_GET['callback']}({$str})";
③ 后台返回之后，Ajax依然可以使用succes作為成功的回調函數：
success:function(data){
console.log(data);
}
當然后台也可以隨便返回一個回調函數名： echo "callBack($json)";
前台只要請求成功就會自動調用這個函數。類似於上面的第2條的② ③ 步；
139、js中捕獲異常是啥？
Js中的異常捕獲用try{}catch(){} 結構進行捕獲。
將程序中可能出現異常錯誤的代碼，用try塊包裹，當代碼真正出現異常時，程序流將進入carch塊捕獲異常，try塊中從異常語句開始下面的代碼將不再執行，轉而執行catch塊中的代碼！！！！
JS
中常見的異常類型：
EvalError: raised when an error occurs executing code in eval() RangeError: raised when a numeric variable or parameter is outside of its valid range ReferenceError: raised when de-referencing an invalid reference SyntaxError: raised when a syntax error occurs while parsing code in eval() TypeError: raised when a variable or parameter is not a valid type URIError: raised when encodeURI() or decodeURI() are passed invalid parameters
所有異常都繼承自Error類
用戶可以自定義異常： throw new Error() ; throw new TypeError(“錯誤信息”);
Catch
塊的小括號中可以接受異常對象e, e.name表示錯誤名，e.message表示錯誤信息。
140、事件委派的原理是啥？事件冒泡嗎？
事件委派的原理就是事件冒泡！
當你點擊一個元素時，這個點擊事件是會冒泡的，事件依次從該元素向父級元素依次觸發，事件委托就是在父級元素上統一監聽和處理事件，而不是在具體的元素上，然后通過判斷事件源來確定是哪個元素觸發的。
這樣做的好處是：
我們不需要為每個元素添加事件，更節省資源；並且后來新增的元素直接可以同樣獲得事件，不需要再為其添加監聽。
141、前端代碼優化的方法？
1. 避免壞請求
4. 合並多個外部CSS文件
9、 利用瀏覽器緩存
142、詳細解釋一下關於偽數組與數組？（在Javascript中什么是偽數組？如何將偽數組轉化為標准數組？）
偽數組：
具有length屬性；
按索引方式存儲數據；
不具有數組的push()、pop()等方法；
var fakeArray01 = {0:'a',1:'b',length:2};//這是一個標准的偽數組對象
var arr01 = Array.prototype.slice.call(fakeArray01);
143、Javascript作用域鏈?
函數作用域的嵌套就組成了所謂的函數作用域鏈
144、什么是JSOPN？
jsonp：JSON with padding，是JSON的 一種“
使用模式”，可用於解決主流瀏覽器的跨域數據訪問的問題。
145、如何利用Ajxa實現跨域請求？
由於JS中存在同源策略，當請求不同協議名，不同端口號，不同主機名下面的文件時，將會違背同源策略，無法請求成功！需要進行跨域處理！
1、后台PHP進行設置，在后台請求的PHP文件中，寫入一條header:
header( "Access-Control-Allow-Origin:*");
表示允許哪些域名請求這個PHP文件，*表示所有的域名都允許。
2、使用src屬性+JSONP實現跨域
① 擁有src屬性的標簽自帶跨域功能，所以可以使用<script>標簽的src屬性請求后台屬性。
* <script type="text/javascript" src="http://127.0.0.1/json.php"> </ script>
② 由於src在加載數據成功之后，會直接將加載內容放入到script標簽中，
* 所以后台直接返回JSON字符串將不能在script標簽中解析。
* 因此，后台應該返回給前台一個回調函數名，並將JSON字符串作為參數傳入，
后台PHP文件中返回 ： echo "callBack($str)";
③ 前台接收到返回的回調函數，將直接在script標簽中調用。因此需要聲明這樣的一個回調函數，作為請求成功的回調函數。
* function callBack(data) {
alert("請求成功！");
}
3、利用jQuery的Ajax實現JSONP
① 在Ajax請求時設置dataType:"jsonp"
② 后台返回時，依然需要返回回調函數，但是，在ajax發送請求時，會默認使用get請求將回調函數名發給后台，
后台可以使用$_GET['callback']取出回到函數名。
echo "{$_GET['callback']}({$str})";
③ 后台返回之后，Ajax依然可以使用succes作為成功的回調函數：
success:function(data){
console.log(data);
}
當然后台也可以隨便返回一個回調函數名： echo "callBack($json)";
前台只要請求成功就會自動調用這個函數。類似於上面的第2條的② ③ 步；
146、 JavaScript window.onload 事件和 jQuery ready 函數有何不同？
1.執行時間
window.onload必須等到頁面內包括圖片的所有元素加載完畢后才能執行。
$(document).ready()是DOM結構繪制完畢后就執行，不必等到加載完畢。
2.編寫個數不同
window.onload不能同時編寫多個，如果有多個window.onload方法，只會執行一個
$(document).ready()可以同時編寫多個，並且都可以得到執行
3.簡化寫法
window.onload沒有簡化寫法
$(document).ready(function(){})可以簡寫成$(function(){});
147、$(this) 和 this 關鍵字在 jQuery 中有何不同?
1、this表示javascript的
dom對象
2、$(this)表示把
dom對象轉換為jquery對象
3、jquery包的方法只能由jquery對象調用，不能用javascript的
Dom對象使用
$("input").click(function(){
//這里的this表示被點擊的輸入框對象,可以使用javascript對該對象進行操作
var value=this.value;
//jquery對象與
dom對象取值方法不一樣，要用jquery方法必須使用$(dom對象)轉換
var val=$(this).val();
）}
148、簡單介紹下JavaScript中的作用域與變量聲明提升？
1、一個變量的作用域表示這個變量存在的上下文。一個變量的作用域表示這個變量存在的上下文。javascript有擁有函數級別的作用域，也就是說，在一個函數內定義的變量只能在函數內部訪問或者這個函數內部的函數訪問（閉包除外）每一個在函數外部聲明或者定義的變量都是一個全局對象，所以這個變量可以在任何地方被使用。
2、變量聲明提升就是在函數內部不用var 聲明的一個變量，想要訪問的時候，會在當前函數中尋找，發現當前函數中沒有，繼續往上層函數找，一直到全局作用下還沒有找到，就會將這個變量在全局范圍內進行聲明。
149、jquery.extend 與 jquery.fn.extend的區別？
jQuery為開發插件提拱了兩個方法，分別是：
jQuery.fn.extend();
jQuery.extend();
jquery.extend：用於聲明全局插件/方法。聲明插件/方法使用$.func();直接調用
query.fn.extend：用於聲明局部插件/方法。聲明插件/方法使用$(“選擇器”).func();
150、常見的瀏覽器內核有哪些？
1，使用Trident的是internet explorer，國產的絕大部分瀏覽器。Trident是就是
ie內核
2，使用Gecko的是Mozilla Firefox，使用 Gecko 內核的瀏覽器也有不少，如 Netscape MozillaSuite/SeaMonkey 等
3，使用Presto的是opera，這是目前公認網頁瀏覽速度最快的
瀏覽器內核
4，使用WebKit的有
蘋果的safari，谷歌的chrome，還有國產的大部分雙核瀏覽器其中一核就是WebKit
151、margin和padding分別適合什么場景使用？
margin是用來隔開元素與元素的間距；padding是用來隔開元素與內容的間隔。 margin用於布局分開元素使元素與元素互不相干； padding用於元素與內容之間的間隔，讓內容（文字）與（包裹）元素之間有一段
152、::before 和 :after中雙冒號和單冒號 有什么區別？解釋一下這2個偽元素的作用。
單冒號(:)用於CSS3偽類，雙冒號(::)用於CSS3偽元素。（偽元素由雙冒號和偽元素名稱組成）
雙冒號是在當前規范中引入的，用於區分偽類和偽元素。不過瀏覽器需要同時支持舊的已經存在的偽元素寫法，
比如:first-line、:first-letter、:before、:after等，
而新的在CSS3中引入的偽元素則不允許再支持舊的單冒號的寫法。 想讓插入的內容出現在其它內容前，使用::before，否者，使用::after；
在代碼順序上，::after生成的內容也比::before生成的內容靠后。
如果按堆棧視角，::after生成的內容會在::before生成的內容之上
153、 li與li之間（display:inline-block）有看不見的空白間隔是什么原因引起的？有什么解決辦法？
瀏覽器的默認行為是把inline元素間的空白字符（空格換行tab）渲染成一個空格，
154、解釋一下JavaScript中的this指針、閉包、作用域？
This指向：JS函數中的this，永遠指向函數調用語句所在的對象(誰調用函數，this指向誰)。(2分)
閉包： 在函數中，寫一個子函數。內層函數可以訪問外層函數中的變量。(2分)
作用域： 變量生效的范圍稱為作用域。JS中只有全局作用域和函數作用域。(2分)
155、使用jQuery操作元素的屬性attr()方法和val()有什么區別?
Attr():用於讀取或者設置元素的屬性；
Val(): 用於讀取或者設置表單元素的value；
156、JavaScript怎樣創建節點、刪除節點、替換節點、復制節點？
創建節點： .creatElement();
刪除節點： .removeChild();
替換節點： .replaceChild();
復制節點： .cloneNode(true/false);
157、CSS中的link和@import有什么區別？常用哪種？
① link屬於標准的HTML標簽，而@import不是標准標簽；
② link可以兼容所有低版本瀏覽器，而@import只在CSS2之后能用；
③ link是將兩個文件鏈接起來，起橋梁作用； 而@import相當於將CSS文件復制到HTML文件中；
④ link會在HTML文件邊加載的過程中，邊鏈接CSS文件；
@import會在HTML文件全部加載完以后，再導入CSS文件；