前端知識點大全
前端知識點總結
花了幾個晚上整理的前端知識點，收錄進來以備後續檢視。
1、自動化構建工具Gulp的使用方法。
考察nodejs安裝，npm依賴庫安裝，全域性安裝，本地安裝，--save和—save-dev 區別，gulp基本指令碼編寫，gulp常用功能。
2、什麼是跨域問題？如何解決？表單可以跨域嗎？
考察同源策略及跨域解決方案。
瀏覽器同源策略：凡是傳送請求url的協議、域名、埠三者之間任意一與當前頁面地址不同即為跨域
常用解決方案：代理（nginx反向代理）、jsonp。
3、解釋下什麼是jsonp, jsonp和ajax的區別。
4、儘可能詳細的解釋下ajax的原理。
XMLHttpRequest 是 AJAX 的基礎。
Ajax的原理簡單來說通過XmlHttpRequest物件來向伺服器發非同步請求，從伺服器獲得資料，然後用javascript來操作DOM而更新頁面。這其中最關鍵的一步就是從伺服器獲得請求資料
5、http和https請求區別。
6、http三次握手及每次握手的作用。
1：客戶端傳送了一個帶有SYN的Tcp報文到伺服器，這個三次握手中的開始。表示客戶端想要和服務端建立連線。
2：服務端接收到客戶端的請求，返回客戶端報文，這個報文帶有SYN和ACK標誌，詢問客戶端是否準備好。
3：客戶端再次響應服務端一個ACK，表示我已經準備好。
斷開連線的4次揮手
1：TCP傳送一個FIN，用來關閉客戶到服務端的連線。
2：服務端收到這個FIN，他發回一個ACK，確認收到序號為收到序號+1，和SYN一樣，一個FIN將佔用一個序號。
3：服務端傳送一個FIN到客戶端，服務端關閉客戶端的連線。
4：客戶端傳送ACK報文確認，並將確認的序號+1，這樣關閉完成。
可能有人會有疑問，tcp我握手的時候為何ACK和SYN是一起傳送。揮手的時候為什麼是分開的時候傳送呢，原因是TCP的全雙工模式，接收到FIN意味著沒有資料傳送過來了，但是還可以繼續傳送資料
7、http資料報的結構，有哪些常見包頭，這些包頭的作用。
- 請求行（request line)
- 訊息頭部（header)
- 空行
- 請求正文
- Content-Type:指定請求和響應的內容型別，如果未指定即為text/html
- 常用的Content-Type
- text/plain：普通文字
- tex/html：html文字
- application/x-javascript：js
- application/x-www-form-urlencoded：預設形式表單發包型別
- multipart/form-data：用在傳送檔案的post包中
- application/json：通過json傳輸
- application/xml：通過xml傳輸
- Content-Length:用於指定請求或相應的內容長度
- Accept-Encoding: gzip
- Content-Encoding: gzip
8、http常見的響應碼及意義。
1XX——資訊類（Information），表示收到http請求，正在進行下一步處理，通常是一種瞬間的響應狀態
2XX——成功類（Successful），表示使用者請求被正確接收、理解和處理
200（OK）：請求成功。一般用於GET與POST請求
201（Created）：已建立。成功請求並建立了新的資源
3XX——重定向類（Redirection），表示沒有請求成功，必須採取進一步的動作
301（Moved Permanently）：資源被永久移動。請求的資源已被永久的移動到新URI，返回資訊會包括新的URI，瀏覽器會自動定向到新URI。今後任何新的請求都應使用新的URI
302（Found）：資源臨時移動。資源只是臨時被移動，客戶端應繼續使用原有URI
304：用其他策略獲取資源
4XX——客戶端錯誤（Client Error），表示客戶端提交的請求包含語法錯誤或不能正確執行
400（Bad Requests）：客戶端請求的地址不存在或者包含不支援的引數
401（Unauthorized）：未授權，或認證失敗。對於需要登入的網頁，伺服器可能返回此響應
403（Forbidden）：沒許可權。伺服器收到請求，但拒絕提供服務
404（Not Found）：請求的資源不存在。遇到404首先檢查請求url是否正確
5XX——服務端錯誤（Server Error），表示伺服器不能正確執行一個正確的請求（客戶端請求的方法及引數是正確的，服務端不能正確執行，如網路超時、服務僵死，可以檢視服務端日誌再進一步解決）
500（Internal Server Error）：伺服器內部錯誤，無法完成請求
503（Service Unavailable）
9、前端如何向後臺提交資料。
常用的：表單提交 submit方式，但是會重新整理頁面，和ajax提交，需要對form表單資料序列化，可以用Formdata物件。
表單submit提交是瀏覽器實現的，不通過js引擎。
Ajax和$http都是通過XMLHTTPRequest實現的。
10、websocket是長連線麼？連線建立之後如何保證連線狀態？
主要考如何設計實現websocket的心跳機制。
11、常見的瀏覽器內建物件。如何獲取當前頁面的url？
location、window、document、history、Navigator
12、JS的有哪些資料型別
基本資料型別：undefined、null、boolean、number、String
引用型別：function、object、Array
14、定義一個數組變數、賦初值、向陣列頭和尾插入和刪除資料。
Pop push shift unshift（插入）
15、陣列的遍歷方法。（要求多種）
For foreach for（x in y）
16、什麼是類陣列。如何遍歷。
- 擁有length屬性，其它屬性（索引）為非負整數(物件中的索引會被當做字串來處理，這裡你可以當做是個非負整數串來理解)
- 不具有陣列所具有的方法
var myArray = { length: 4, "0": "first", "1": "second", "2": "third" }; var temp = Array.prototype.slice.call(myArray);
17、eval作用。如何通過一個字串呼叫函式名和這個字串一樣的函式。（類似於java的反射）
Eval作用是進行表示式運算並返回值。比如eval（3+5) ==8
eval('test').call(this);
呼叫test的方法。
18、獲取當前時間戳
new Date().getTime();
19、四捨五入保留兩位小數
var num =2.446242342;num = num.toFixed(2);
20、取整
var aa = parseInt('1.22');
21、encodeURI()和encodeURIComponent() 區別
使用encodeURI()編碼後的結果是除了空格之外的其他字元都原封不動，只有空格被替換成了%20。而encodeURIComponent()方法則會使用對應的編碼替換所有非字母數字字元。這也正是可以對整個URI使用encodeURI()，而只能對附加在現有URI後面的字串使用encodeURIComponent()的原因所在。一般來說,我們使用encodeURIComponent()方法的時候要比使用encodeURI()更多,因為在實踐中更常見的是對查詢字串引數而不是對基礎URL進行編碼
22、html5 drag涉及的幾個事件及時間的觸發時機
dragstart：事件主體是被拖放元素，在開始拖放被拖放元素時觸發。
drag：事件主體是被拖放元素，在正在拖放被拖放元素時觸發。
dragenter：事件主體是目標元素，在被拖放元素進入某元素時觸發。
dragover：事件主體是目標元素，在被拖放在某元素內移動時觸發。
dragleave：事件主體是目標元素，在被拖放元素移出目標元素是觸發。
drop：事件主體是目標元素，在目標元素完全接受被拖放元素時觸發。
dragend：事件主體是被拖放元素，在整個拖放操作結束時觸發
23、Web Worker是什麼，怎麼使用，怎麼回傳訊息。
web worker 是執行在後臺的 JavaScript，獨立於其他指令碼，不會影響頁面的效能。您可以繼續做任何願意做的事情：點選、選取內容等等，而此時 web worker 在後臺執行。（IE不支援）
使用的關鍵幾步：
- 監測瀏覽器是否支援。
- 穿件web worker檔案。即要非同步執行的程式碼。（如何想要回調，可以使用postMessage方法）
- 建立worker物件。
- worker物件新增事件回撥監聽。
24、Cookie如何防範XSS攻擊。什麼是XSS攻擊。
跨站指令碼攻擊。通常做法就是在網頁中嵌入客戶端指令碼（JS），當客戶端載入網頁時，通過JS指令碼獲取使用者的cookie，導航到惡意網站等。
將cookie標記為httponly 就可以防止通過js獲取客戶端cookie。
25、Cookie和session的區別與聯絡。
Cookie是一種儲存方式。
Session是服務端用來標記客戶端的一些資訊。
表達成用cookie可以在客戶端用來記錄session資訊。Session一般是由後臺生成並儲存的。
26、JavaScript中如何檢測一個變數是一個String型別？請寫出函式實現
typeof(obj) === "string" obj.constructor === String
27、typeof 和 instanceof 區別
Typeof的運算數可以是任何型別，返回值為：number,boolean,string,function,object,undefined這些基礎型別。
instanceof 主要是用來判斷變數是不是一個物件的例項。比如：
cat instanceof Cat 判斷cat這個例項是不是Cat類的一個例項。
28、陣列去重。演算法考察。
第一種寫法：利用了類陣列臨時變數。
var src = [0,2,3,4,4,0,2]; var temp = {}; var dest = []; for(var i = 0 ;i< src.length;i++){ if( !temp[src[i]] ){ temp[src[i]] = 1; dest.push(src[i]); } } console.log(dest);
第二種寫法：利用了Array的indexof方法。
for(var i = 0;i< src.length;i++){ if(dest.indexOf(src[i]) < 0){ dest.push(src[i]); } }
29、$(document).ready()方法和window.onload 區別
ready方法是dom元素載入完成。Onload方法是資源載入完成，包括圖片。
30、jquery繫結事件方法，最好用哪一種。
最好用on方法，去除繫結用off。
31、行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
行內元素：a、b、span、img、input、strong、select、label、em、button、textarea
塊級元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote
空元素：即系沒有內容的HTML元素，例如：br、meta、hr、link、input、img
32、使用正則表示式的寫法。（例子）
var reg = /pattern/flags // 字面量建立方式 var reg = new RegExp(pattern,flags); //例項建立方式 pattern:正則表示式
flags:標識(修飾符) 標識主要包括： 1. i 忽略大小寫匹配 2. m 多行匹配，即在到達一行文字末尾時還會繼續尋常下一行中是否與正則匹配的項 3. g 全域性匹配 模式應用於所有字串，而非在找到第一個匹配項時停止
正則表示式有4個常用方法test、exec、match和replace
test：字串中是否存在符合正則的內容。
exec：捕獲符合正則的字串。
Match：匹配成功的字串陣列。
Replace：替換匹配正則的部分。
33、優化頁面載入，都有哪些方式。
1、壓縮css和js檔案
2、合併js和css檔案減少http請求。
3、合理設計業務邏輯，減少http請求。
4、優化圖片，設計合適大小的圖片原始檔。
5、圖片標明寬高可以減少佈局調整。
6、CSS樣式放在頭部、js放在尾部。
7、伺服器開啟gzip壓縮。
8、儘量減少DOM元素數量。
34、瀏覽器載入頁面的流程
1、解析html 建立dom數。
2、按照順序載入link、style、script檔案。並執行script，阻塞式。
3、解析css。 瀏覽器預設<外部樣式<內聯樣式（內聯樣式和外部樣式後加載的生效）<行內元素。
4、CSS和dom合併，渲染
5、佈局重拍和重繪。
35、變數為undefined和null的區別。
var ccc; typeof(ccc); ccc = null; typeof(ccc);
第一個typeof為undefined，第二個為object。
36、box-sizing都有哪些值都代表什麼意思，哪些場景使用。
content-box: 在寬度和高度之外繪製元素的內邊距和邊框
border-box: 在寬度和高度內繪製元素的內邊距和邊框
inherit:從父元素繼承。
37、display inline和inline-block的區別。
只有inline-block有盒子模型相關的屬性。
38、什麼是偽陣列，如何遍歷。如何把它變為一個真Array。
1，具有length屬性 2，按索引方式儲存資料 3，不具有陣列的push,pop等方法
var fakeArray = {
length: 4,
"aa": "first",
"bb": "second",
"cc": "third"
};
Array.prototype.slice.call(fakeArray)
39、cookie和localStorage sessionStorage區別和用法。
1、cookie資料始終在同源的http請求中攜帶（即使不需要），即cookie在瀏覽器和伺服器間來回傳遞，而sessionStorage和localStorage不會自動把資料傳送給伺服器，僅在本地儲存。cookie資料還有路徑（path）的概念，可以限制cookie只屬於某個路徑下。
2、儲存大小限制也不同，cookie資料不能超過4K，同時因為每次http請求都會攜帶cookie、所以cookie只適合儲存很小的資料，如會話標識。sessionStorage和localStorage雖然也有儲存大小的限制，但比cookie大得多，可以達到5M或更大
3、資料有效期不同，sessionStorage僅僅在當前瀏覽器視窗關閉之前有效；localStorage始終有效，視窗或者瀏覽器關閉之後也一直儲存，因此作用持久資料；cookie，只在設定cookie過期時間之前有效，即使視窗關閉或者瀏覽器關閉。
4、作用域不同：sessionStorage在不同的瀏覽器視窗中不共享，即使是同一個頁面，localStorage在所有的同源視窗中是共享的，cookie也是在所有同源的視窗中共享的。
40、什麼是序列化和反序列化，為什麼要用到這個，如何實現。
複雜物件無法在http中傳輸，所以要序列化。使用JSON
41、上下固定，中間滾動佈局如何實現
42、call和apply的區別。舉例使用。
43、為什麼要清除浮動，怎麼清除。
浮動對文件流產生了影響，下邊增加一個div，然後設定clear:both
44、介紹position屬性。
absolute、fixed、relative、static、inherit
45、垂直水平居中的方法。
46、什麼是深拷貝、什麼是淺拷貝，如何實現深拷貝。
47、前端實現檔案斷點續傳的思路
主要是檔案分割。File物件的slice方法分割檔案+ajax上傳
48、介紹flex佈局
- flex-direction屬性決定主軸的方向（即專案的排列方向）
- flex-wrap 屬性定義，如果一條軸線 排不下，如何換行
- flex-flow flex-direction屬性和flex-wrap屬性的簡寫形式
- justify-content定義了專案在主軸上的對齊方式
- align-items定義專案在交叉軸上如何對齊。
- align-content屬性定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用
49、Promise 和 async/await
function sleep(time){ return new Promise(function (resolve,reject) { setTimeout(function () { resolve(); },time); }); } (async function() { debugger; sleep(5000); debugger; await sleep(2000); debugger; })(); (function(){ debugger; })()
50、利用Promise實現非同步。舉例。這個是原生的，有很多種promise的實現。 Jquery中是用的deferred
var p = new Promise(function (resolve,reject) { //reject('222'); //resolve('111'); }); p.then(function (param) { debugger; },function (param) { debugger; });
51、什麼是訂閱-釋出模式，如何實現。
52、瀏覽器事件流向是怎樣的，DOM事件流是哪兩種模式。如何阻止事件冒泡，如何捕獲事件。
53、如何進行cookie劫持，如何防止被劫持。
XSS（跨站點指令碼攻擊）
- 給Cookie新增HttpOnly屬性，這種屬性設定後，只能在http請求中傳遞，在指令碼中，document。cookie無法獲取到該Cookie值。對XSS的攻擊，有一定的防禦值。但是對網路攔截，還是洩露了
- 在cookie中新增校驗資訊，這個校驗資訊和當前使用者外接環境有些關係，比如ip，useragent等有關。這樣當cookie被人劫持了，並冒用，但是在伺服器端校驗的時候，發現校驗值發生了變化，因此要求重新登入，這樣也是種很好的思路，去規避cookie劫持
- cookie中sessionid的定時更換，讓sessionid按一定頻率變換，同時對使用者而言，該操作是透明的，這樣保證了服務體驗的一致性
54、介紹下原型鏈、原型的概念。
55、如何用js實現繼承。
原型鏈繼承
構造繼承
例項繼承
拷貝繼承
寄生組合繼承
56、防抖和節流的區別。如何進行防抖和節流設計。
57、什麼是閉包，有什麼特點，什麼場景下要使用閉包。
什麼時候使用閉包。1、不想變數汙染。 2、想要變數常駐記憶體，以進行共享
閉包具備以下幾個特點：1、函式中套函式，且內部函式作為return值返回。2、內部函式使用外部函式中的變數
58、JS實現非同步的方案。（非真正的非同步，只是相對於與順序呼叫函式而言）
1、回撥函式。
2、釋出/訂閱模式
3、promise
59、如何判斷一個變數是不是陣列。
function isArrayFn(value){ if (typeof Array.isArray === "function") { return Array.isArray(value); }else{ return Object.prototype.toString.call(value) === "[object Array]"; }
60、JS是單執行緒的麼？為什麼ajax請求為什麼可以非同步執行。
61、let、const以及var的區別
ES6 新增了let命令，用來宣告變數。它的用法類似於var，但是所宣告的變數，只在let命令所在的程式碼塊內有效
const宣告一個只讀的常量。一旦宣告，常量的值就不能改變。
62、介紹下記憶體回收機制，有哪些場景會造成記憶體洩露。
記憶體洩露是指一塊被分配的記憶體既不能使用，又不能回收，直到瀏覽器程序結束
- 意外的全域性變數。未使用var宣告。
- 閉包引起的記憶體洩露。
- 沒有清理的dom元素引用。
- 被遺忘的定時器或者回調。
63、this 和原型的區別
this永遠指向函式執行時所在的物件，而不是函式被建立時所在的物件。
1.如果是call、apply，指定的this是誰，就是誰。
2.普通的函式呼叫，函式被誰呼叫，this就是誰。
64、單頁面應用和多頁面應用的區別，如何選擇
多頁面SEO較好。
65、堆和棧的區別。
堆和棧都是執行時記憶體中分配的一個數據區，因此也被稱為堆區和棧區，但二者儲存的資料型別和處理速度不同。堆（heap）用於複雜資料型別（引用型別）分配空間，例如陣列物件、object物件；它是執行時動態分配記憶體的，因此存取速度較慢。棧（stack）中主要存放一些基本型別的變數和物件的引用，其優勢是存取速度比堆要快，並且棧內的資料可以共享，但缺點是存在棧中的資料大小與生存期必須是確定的，缺乏靈活性。
JavaScript堆不需要程式程式碼來顯示地釋放，因為堆是由自動的垃圾回收來負責的，每種瀏覽器中的JavaScript解釋引擎有不同的自動回收方式，但一個最基本的原則是：如果棧中不存在對堆中某個物件的引用，那麼就認為該物件已經不再需要，在垃圾回收時就會清除該物件佔用的記憶體空間。因此，在不需要時應該將對物件的引用釋放掉，以利於垃圾回收，這樣就可以提高程式的效能。釋放對物件的引用最常用的方法就是為其賦值為null，例如下面程式碼將newArray賦值為null：
66、什麼是高階函式。舉例
編寫高階函式，就是讓函式的引數能夠接收別的函式。
setInterval,setTimeout,sort
67、display none visibility hidden區別
display none 不生成dom元素。visibility hidden只是不顯示，但是佔位。
68、data-屬性的作用是什麼
69、請解釋一下inline和inline-block的區別，塊級元素和行內元素區別。
主要是盒子模型的區別。
70、談一下JS模組化程式設計。如何實現。
https://www.cnblogs.com/lishuxue/p/6000205.html
CommonJS, AMD, CMD都是JS模組化的規範。
CommonJS是伺服器端js模組化的規範，NodeJS是這種規範的實現。
AMD(非同步模組定義)和CMD(通用模組定義)都是瀏覽器端js模組化的規範。RequireJS 遵循的是 AMD，SeaJS 遵循的是 CMD。
requirejs 載入模組的核心思想是利用了動態載入指令碼的非同步性以及 onload 事件以毒攻毒，關於指令碼的載入，我們需要注意一下幾點：
- 在 HTML 中引入 <script> 標籤是同步載入；
- 在指令碼中動態載入是非同步載入，且由於被載入的指令碼在事件佇列的後端，因此總是會在當前指令碼之後執行；
- 使用 onload 和 onerror 事件可以監聽指令碼載入完成，以非同步的事件來處理非同步的事件
71、匿名自執行函式寫法，什麼場景下用這種寫法。
//使用匿名自執行函式實現單例模式 var obj = (function () { var obj = new Object(); obj.kick = function () { console.log('kick'); } return obj; })();
72、請解釋JSONP的工作原理，以及它為什麼不是真正的AJAX。
JSONP (JSON with Padding)是一個簡單高效的跨域方式，HTML中的script標籤可以載入並執行其他域的javascript，於是我們可以通過script標記來動態載入其他域的資源。例如我要從域A的頁面pageA載入域B的資料，那麼在域B的頁面pageB中我以JavaScript的形式宣告pageA需要的資料，然後在 pageA中用script標籤把pageB載入進來，那麼pageB中的指令碼就會得以執行。JSONP在此基礎上加入了回撥函式，pageB載入完之後會執行pageA中定義的函式，所需要的資料會以引數的形式傳遞給該函式。JSONP易於實現，但是也會存在一些安全隱患，如果第三方的指令碼隨意地執行，那麼它就可以篡改頁面內容，截獲敏感資料。但是在受信任的雙方傳遞資料，JSONP是非常合適的選擇。
73、講一下作用域 作用域鏈。並舉例說明。
變數提升、函式提升。----先使用後定義。
作用域鏈相關知識的總結：
1.執行環境決定了變數的生命週期，以及哪部分程式碼可以訪問其中變數
2，執行環境有全域性執行環境（全域性環境）和區域性執行環境之分。
3.每次進入一個新的執行環境，都會建立一個用於搜尋變數和函式的作用域鏈
4.函式的區域性環境可以訪問函式作用域中的變數和函式，也可以訪問其父環境，乃至全域性環境中的變數和環境。
5.全域性環境只能訪問全域性環境中定義的變數和函式，不能直接訪問區域性環境中的任何資料。
6.變數的執行環境有助於確定應該合適釋放記憶體。
每個函式都有自己的執行環境，當執行流進入一個函式時，函式的環境就被推入一個環境棧中，當函式執行完畢後，棧將其環境彈出，把控制權返回給之前的執行環境（這句話有助於理解閉包）
74、==和===有什麼不同？一個字串一個number型別可能==麼
==， 兩邊值型別不同的時候，要先進行型別轉換，再比較。 ===，不做型別轉換，型別不同的一定不等。
75、什麼是"use strict";?使用它的好處和壞處分別是什麼？
在程式碼中出現表示式-"use strict"; 意味著程式碼按照嚴格模式解析，這種模式使得Javascript在更嚴格的條件下執行。
好處：
消除Javascript語法的一些不合理、不嚴謹之處，減少一些怪異行為;
消除程式碼執行的一些不安全之處，保證程式碼執行的安全；
提高編譯器效率，增加執行速度；
為未來新版本的Javascript做好鋪墊。
壞處：
同樣的程式碼，在"嚴格模式"中，可能會有不一樣的執行結果；一些在"正常模式"下可以執行的語句，在"嚴格模式"下將不能執行。
76、Angular自定義指令的寫法
77、Angular監聽變數變化的方法
78、Angular如何手動觸發頁面和模型的同步
79、Angular資料繫結寫法，span可以用ng-model麼
80、Angular如何實現多級路由。如何設定預設路由
81、Angular中如何對$http請求進行統一的攔截。
82、Angular依賴注入的寫法
83、Angular自定義服務的的幾種寫法
84、Angular如何定義全域性變數
85、Angular中 $emit 和$broastcast的區別。 如何阻止事件冒泡。
86、$interval開啟的定時迴圈任務，如何在$scope銷燬的時候清除。
87、ng-if ng-show的區別。