【持續更新】JavaScript常見面試題整理
【重點提早說】這篇博客裏的問題涉及到了JS中常見的的基礎知識點，也是面試中常見的一些問題，建議初入職場的園友Mark收藏，本文會持續更新~
一、 引入JS的三種方式
一、在HTML標籤中直接使用，直接內嵌JS（可是不提倡使用）；
>>>不符合W3C關於內容和行爲分離的要求；
二、在HTML頁面中使用<scrip> </script>標籤包裹JS代碼；
>>>script標籤能夠放到頁面的各類位置；
三、引入外部的JS文件使用<script> </script>標籤；
二、 JS中的變量聲明
三、 JS中變量的數據類型
四、 經常使用的數值函數
parseInt()只能轉字符串，轉其餘的類型都是NAN；而Number（）能轉全部的數據類型；javascript
五、 運算符注意事項
六、 判斷水仙花數
七、 If結構，循環結構，支持的判斷結果：
八、 循環控制語句：
九、 斐波那契數列:1,1,2,3,5,8,13,21……
十、 JS中函數的調用方式/事件的綁定方式
十一、 window對象的經常使用方法
十二、 DOM操做的相關方法
1三、 鍵盤事件&肯定鍵盤按鍵
1四、 DOM2 兼容寫法：
1五、 事件冒泡&事件捕獲&阻止默認事件
1六、 數組經常使用方法：
1七、 引用數據類型&基本數據類型：
1八、 Number類經常使用方法：
1九、 String類經常使用方法：
20、 Date類：
2一、 楊輝三角：
2二、 正則表達式聲明：
2三、 正則表達式經常使用規則：
2四、 正則中的test與exec方法：
2五、 foreach與each的區別？
forEach是js中的方法（針對數組），而each是jquery中的方法（針對jquery對象，即$( )；
1.forEach方法：以下圖所示
輸出結果：php
2.each方法：以下圖所示css
輸出結果：
2六、document load 和document ready的區別
Document.onload
是在結構和樣式加載完才執行js
window.onload
：不只僅要在結構和樣式加載完，還要執行完全部的樣式、圖片這些資源文件，所有加載完纔會觸發window.onload事件
Document.ready原生種沒有這個方法，jquery中有 $().ready(function)
2七、什麼是CSS Hack？怎麼表示？
CSS hack因爲不一樣廠商的
瀏覽器，好比Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一廠商的瀏覽器的不一樣版本，如IE6和IE7，對CSS的解析認識不徹底同樣，所以會致使生成的頁面效果不同，得不到咱們所須要的頁面效果。 這個時候咱們就須要針對不一樣的瀏覽器去寫不一樣的CSS，讓它可以同時兼容不一樣的瀏覽器，能在不一樣的瀏覽器中也能獲得咱們想要的頁面效果。
簡單的說，CSS hack的目的就是使你的CSS代碼兼容不一樣的瀏覽器。固然，咱們也能夠反過來利用CSS hack爲不一樣版本的瀏覽器定製編寫不一樣的CSS效果。
方式一 條件註釋法 方法二 類內屬性前綴法 方式三：選擇器前綴法
2八、Javascript中callee和caller的做用？
arguments.callee：得到當前函數的引用
caller是返回一個對函數的引用，該函數調用了當前函數；
callee是返回正在被執行的function函數，也就是所指定的function對象的正文。
2九、簡述建立函數的幾種方式
第一種（函數聲明）：
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內元素的加載
3一、iframe的優缺點？
優勢：
1. 解決加載緩慢的第三方內容如圖標和廣告等的加載問題
2. Security sandbox安全沙盒
3. 並行加載腳本
缺點：
1. iframe會阻塞主頁面的Onload事件
2. 即便內容爲空，加載也須要時間
3. 沒有語意
3二、請你談談Cookie的弊端？
缺點：
1.`Cookie`數量和長度的限制。
每一個domain最多隻能有20條cookie，每一個cookie長度不能超過4KB，不然會被截掉。
2.安全性問題。
若是cookie被人攔截了，那人就能夠取得全部的session信息。即便加密也與事無補，由於攔截者並不須要知道cookie的意義，他只要原樣轉發cookie就能夠達到目的了。
3.有些狀態不可能保存在客戶端。
例如，爲了防止重複提交表單，咱們須要在服務器端保存一個計數器。若是咱們把這個計數器保存在客戶端，那麼它起不到任何做用。
3三、js延遲加載的方式有哪些？
1. defer和async
2. 動態建立DOM方式（建立script，插入到DOM中，加載完畢後callBack）
3. 按需異步載入js
3四、documen.write和 innerHTML 的區別？
document.write 只能重繪整個頁面
innerHTML 能夠重繪頁面的一部分
3五、哪些操做會形成內存泄漏？
內存泄漏指任何對象在您再也不擁有或須要它以後仍然存在。
垃圾回收器按期掃描對象，並計算引用了每一個對象的其餘對象的數量。若是一個對象的引用數量爲 0（沒有其餘對象引用過該對象），或對該對象的唯一引用是循環的，那麼該對象的內存便可回收。
1. setTimeout 的第一個參數使用字符串而非函數的話，會引起內存泄漏。
2. 閉包
3. 控制檯日誌
4. 循環（在兩個對象彼此引用且彼此保留時，就會產生一個循環）
3六、JS是一門什麼類型的語言?
JS能夠模擬實現繼承和封裝，可是不能模擬實現多態，故js是基於事件的，基於對象的輕量級腳本語言。
3七、語言有哪幾種類型？各有什麼特色？
一、語言的分類：
①、面向機器：彙編語言。
②、面向過程：C語言
③、面向對象：Java、C++、PHP等。
二、面向過程與面向對象：
①、面向過程：專一於如何去解決一個問題的過程步驟，編程的特色是由一個個的函數去實現每一步的過程步驟，沒有類和對象的概念。
②、面向對象：專一於由哪個對象來解決這個問題，編程特色是出現了一個個的類，從類中拿到對象
【面向對象的三大特徵】 繼承、封裝、多態
【區別】
對於調用者來講，面向過程須要調用者本身去實現各類函數，
而面向對象，只須要告訴調用者對象中具體方法的功能，不須要調用者去了解方法中的實現細節。
3八、JavaScript中類和對象的關係：
類是抽象的，對象是具體的
類是對象的抽象化，對象是類的具體化；
★類是一個抽象的概念，只能說類有屬性和方法，可是不能給屬性和方法賦具體的值。
例如:人類有身高，可是不能說出具體數值
★對象是一個具體的個例，是將類中的屬性進行具體賦值而來的個體；
例如：張三是人類中的一個個體，身高180cm。
3九、實現繼承的三種方式？
一、使用call bind apply來實現繼承。
二、經過擴展object來實現繼承。
三、使用原型實現繼承。
40、 什麼叫封裝？有什麼方法和特色？
① 方法的封裝： 將類內部的函數進行私有化處理，不對外提供調用接口，沒法在類外部使用的方法，稱爲私有方法，即方法的封裝。
② 屬性的封裝： 將類中的屬性進行私有化處理，對外不能直接使用對象名訪問(私有屬性)。 同時，須要提供專門用於設置和讀取私有屬性的set/get方法，讓外部使用咱們提供的方法，對屬性進行操做。 這就叫屬性的封裝。
封裝不是拒絕訪問，而是限制訪問。 要求調用者，必須使用咱們提供的set/get方法進行屬性的操做，而不是直接拒絕操做。
所以，單純的屬性私有化，不能稱爲封裝！必需要私有化以後，提供對應的set/get方法。
4一、 原生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 () {}; √
4二、JS經常使用的內置對象有哪些？它們各自的一些方法有哪些？：
一、Boolean類、Number類:、String類、Date日期類、
二、經常使用方法：
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日期類：
一、new Date();返回當前最新時間；
new Date("2017,08,29,12:33:29") 返回指定時間；
4三、什麼是Jquery中的文檔就緒函數？
文檔就緒函數防止文檔在未徹底加載以前，運行JQuery代碼；
$(document).ready(function() {
//JQuery代碼
})；
簡寫形式以下：
$(function(){});
[文檔就緒函數&window.onload的區別]
① window.onload必須等到網頁中的全部內容(包括圖片視頻)加載完成後才能執行代碼；
文檔就緒函數只須要在 網頁DOM結構加載完成以後，就能夠執行代碼；
② window.onload只能寫一個，寫多個以後只會執行最後一個；
文檔就緒函數能夠寫多個，並且不會覆蓋。
4四、經常使用的CSS的預處理器有哪些？
less
sass 經常使用的編譯方式
它們之間的區別：
SCSS中的嵌套：選擇器嵌套 屬性嵌套 僞類嵌套
混合宏、繼承、佔位符：
① 混合宏:使用@mixin聲明混合宏，在其餘選擇器中使用@include調用混合宏
② 繼承 ：聲明一個普通的class，在其餘的選擇器中使用extend 繼承這個class；
③ 佔位符 ：使用%聲明%佔位符，在其餘選擇器中使用@extend 繼承佔位符；
4五、簡述下JS中的事件分類
一、鼠標事件： click/dblclick/onmouseon/onmouseover.....
二、HTML事件： onload/onscroll/onsubmit/onchange/onfocus....
三、鍵盤事件：
keydown:鍵盤按下時觸發
keypress:鍵盤按住時觸發
keyup:鍵盤擡起時觸發
【肯定觸發的按鍵】
① 在觸發的函數中傳入一個參數e，表示鍵盤事件；
② 使用e.keyCode，取到按鍵的Ascii碼值，進而肯定觸發按鍵；
③ 全部瀏覽器的兼容寫法(通常並不須要)
4六、淺談JavaScript的優勢和缺點：
優勢：
- 性能：因爲JavaScript運行在客戶端，節省了web服務器的請求時間和帶寬
- 輕量級的腳本語言，比較容易學習
- 運行在用戶機器上，運行結果和處理相對比較快。
- 可使用第三方附加組件來檢查代碼片斷。
缺點：
- 安全問題：因爲JavaScript在客戶端運行，可能被用於黑客目的。
- 渲染問題：在不一樣瀏覽器中的處理結果可能不一樣。
4七、淺談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庫，可能會發生衝突。
4八、淺談angular優缺點
簡介：angularjs是一個javascript框架。經過script腳本引入，他是一個用Javascript編寫的庫。angularjs經過指令擴展了HTML，經過表達式綁定數據到HTML中。AngularJS主要考慮的是構建CRUD（增刪改查）應用。幸運的是，至少90%的WEB應用都是CRUD應用。
優勢：
1. 改變操做dom的方式
將傳統的JQuery的先選擇元素，在操做的方式改變成了直接對於元素自己的操做。
這依賴於強大的Html Parser的能力和directive靈活。
2. 後端MVC前端化
3. 數據操做
缺點：
一、框架略笨重
二、不適合頁面複雜的網站類型開發：
內容網站，須要SEO的。(SEO目前也有了prerender解決方案) https//
prerender.io
交互頻繁的，如遊戲之類交互體驗網站。
4九、什麼叫作事件委派？有什麼做用？（優勢）
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的動畫
一、 css的transition transition抓住了所設置變化屬性的起始態和完成態，經過設定的速度曲線來完成動畫。能夠涉及到各類變化的css屬性，默認爲all，則全部變化的屬性都會在出發時，以動畫的形式展示出來。
tips：transform是一種變化屬性，該屬性容許咱們對元素進行旋轉、縮放、移動或傾斜。能夠做爲transition中須要變化的屬性。
2.css3的animation屬性
使用animation屬性製做動畫能夠更加靈活的設置動畫幀，經過不一樣keyframe（動畫幀）的設置，實現不少優雅的效果，keyframe中的百分數是動畫完成總時間的比例。
animation是設置總的動畫效果，而keyframe中設置上相應的動畫名字，而後在keyframe中設置具體的動畫效果。
JS中的動畫
3.原生js動畫
原生js動畫利用js代碼，將動畫一步以函數的方式寫出來，能夠實現多種動畫樣式，並且能夠本身作兼容性處理，本身設立每一步的動畫效果，而且可以完成比較複雜的效果，可是代碼量很大。
5一、Jquery與jQuery UI 有啥區別？
*jQuery是一個js庫，主要提供的功能是選擇器，屬性修改和事件綁定等等。
*jQuery UI則是在jQuery的基礎上，利用jQuery的擴展性，設計的插件。
提供了一些經常使用的界面元素，諸如對話框、拖動行爲、改變大小行爲等等
5二、jquery 中如何將數組轉化爲json字符串，而後再轉化回來？
jQuery中沒有提供這個功能，因此你須要先編寫兩個jQuery的擴展：
$.fn.stringifyArray = function(array) { return JSON.stringify(array) } $.fn.parseArray = function(array) { return JSON.parse(array) } 而後調用： $("").stringifyArray(array)
5三、函數實現阻止冒泡函數的功能？
5四、什麼是閉包？ 寫一個簡單的閉包？
個人理解是，閉包就是可以讀取其餘函數內部變量的函數。在本質上，閉包就是將函數內部和函數外部鏈接起來的一座橋樑。
JS中提供了一種閉包的概念：在函數中，定義一個子函數，子函數能夠訪問父函數的私有變量，
能夠在子函數中進行操做，最後將子函數經過return返回。
閉包的做用:
① 能夠在函數外部訪問函數的私有變量；
② 讓函數內部的變量，能夠始終存在於內存中，不會在函數調用完成以後當即釋放！
5五、call和apply的區別是什麼？
參數形式不一樣，call(obj, pra, pra)後面是單個參數。apply(obj, [args])後面是數組。
5六、爲何不能定義1px左右的div容器？
IE6下這個問題是由於默認的行高形成的，解決的方法也有不少，例如：
overflow:hidden | zoom:0.08 | line-height:1px
5七、bind(), live(), delegate()的區別
bind： 綁定事件，對新添加的事件不起做用，方法用於將一個處理程序附加到每一個匹配元素的事件上並返回jQuery對象。
live： 方法將一個事件處理程序附加到與當前選擇器匹配的全部元素（包含現有的或未來添加的）的指定事件上並返回jQuery對象。
delegate： 方法基於一組特定的根元素將處理程序附加到匹配選擇器的全部元素（現有的或未來的）的一個或多個事件上。
5八、簡述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不支持。
5九、你如何優化本身的代碼？
一、代碼重用
二、避免全局變量（命名空間，封閉空間，模塊化mvc..）
三、拆分函數避免函數過於臃腫：單一職責原則
四、適當的註釋，尤爲是一些複雜的業務邏輯或者是計算邏輯，都應該寫出這個業務邏輯的具體過程
內存管理，尤爲是閉包中的變量釋放
60、使用js實現這樣的效果：在文本域裏輸入文字時，當按下enter鍵時不換行，而是替換成「{{enter}}」,(只須要考慮在行尾按下enter鍵的狀況).
textarea.
onkeydown=function(e){
e.preventDefault();//
爲了阻止enter鍵的默認換行效果
if(e.keycode==」enter
鍵碼」){
testarea.value+=」{{enter}}」;
}
6一、請簡要描述web前端性能須要考慮哪方面，你的優化思路是什麼？html
參見雅虎14web優化規則
減小http請求：
1、小圖弄成大圖，
2、合理的設置緩存
3
、資源合併、壓縮
將外部的js文件置底
6二、簡述readyonly與disabled的區別
readonly
只針對input(text / password)和textarea有效，
而disabled對於全部的表單元素都有效，當表單元素在使用了disabled後，當咱們將表單以POST或GET的方式提交的話，這個元素的值不會被傳遞出去，而readonly會將該值傳遞出去
6三、請儘量詳盡的解釋ajax的工做原理
思路：先解釋異步，再解釋ajax如何使用
Ajax的原理簡單來講經過XmlHttpRequest對象來向服務器發異步請求，從服務器得到數據，而後用javascript來操做DOM而更新頁面。這其中最關鍵的一步就是從服務器得到請求數據。要清楚這個過程和原理，咱們必須對 XMLHttpRequest有所瞭解。
XMLHttpRequest是ajax的核心機制，它是在IE5中首先引入的，是一種支持異步請求的技術。簡單的說，也就是javascript能夠及時向服務器提出請求和處理響應，而不阻塞用戶。達到無刷新的效果。
6四、爲何擴展javascript內置對象不是好的作法？
由於擴展內置對象會影響整個程序中所使用到的該內置對象的原型屬性
6五、瀏覽器標準模式和怪異模式之間的區別是什麼？
標準模式是指，瀏覽器按W3C標準解析執行代碼；
怪異模式則是使用瀏覽器本身的方式解析執行代碼，由於不一樣瀏覽器解析執行的方式不同，因此咱們稱之爲怪異模式。
瀏覽器解析時到底使用標準模式仍是怪異模式，與你網頁中的DTD聲明直接相關，DTD聲明定義了標準文檔的類型（標準模式解析）文檔類型，會使瀏覽器使用相應的方式加載網頁並顯示，忽略DTD聲明,將使網頁進入怪異模式。
6六、若是設計中使用了非標準的字體，你該如何去實現？
先經過font-face定義字體，再引用
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */
}
6七、簡述.trigger與.triggerHandler的區別
.trigger()自動 觸發某元素事件；
第一個參數：是須要觸發的事件類型；
第二個參數：(可選)數組格式，表示傳遞給事件函數的參數；
>>>傳遞進來的參數，能夠在事件函數中，定義形參進行獲取
(形參第一個必須是event事件，因此從第二個開始爲所傳遞的參數！)
>>> 也能夠直接在函數中，使用arguements對象數組，讀取參數;
.triggerHandler()：功能同上，區別以下：
① .triggerHandler()不能觸發瀏覽器默認的HTML事件，如submit等；
② .trigger()能夠觸發頁面中全部匹配元素的事件；
而.triggerHandler()只能觸發第一個匹配元素的事件；
③ .trigger()的返回值，返回的是調用當前函數的對象，符合JQuery的可鏈式語法；
.triggerHandler()返回的是事件函數的返回值，若是事件函數沒有返回值，則返回的是Undefined；
6九、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，也能經過簡單的循環實現操做；
7一、詳細解釋下JS中的this指向問題
誰最終調用函數，this就指向誰！
this指向的規律 ：(跟函數的調用方式息息相關！)
① 經過 【 函數名() 】 調用的，this永遠指向window；
② 經過 【 對象.方法 】調用的，this永遠指向對象。obj.func();
③ 函數做爲數組中的 一個元素，經過數組下標調用的 【 arr[i]() 】，this指向數組arr。
④ 函數做爲window內置函數的回調函數使用，this指向widow；
setTimeout() setInterval()等
⑤ 函數做爲構造函數，使用new關鍵字調用，this指向新new出的對象。
7二、BootStrap的優勢和缺點:
優勢：
流媒體網格佈局
響應式設計
自定義表單元素
頁面排版
JavaScript交互性
跨瀏覽器兼容性
BT柵格系統的本質就是經過CSS3的媒體查詢實現的
BootStrap的缺點:
兼容性可能不太好
7三、什麼是漸進加強（progressive enhancement）、優雅降級（graceful degradation）呢？
漸進加強（progressive enhancement）：針對低版本瀏覽器進行構建頁面，保證最基本的功能，而後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。（
從被全部瀏覽器支持的基本功能開始，逐步地添加那些只有新式瀏覽器才支持的功能，向頁面添加無害於基礎瀏覽器的額外樣式和功能。當瀏覽器支持時，它們會自動地呈現出來併發揮做用。）
優雅降級（graceful degradation）：一開始就構建完整的功能，而後再針對低版本瀏覽器進行兼容。（
Web站點在全部新式瀏覽器中都能正常工做，若是用戶使用的是老式瀏覽器，則代碼會檢查以確認它們是否能正常工做。因爲IE獨特的盒模型佈局問題，針對不一樣版本的IE的hack實踐過優雅降級了，爲那些沒法支持功能的瀏覽器增長候選方案，使之在舊式瀏覽器上以某種形式降級體驗卻不至於徹底失效。）
區別：優雅降級是從複雜的現狀開始，並試圖減小用戶體驗的供給，而漸進加強則是從一個很是基礎的、可以起做用的版本開始，並不斷擴充，以適應將來環境的須要。
7四、常見的瀏覽器狀態碼
200--請求成功！
500--內部服務器錯誤！
404--請求失敗！
7五、詳述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；
7六、IE和DOM事件流的區別
IE9之前：attachEvent(「onclick」)、detachEvent(「onclick」)
IE9開始跟DOM事件流是同樣的，都是addEventListener
7七、IE跟DOM事件流有什麼區別
① 闡述事件綁定方式：
IE9之前：attachEvent(「onclick」)、detachEvent(「onclick」)
IE9開始:跟DOM事件流是同樣的，都是addEventListener
② 這兩種綁定方式的區別：
寫法上的區別：
attachEvent兩個參數、事件帶on
addEventListener 三個參數、事件不帶on、true/false表示捕獲/冒泡
功能上的區別：
attachEvent綁定的事件所有冒泡、addEventListener根據第三個參數是true仍是false決定冒泡仍是捕獲。
③ 事件冒泡和事件捕獲。
冒泡： 當觸發一個事件時，會從當前節點開始，依次觸發其祖先節點的同類型事件。
捕獲： 從根節點開始，依次觸發其祖先節點同類型事件，直到節點自身。
7八、IE和標準下有哪些兼容性的寫法？
一、獲取事件對象(事件因子)： ev = e || window.event;
二、DOM2
添加事件： if(dom.attachEvent){
Dom. attachEvent(「onclick」,function);
}else{
Dom.
addEventListener(「click」,function);
}
三、取消事件冒泡： if (e.stopPropagation) {
e.stopPropagation(); //IE之外
} else {
e.cancelBubble = true; //IE8以前
}
四、取消默認事件：if (e.preventDefault) {
e.preventDefault(); //IE之外
} else {
e.returnValue = false; //IE
}
7九、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循環中嵌套自執行函數。 原理。。。。。
8一、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
8二、js中的保留字是什麼？
程序中預約義的關鍵字(函數名、類名、屬性名、方法名等標識符)都是js中的保留字。 這些保留字，不容許用戶再次聲明爲變量、方法、函數
保留字在編譯器中會變色。
8三、工廠方式建立js對象是啥方式 （JS中建立對象的多種方式）
① 字面量模式： var obj = {}
混合模式就是咱們所說的將屬性添加到成員屬性(構造函數模式)，將方法添加到原型方法（原型模式）
8四、js延遲加載的方式有哪些？
+
將JS代碼放在文檔最後也是延遲加載的方式之一。
8五、documen.write和 innerHTML 的區別？
documen.write 是直接在整個文檔中，寫入代碼。會覆蓋掉其餘已有代碼。
innerHTML 是選中一個節點後，修改節點裏面的代碼，隻影響當前節點。
8六、解釋jsonp的原理，以及爲何不是真正的ajax
後續講解
8七、javascript 中的垃圾回收機制？閉包中的內存釋放？
Js
中的垃圾回收機制，函數中的變量，會在函數執行完成後，被回收處理。
可是，若是函數中使用了閉包，那麼函數中的變量將始終被內部的函數持有，而不會在函數執行完成後釋放。
閉包的兩個重要做用：
① 可讓函數外部，可以訪問函數內部的變量。
② 讓函數內部的變量在函數執行完成後，不會被釋放，而始終保持在內存中
8八、哪些操做會形成內存泄漏
大量使用全局變量
大量使用閉包
清除DOM節點時，只清除節點，而沒有刪除事件
8九、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 標籤時，文檔的解析不會中止，其餘線程將下載腳本，待到文檔解析完成，腳本纔會執行。
9一、業界經常使用的優化WEB頁面加載速度的方法（能夠分別從頁面元素展示，請求鏈接，css,js,服務器等方面介紹）
9二、解釋什麼是sql注入，xss漏洞？
9三、解釋下這個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標籤。
9四、有這樣一個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}。
9五、如下哪一個單詞不屬於javascript保留字 B
A.with
B.parent
C.class
D.void
9六、 動態建立DOM方式（建立script，插入到DOM中，加載完畢後callBack）
9七、 按需異步載入js
9九、簡單的介紹下JS面向對象中的__proto__與prototype
一、prototype:函數的原型對象
① 只有函數纔有prototype，並且全部的函數必然有prototype!
② prototype自己也是一個對象！
③ prototype指向了當前函數所在的引用地址！
二、__proto__：對象的原型
① 只有對象纔有__proto__，並且全部的對象必有__proto__；
② __proto__也是一個對象，因此也有本身的__proto__，順着這條線向上找的順序，就是原型鏈。
③ 數組都是對象，也都有本身的__proto__；
三、實例化一個類，拿到對象的原理：
實例化一個類的時候，其實是將新對象的__proto__，指向構造函數所在的prototype；
也就是說：zhangsan.__proto__ ==Person.prototype √
四、全部對象的__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方式三：選擇器前綴法
10一、Require.js有什麼做用？
一、實現了文件的異步加載，避免網頁失去響應。
二、管理模塊之間的依賴性，便於代碼的編寫和維護。
10二、怎麼檢測一個對象是否是一個類的實例？
instanceof：A instanceof B 檢測一個對象(A)是否是一個類(B)的一個實例；
louver instanceof Person;√ louver是函數Person的實例化；
louver instanceof Object;√ 全部對象都是Object的一個實例；
Person instanceof Object;√ 函數自己也是一個對象；
constructor：返回當前對象的構造函數；
10三、zepto和jQuery的不一樣之處有哪些？
一、zepto不支持IE瀏覽器；
二、zepto增長了一些基本的觸摸事件：如tap，swip事件’
三、DOM操做的區別：添加ID時jQuery不會生效，而zepto會生效！
四、使用zepto時，load事件的處理函數會執行，使用jQuery時，load事件的處理函數不會執行。
五、事件委派的不一樣：
在zepto中，當a被點擊以後，一次性彈出內容爲a事件和b事件，可是在jQuery中只會觸發委託彈出a事件，再點擊一次纔會觸發b事件！
六、offse:zepto：返回left top width heigth
jQuery:只會返回left top
七、zepto沒法隱藏元素的寬高，jQuery能夠；
八、zepto不支持的選擇器：
① 基本僞類：first last eq(index)
② 內容僞類：contains(text) :empty :has(selector)
③ 可見性僞類：hidden visible
④ 屬性選擇器：[attribute = value]
⑤ 表單僞類：input :text :password :submit
⑥ 表單對象屬性：selected
10四、使用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
10五、一個頁面上有大量的圖片（大型電商網站），加載很慢，你有哪些方法優化這些圖片的加載，給用戶更好的體驗。
圖片懶加載，在頁面上的未可視區域能夠添加一個滾動條事件，判斷圖片位置與瀏覽器頂端的距離與頁面的距離，若是前者小於後者，優先加載。
若是爲幻燈片、相冊等，可使用圖片預加載技術，將當前展現圖片的前一張和後一張優先下載。
若是圖片爲css圖片，可使用CSSsprite，SVGsprite，Iconfont、Base64等技術。
若是圖片過大，可使用特殊編碼的圖片，加載時會先加載一張壓縮的特別厲害的縮略圖，以提升用戶體驗。
若是圖片展現區域小於圖片的真實大小，則因在服務器端根據業務須要先行進行圖片壓縮，圖片壓縮後大小與展現一致。
更換最新的圖片格式 谷歌的webp騰訊的tpg
合成雪碧圖
大圖分割加載
10六、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，單選框或複選框被選中。
10七、如何在 HTML5 頁面中嵌入音頻、視頻?
HTML 5 包含嵌入音頻文件的標準方式，支持的格式包括 MP三、Wav 和 Ogg：
<audio controls>
<source src="jamshed.mp3" type="audio/mpeg">
Your browser does'nt support audio embedding feature.
</audio>
和音頻同樣，HTML5 定義了嵌入視頻的標準方法，支持的格式包括：MP四、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>
10八、怎麼取到一個網址並轉化爲字符串格式存儲？
console.log(location.href);//返回當前完整路徑；
/*將js中的對象、數組，轉化*/
var str1 = JSON.stringify(jsonObj);
console.log(str1);
var obj = JSON.parse(str1);
console.log(obj);
10九、如何優化網頁加載速度？
1.減小css，js文件數量及大小(減小重複性代碼，代碼重複利用)，壓縮CSS和Js代碼
2.圖片的大小
3.把css樣式表放置頂部，把js放置頁面底部
4.減小http請求數
5.使用外部 Js 和 CSS
1十、知道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清除浮動。
1十一、簡述下web storage和cookie的區別
一、
Web Storage相對於cookie來講，擁有更大的容量儲存。
二、Cookie的大小是受限的，而且每次你請求一個新的頁面的時候Cookie都會被髮送過去，這樣無形 中浪費了帶寬。
三、cookie還須要指定做用域，不能夠跨域調用。
四、Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie須要前端開發者本身封裝setCookie，getCookie。
五、可是Cookie也是不能夠或缺的：Cookie的做用是與服務器進行交互，做爲HTTP規範的一部分而存在 ，而Web Storage僅僅是爲了在本地「存儲」數據而生。
1十二、爲何利用多個域名來存儲網站資源會更有效？
CDN緩存更方便
突破瀏覽器併發限制
節約cookie帶寬
節約主域名的鏈接數，優化頁面響應速度
防止沒必要要的安全問題
11三、HTML5 Canvas 元素有什麼用？
答：Canvas 元素用於在網頁上繪製圖形，該元素標籤強大之處在於能夠直接在 HTML 上進行圖形操做。
11五、請用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();
11六、如何消除一個數組裏面重復的元素？
方法一： 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);
11七、閉包：下面這個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); }
11八、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( ) 將數組轉換成一個字符串
11九、簡述remove和detach異同
* 一、相同點：
* ① 都會把當前標籤，以及當前標籤的全部子節點，所有刪除；
* ② 均可以在刪除時，把當前節點返回。並可使用變量接受返回的節點，以便後期恢復；
* 二、 不一樣點：
* 使用接受的節點，恢復原節點時。
* remove只能恢復節點的內容，可是事件綁定，不能再恢復；
* detach不但恢復節點的內容，還能再恢復 事件的綁定；
120、Ajax 是什麼? 如何建立一個Ajax？
Ajax並不算是一種新的技術，全稱是asynchronous javascript and xml，能夠說是已有技術的組合，主要用來實現客戶端與服務器端的異步通訊效果，實現頁面的局部刷新，帶來更好的用戶體驗；按需獲取數據，節約帶寬資源；早期的瀏覽器並不能原生支持ajax，可使用隱藏幀（iframe）方式變相實現異步效果，後來的瀏覽器提供了對ajax的原生支持
使用ajax原生方式發送請求主要經過XMLHttpRequest(標準瀏覽器)、ActiveXObject(IE瀏覽器)對象實現異步通訊效果
12一、舉例簡述同步和異步的區別?
同步：阻塞的
-張三叫李四去吃飯，李四一直忙得不停，張三一直等着，直到李四忙完兩我的一塊去吃飯
=瀏覽器向服務器請求數據，服務器比較忙，瀏覽器一直等着（頁面白屏），直到服務器返回數據，瀏覽器才能顯示頁面
異步：非阻塞的
-張三叫李四去吃飯，李四在忙，張三說了一聲而後本身就去吃飯了，李四忙完後本身去吃
=瀏覽器向服務器請求數據，服務器比較忙，瀏覽器能夠自如的幹原來的事情（顯示頁面），服務器返回數據的時候通知瀏覽器一聲，瀏覽器把返回的數據再渲染到頁面，局部更新
12二、如何解決跨域問題?
理解跨域的概念：協議、域名、端口都相同才同域，不然都是跨域
出於安全考慮，服務器不容許ajax跨域獲取數據，可是能夠跨域獲取文件內容，因此基於這一點，能夠動態建立script標籤，使用標籤的src屬性訪問js文件的形式獲取js腳本，而且這個js腳本中的內容是函數調用，該函數調用的參數是服務器返回的數據，爲了獲取這裏的參數數據，須要事先在頁面中定義回調函數，在回調函數中處理服務器返回的數據，這就是解決跨域問題的主流解決方案
12三、頁面編碼和被請求的資源編碼若是不一致如何處理？
對於ajax請求傳遞的參數，若是是get請求方式，參數若是傳遞中文，在有些瀏覽器會亂碼，不一樣的瀏覽器對參數編碼的處理方式不一樣，因此對於get請求的參數須要使用 encodeURIComponent函數對參數進行編碼處理，後臺開發語言都有相應的解碼api。對於post請求不須要進行編碼
12四、簡述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！
12五、闡述一下異步加載。
1. 異步加載的方案： 動態插入 script 標籤
2. 經過 ajax 去獲取 js 代碼，而後經過 eval 執行
3. script 標籤上添加 defer 或者 async 屬性
4. 建立並插入 iframe，讓它異步執行 js
12六、請解釋一下 JavaScript 的同源策略。
所謂同源指的是：協議，域名，端口相同，同源策略是一種安全協議，指一段腳本只能讀取來自同一來源的窗口和文檔的屬性。
在先後臺進行數據交互時，兩個文件必須處於同一域名同一端口號同一協議名之下，不然跨域請求
12七、ajax的缺點
一、ajax不支持瀏覽器back按鈕。
二、安全問題 AJAX暴露了與服務器交互的細節。
三、對搜索引擎的支持比較弱。
四、破壞了程序的異常機制。
12八、解釋jsonp的原理，以及爲何不是真正的ajax
Jsonp並非一種數據格式，而json是一種數據格式，jsonp是用來解決跨域獲取數據的一種解決方案，具體是經過動態建立script標籤，而後經過標籤的src屬性獲取js文件中的js腳本，該腳本的內容是一個函數調用，參數就是服務器返回的數據，爲了處理這些返回的數據，須要事先在頁面定義好回調函數，本質上使用的並非ajax技術
12九、什麼是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 等對象。
圖解：
13一、爲何利用多個域名來存儲網站資源會更有效？
一、速度保證：
確保用戶在不一樣地區能用最快的速度打開網站。
二、安全保障：
其中某個域名崩潰用戶也能經過其餘域名問網站，
三、服務端：
而且不一樣的資源放到不一樣的服務器上有利於減輕單臺服務器的壓力。
13二、請說出三種減低頁面加載時間的方法
一、壓縮css、js文件
二、合併js、css文件，減小http請求
三、外部js、css文件放在最底下
四、減小dom操做，儘量用變量替代沒必要要的dom操做
五、優化圖片加載的方式。
13三、 知道什麼是webkit麼? 知道怎麼用瀏覽器的各類工具來調試和debug代碼麼?
Webkit是瀏覽器引擎，包括html渲染和js解析功能，手機瀏覽器的主流內核，與之相對應的引擎有Gecko（Mozilla Firefox 等使用）和Trident（也稱MSHTML，IE 使用）。
對於瀏覽器的調試工具要熟練使用，主要是頁面結構分析，後臺請求信息查看，js調試工具使用，熟練使用這些工具能夠快速提升解決問題的效率.
一、Elements 功能標籤頁：用來查看，修改頁面上的元素，包括DOM標籤，以及css樣式的查看，修改，還有相關盒模型的圖形信息
二、Console控制檯：用於打印和輸出相關的命令信息，經常使用於JS錯誤調試。
三、Sources js資源頁面：這個頁面內咱們能夠找到固然瀏覽器頁面中的js 源文件，方便咱們查看和調試(打斷點調試)
四、.Network 網絡請求標籤頁：能夠看到全部的資源請求，包括網絡請求，圖片資源，html,css，js文件等請求，能夠根據需求篩選請求項，通常多用於網絡請求的查看和分析，分析後端接口是否正確傳輸，獲取的數據是否準確，請求頭，請求參數的查看
五、.Timeline標籤頁能夠顯示JS執行時間、頁面元素渲染時間，不作過多介紹
六、.Profiles標籤頁能夠查看CPU執行時間與內存佔用，不作過多介紹
七、.Resources標籤頁會列出全部的資源，以及HTML5的Database和LocalStore等，你能夠對存儲的內容編輯和刪除 不作過多介紹
八、.Security標籤頁 能夠告訴你這個網站的安全性，查看有效的證書等
九、.Audits標籤頁 能夠幫你分析頁面性能，有助於優化前端頁面，分析後獲得的報告
13四、簡述一下 Handlebars 的基本用法？
Handlebars 是 JavaScript 一個語義模板庫，經過對view和data的分離來快速構建Web模板。
13五、詳解在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);
13六、如何讓一個標籤塊級顯示？
一、給該元素添加浮動屬性
二、給該元素添加絕對定位屬性
三、 給父元素添加display:flex屬性設置爲彈性盒子（彈性盒子內部全是塊級標籤）
四、給其自己添加display:block/ inlineblock屬性
13七、利用原生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);
13八、實現Ajax的跨域請求有哪些方法？
【跨域請求處理】
因爲JS中存在同源策略，當請求不一樣協議名，不一樣端口號，不一樣主機名下面的文件時，將會違背同源策略，沒法請求成功！須要進行跨域處理！
一、後臺PHP進行設置，在後臺請求的PHP文件中，寫入一條header:
header( "Access-Control-Allow-Origin:*");
表示容許哪些域名請求這個PHP文件，*表示全部的域名都容許。
二、使用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("請求成功！");
}
三、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條的② ③ 步；
13九、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、事件委派的原理是啥？事件冒泡嗎？
事件委派的原理就是事件冒泡！
當你點擊一個元素時，這個點擊事件是會冒泡的，事件依次從該元素向父級元素依次觸發，事件委託就是在父級元素上統一監聽和處理事件，而不是在具體的元素上，而後經過判斷事件源來肯定是哪一個元素觸發的。
這樣作的好處是：
咱們不須要爲每一個元素添加事件，更節省資源；而且後來新增的元素直接能夠一樣得到事件，不須要再爲其添加監聽。
14一、前端代碼優化的方法？
1. 避免壞請求
4. 合併多個外部CSS文件
九、 利用瀏覽器緩存
14二、詳細解釋一下關於僞數組與數組？（在Javascript中什麼是僞數組？如何將僞數組轉化爲標準數組？）
僞數組：
具備length屬性；
按索引方式存儲數據；
不具備數組的push()、pop()等方法；
var fakeArray01 = {0:'a',1:'b',length:2};//這是一個標準的僞數組對象
var arr01 = Array.prototype.slice.call(fakeArray01);
14三、Javascript做用域鏈?
函數做用域的嵌套就組成了所謂的函數做用域鏈
14四、什麼是JSOPN？
jsonp：JSON with padding，是JSON的 一種「
使用模式」，可用於解決主流瀏覽器的跨域數據訪問的問題。
14五、如何利用Ajxa實現跨域請求？
因爲JS中存在同源策略，當請求不一樣協議名，不一樣端口號，不一樣主機名下面的文件時，將會違背同源策略，沒法請求成功！須要進行跨域處理！
一、後臺PHP進行設置，在後臺請求的PHP文件中，寫入一條header:
header( "Access-Control-Allow-Origin:*");
表示容許哪些域名請求這個PHP文件，*表示全部的域名都容許。
二、使用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("請求成功！");
}
三、利用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條的② ③ 步；
14六、 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(){});
14七、$(this) 和 this 關鍵字在 jQuery 中有何不一樣?
一、this表示javascript的
dom對象
二、$(this)表示把
dom對象轉換爲jquery對象
三、jquery包的方法只能由jquery對象調用，不能用javascript的
Dom對象使用
$("input").click(function(){
//這裏的this表示被點擊的輸入框對象,可使用javascript對該對象進行操做
var value=this.value;
//jquery對象與
dom對象取值方法不同，要用jquery方法必須使用$(dom對象)轉換
var val=$(this).val();
）}
14八、簡單介紹下JavaScript中的做用域與變量聲明提高？
一、一個變量的做用域表示這個變量存在的上下文。一個變量的做用域表示這個變量存在的上下文。javascript有擁有函數級別的做用域，也就是說，在一個函數內定義的變量只能在函數內部訪問或者這個函數內部的函數訪問（閉包除外）每個在函數外部聲明或者定義的變量都是一個全局對象，因此這個變量能夠在任何地方被使用。
二、變量聲明提高就是在函數內部不用var 聲明的一個變量，想要訪問的時候，會在當前函數中尋找，發現當前函數中沒有，繼續往上層函數找，一直到全局做用下尚未找到，就會將這個變量在全局範圍內進行聲明。
14九、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
15一、margin和padding分別適合什麼場景使用？
margin是用來隔開元素與元素的間距；padding是用來隔開元素與內容的間隔。 margin用於佈局分開元素使元素與元素互不相干； padding用於元素與內容之間的間隔，讓內容（文字）與（包裹）元素之間有一段
15二、::before 和 :after中雙冒號和單冒號 有什麼區別？解釋一下這2個僞元素的做用。
單冒號(:)用於CSS3僞類，雙冒號(::)用於CSS3僞元素。（僞元素由雙冒號和僞元素名稱組成）
雙冒號是在當前規範中引入的，用於區分僞類和僞元素。不過瀏覽器須要同時支持舊的已經存在的僞元素寫法，
好比:first-line、:first-letter、:before、:after等，
而新的在CSS3中引入的僞元素則不容許再支持舊的單冒號的寫法。 想讓插入的內容出如今其它內容前，使用::before，否者，使用::after；
在代碼順序上，::after生成的內容也比::before生成的內容靠後。
若是按堆棧視角，::after生成的內容會在::before生成的內容之上
15三、 li與li之間（display:inline-block）有看不見的空白間隔是什麼緣由引發的？有什麼解決辦法？
瀏覽器的默認行爲是把inline元素間的空白字符（空格換行tab）渲染成一個空格，
15四、解釋一下JavaScript中的this指針、閉包、做用域？
This指向：JS函數中的this，永遠指向函數調用語句所在的對象(誰調用函數，this指向誰)。(2分)
閉包： 在函數中，寫一個子函數。內層函數能夠訪問外層函數中的變量。(2分)
做用域： 變量生效的範圍稱爲做用域。JS中只有全局做用域和函數做用域。(2分)
15五、使用jQuery操做元素的屬性attr()方法和val()有什麼區別?
Attr():用於讀取或者設置元素的屬性；
Val(): 用於讀取或者設置表單元素的value；
15六、JavaScript怎樣建立節點、刪除節點、替換節點、複製節點？
建立節點： .creatElement();
刪除節點： .removeChild();
替換節點： .replaceChild();
複製節點： .cloneNode(true/false);
15七、CSS中的link和@import有什麼區別？經常使用哪一種？
① link屬於標準的HTML標籤，而@import不是標準標籤；
② link能夠兼容全部低版本瀏覽器，而@import只在CSS2以後能用；
③ link是將兩個文件連接起來，起橋樑做用； 而@import至關於將CSS文件複製到HTML文件中；
④ link會在HTML文件邊加載的過程當中，邊連接CSS文件；
@import會在HTML文件所有加載完之後，再導入CSS文件；
相關文章
- 1. JavaScript常見筆試題（持續更新）
- 2. [面試]Java常見面試題,持續更新...
- 3. Javascript之常見算法整理（持續更新）
- 4. 面試題持續更新
- 5. 面試題:持續更新
- 6. 常見js筆試面試題（持續更新）
- 7. TS 常見問題整理（60多個，持續更新ing）
- 8. js常見編程題整理（持續更新中）
- 9. python爬蟲常見的一些面試題(持續更新)
- 10. java和C常見技術面試題2015（持續更新中。。。）
- 更多相關文章...
- • ADO 更新記錄 - ADO 教程
- • C# 異常處理 - C#教程
- • Docker 清理命令
- • 常用的分佈式事務解決方案
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
