前端面試彙總（2020年）
一
大綱
1、前言
2、前端工程化
3、前端設計模式
4、前端安全性問題
5、前端跨域問題
6、前端數據加密
7、前端http相關問題
8、*前端基礎知識點面試題
9、前端技術棧問題
前言
由於新冠肺炎疫情，現在成天呆在家裏，加上也要準備面試，就在家裏看面試題，看着網上一堆面試題，決定收集常見題目彙總一下。關於面試大綱，我認爲每個人都是千差萬別的。因爲面試官都是對簡歷所寫的項目經驗進行深挖或者對你所掌握的基本技能進行考察。
前端工程化
1
什麼是"前端工程化"？
前端工程化是使用軟件工程的技術和方法來進行前端的開發流程、技術、工具、經驗等規範化、標準化，其主要目的爲了提高效率和降低成本，即提高開發過程中的開發效率，減少不必要的重複工作時間，而前端工程本質上是軟件工程的一種，因此我們應該從軟件工程的角度來研究前端工程。
2
如何做"前端工程化"？
前端工程化就是爲了讓前端開發能夠“自成體系”，個人認爲主要應該從模塊化、組件化、規範化、自動化四個方面思考。
前端設計模式
前端常見的設計模式主要有以下幾種，具體設計模式查看這篇文章。
1. 單例模式
2. 工廠模式
3. 策略模式
4. 代理模式
5. 觀察者模式
6. 模塊模式
7. 構造函數模式
8. 混合模式
前端安全性問題
這個是老的話題，有的在初中級前端面試中可能不會提到。但是在高級面試的時候，你要說出前端安全性問題防禦，及前端常見安全性問題的攻擊原理是什麼。
1
xss跨站腳本攻擊原理？如何進行？防禦手段？
如何進行：如何XSS是指惡意攻擊者利用網站沒有對用戶提交數據進行轉義處理或者過濾不足的缺點，進而添加一些代碼，嵌入到web頁面中去。使別的用戶訪問都會執行相應的嵌入代碼。從而盜取用戶資料、利用用戶身份進行某種動作或者對訪問者進行病毒侵害的一種攻擊方式。
主要原理：過於信任客戶端提交的數據！
防禦手段：不信任任何客戶端提交的數據，只要是客戶端提交的數據就應該先進行相應的過濾處理然後方可進行下一步的操作。
2
CSRF跨站請求僞造原理？如何進行？防禦手段？
如何進行：當你在某網頁登錄之後，在沒有關閉網頁的情況下，收到別人的鏈接。例如:http://127.0.0.1/dvwa/vulnerabilities/csrf/?password_new=1&password_conf=1&Change=Change#
點擊鏈接，會利用瀏覽器的cookie把密碼改掉。
主要原理：在沒有關閉相關網頁的情況下，點擊其他人發來的CSRF鏈接，利用客戶端的cookie直接向服務器發送請求。
防禦手段：
檢測Referer
Anti-CSRF token機制
業務上要求用戶輸入原始密碼（簡單粗暴），攻擊者在不知道原始密碼的情況下，無論如何都無法進行CSRF攻擊。
3
Sql腳本注入原理？如何進行？防禦手段？
如何進行：利用現有應用程序，將（惡意）的SQL命令注入到後臺數據庫引擎執行的能力，它可以通過在Web表單中輸入（惡意）SQL語句得到一個存在安全漏洞的網站上的數據庫，而不是按照設計者意圖去執行SQL語句。
主要原理：通過把SQL命令插入到Web表單提交或輸入域名或頁面請求的查詢字符串，最終達到欺騙服務器執行惡意的SQL命令
防禦手段：
使用預編譯，綁定變量（推薦）。
檢查數據類型。
過濾特殊字符和語句。
頁面不錯誤回顯。
4
web上傳漏洞原理？如何進行？防禦手段？
如何進行：用戶上傳了一個可執行的腳本文件，並通過此腳本文件獲得了執行服務器端命令的能力。
主要原理：當文件上傳時沒有對文件的格式和上傳用戶做驗證，導致任意用戶可以上傳任意文件，那麼這就是一個上傳漏洞。
防禦手段：
1. 最有效的，將文件上傳目錄直接設置爲不可執行，對於Linux而言，撤銷其目錄的'x'權限；實際中很多大型網站的上傳應用都會放置在獨立的存儲上作爲靜態文件處理，一是方便使用緩存加速降低能耗，二是杜絕了腳本執行的可能性；
2. 文件類型檢查：強烈推薦白名單方式，結合MIME Type、後綴檢查等方式；此外對於圖片的處理可以使用壓縮函數或resize函數，處理圖片的同時破壞其包含的HTML代碼；
3. 使用隨機數改寫文件名和文件路徑，使得用戶不能輕易訪問自己上傳的文件；
4. 單獨設置文件服務器的域名；
前端跨越問題
1
什麼是跨域？
由瀏覽器同源策略限制的一類請求場景，當不同地址，不同端口，不同級別，不同協議就會構成跨域。
2
什麼是同源策略？
所謂同源是指"協議+域名+端口"三者相同，即便兩個不同的域名指向同一個ip地址，也非同源。
它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，瀏覽器很容易受到XSS、CSFR等攻擊。
3
如何解決跨域？ 能說1，2，7，8就行。
1、 通過jsonp跨域
2、CORS
3、 document.domain + iframe跨域
4、 location.hash + iframe
5、 window.name + iframe跨域
6、 postMessage跨域
7、 nginx代理跨域
8、 nodejs中間件代理跨域
9、 WebSocket協議跨域
前端數據加密問題
1
一般如何處理用戶敏感信息？
前端一般使用md5、base64加密、sha1加密，想要了解詳情請自行百度。
前端http相關問題
1
HTTP常用狀態碼及其含義？
1xx：指示信息--表示請求已接收，繼續處理
100 Continue 初始的請求已經接受，客戶應當繼續發送請求的其餘部分。（HTTP 1.1新）
101 Switching Protocols 服務器將遵從客戶的請求轉換到另外一種協議（HTTP 1.1新）
2xx：成功--表示請求已被成功接收、理解、接受
200 OK 一切正常，對GET和POST請求的應答文檔跟在後面。
201 Created 服務器已經創建了文檔，Location頭給出了它的URL。
202 Accepted 已經接受請求，但處理尚未完成。
203 Non-Authoritative Information 文檔已經正常地返回，但一些應答頭可能不正確，因爲使用的是文檔的拷貝（HTTP 1.1新）。
204 No Content 沒有新文檔，瀏覽器應該繼續顯示原來的文檔。如果用戶定期地刷新頁面，而Servlet可以確定用戶文檔足夠新，這個狀態代碼是很有用的。
205 Reset Content 沒有新的內容，但瀏覽器應該重置它所顯示的內容。用來強制瀏覽器清除表單輸入內容（HTTP 1.1新）。
206 Partial Content 客戶發送了一個帶有Range頭的GET請求，服務器完成了它（HTTP 1.1新）。
3xx：重定向--要完成請求必須進行更進一步的操作
300 Multiple Choices 客戶請求的文檔可以在多個位置找到，這些位置已經在返回的文檔內列出。如果服務器要提出優先選擇，則應該在Location應答頭指明。
301 Moved Permanently 客戶請求的文檔在其他地方，新的URL在Location頭中給出，瀏覽器應該自動地訪問新的URL。
302 Found 類似於301，但新的URL應該被視爲臨時性的替代，而不是永久性的。注意，在HTTP1.0中對應的狀態信息是“Moved Temporatily”。出現該狀態代碼時，瀏覽器能夠自動訪問新的URL，因此它是一個很有用的狀態代碼。注意這個狀態代碼有時候可以和301替換使用。例如，如果瀏覽器錯誤地請求http://host/~user（缺少了後面的斜槓），有的服務器返回301，有的則返回302。嚴格地說，我們只能假定只有當原來的請求是GET時瀏覽器纔會自動重定向。請參見307。
303 See Other 類似於301/302，不同之處在於，如果原來的請求是POST，Location頭指定的重定向目標文檔應該通過GET提取（HTTP 1.1新）。
304 Not Modified 客戶端有緩衝的文檔併發出了一個條件性的請求（一般是提供If-Modified-Since頭表示客戶只想比指定日期更新的文檔）。服務器告訴客戶，原來緩衝的文檔還可以繼續使用。
305 Use Proxy 客戶請求的文檔應該通過Location頭所指明的代理服務器提取（HTTP 1.1新）。
307 Temporary Redirect 和302（Found）相同。許多瀏覽器會錯誤地響應302應答進行重定向，即使原來的請求是POST，即使它實際上只能在POST請求的應答是303時 才能重定向。由於這個原因，HTTP 1.1新增了307，以便更加清除地區分幾個狀態代碼：當出現303應答時，瀏覽器可以跟隨重定向的GET和POST請求；如果是307應答，則瀏覽器只能跟隨對GET請求的重定向。（HTTP 1.1新）
4xx：客戶端錯誤--請求有語法錯誤或請求無法實現
400 Bad Request 請求出現語法錯誤。
401 Unauthorized 客戶試圖未經授權訪問受密碼保護的頁面。應答中會包含一個WWW-Authenticate頭，瀏覽器據此顯示用戶名字/密碼對話框，然後在填寫合適的Authorization頭後再次發出請求。
403 Forbidden 資源不可用。服務器理解客戶的請求，但拒絕處理它。通常由於服務器上文件或目錄的權限設置導致。
404 Not Found 無法找到指定位置的資源。這也是一個常用的應答。
405 Method Not Allowed 請求方法（GET、POST、HEAD、DELETE、PUT、TRACE等）對指定的資源不適用。（HTTP 1.1新）
406 Not Acceptable 指定的資源已經找到，但它的MIME類型和客戶在Accpet頭中所指定的不兼容（HTTP 1.1新）。
407 Proxy Authentication Required 類似於401，表示客戶必須先經過代理服務器的授權。（HTTP 1.1新）
408 Request Timeout 在服務器許可的等待時間內，客戶一直沒有發出任何請求。客戶可以在以後重複同一請求。（HTTP 1.1新）
409 Conflict 通常和PUT請求有關。由於請求和資源的當前狀態相沖突，因此請求不能成功。（HTTP 1.1新）
410 Gone 所請求的文檔已經不再可用，而且服務器不知道應該重定向到哪一個地址。它和404的不同在於，返回407表示文檔永久地離開了指定的位置，而404表示由於未知的原因文檔不可用。（HTTP 1.1新）
411 Length Required 服務器不能處理請求，除非客戶發送一個Content-Length頭。（HTTP 1.1新）
412 Precondition Failed 請求頭中指定的一些前提條件失敗（HTTP 1.1新）。
413 Request Entity Too Large 目標文檔的大小超過服務器當前願意處理的大小。如果服務器認爲自己能夠稍後再處理該請求，則應該提供一個Retry-After頭（HTTP 1.1新）。
414 Request URI Too Long URI太長（HTTP 1.1新）。
416 Requested Range Not Satisfiable 服務器不能滿足客戶在請求中指定的Range頭。（HTTP 1.1新）
5xx：服務器端錯誤--服務器未能實現合法的請求
500 Internal Server Error 服務器遇到了意料不到的情況，不能完成客戶的請求。
501 Not Implemented 服務器不支持實現請求所需要的功能。例如，客戶發出了一個服務器不支持的PUT請求。
502 Bad Gateway 服務器作爲網關或者代理時，爲了完成請求訪問下一個服務器，但該服務器返回了非法的應答。
503 Service Unavailable 服務器由於維護或者負載過重未能應答。例如，Servlet可能在數據庫連接池已滿的情況下返回503。服務器返回503時可以提供一個Retry-After頭。
504 Gateway Timeout 由作爲代理或網關的服務器使用，表示不能及時地從遠程服務器獲得應答。（HTTP 1.1新）505 HTTP Version Not Supported 服務器不支持請求中所指明的HTTP版本。（HTTP 1.1新）
2
websocket和輪詢及長輪詢區別
輪詢如下：
客戶端：啦啦啦，有沒有新信息(Request)服務端：沒有（Response）客戶端：啦啦啦，有沒有新信息(Request)服務端：沒有。。（Response）客戶端：啦啦啦，有沒有新信息(Request)服務端：你好煩啊，沒有啊。。（Response）客戶端：啦啦啦，有沒有新消息（Request）服務端：好啦好啦，有啦給你。（Response）客戶端：啦啦啦，有沒有新消息（Request）服務端：。。。。。沒。。。。沒。。。沒有（Response） ---- loop
長輪詢如下：
客戶端：啦啦啦，有沒有新信息，沒有的話就等有了才返回給我吧（Request）服務端：額。。 等待到有消息的時候。。來 給你（Response）客戶端：啦啦啦，有沒有新信息，沒有的話就等有了才返回給我吧（Request） -loop
websocket如下：
websocket解決了HTTP的這幾個難題。 首先，被動性，當服務器完成協議升級後（HTTP->Websocket），服務端就可以主動推送信息給客戶端啦。
所以上面的情景可以做如下修改。
客戶端：啦啦啦，我要建立Websocket協議，需要的服務：chat，Websocket協議版本：17（HTTP Request）服務端：ok，確認，已升級爲Websocket協議（HTTP Protocols Switched）客戶端：麻煩你有信息的時候推送給我噢。。服務端：ok，有的時候會告訴你的。服務端：balabalabalabala服務端：balabalabalabala服務端：哈哈哈哈哈啊哈哈哈哈服務端：笑死我了哈哈哈哈哈哈哈
3
Http和Https的區別？
1、https協議需要到ca申請證書，一般免費證書較少，因而需要一定費用。
2、http是超文本傳輸協議，信息是明文傳輸，https則是具有安全性的ssl加密傳輸協議。
3、http和https使用的是完全不同的連接方式，用的端口也不一樣，前者是80，後者是443。
4、http的連接很簡單，是無狀態的；HTTPS協議是由SSL+HTTP協議構建的可進行加密傳輸、身份認證的網絡協議，比http協議安全。
*前端基礎知識點面試題
1
HTML/5、CSS/3相關
一、html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和 HTML5？
新特性：
HTML5 現在已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增加。
拖拽釋放(Drag and drop) API
語義化更好的內容標籤（header,nav,footer,aside,article,section）
音頻、視頻API(audio,video)
畫布(Canvas) API
地理(Geolocation) API
本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；
sessionStorage 的數據在瀏覽器關閉後自動刪除
表單控件，calendar、date、time、email、url、search
新的技術webworker, websocket, Geolocation
移除元素：
純表現的元素：basefont，big，center，font, s，strike，tt，u；
對可用性產生負面影響的元素：frame，frameset，noframes；
h5新標籤兼容：
IE8/IE7/IE6支持通過document.createElement方法產生的標籤，
可以利用這一特性讓這些瀏覽器支持HTML5新標籤，
當然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
如何區分：
DOCTYPE聲明\新增的結構元素\功能元素
二、CSS 選擇符有哪些？哪些屬性可以繼承？優先級算法如何計算？ CSS3新增僞類有那些？
CSS 選擇符：
1.id選擇器（ # myid）
2.類選擇器（.myclassname）
3.標籤選擇器（div, h1, p）
4.相鄰選擇器（h1 + p）
5.子選擇器（ul > li）
6.後代選擇器（li a）
7.通配符選擇器（ * ）
8.屬性選擇器（a[rel = "external"]）
9.僞類選擇器（a: hover, li:nth-child）
可以繼承的屬性：
可繼承的樣式： font-size font-family color, UL LI DL DD DT;
不可繼承的樣式：border padding margin width height ;
優先級：
!important > id > class > tag
important 比 內聯優先級高,但內聯比 id 要高
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 單選框或複選框被選中。
三、CSS3有哪些新特性？
更詳細的請見：https://www.cnblogs.com/qianduantuanzhang/p/7793638.html
CSS3實現圓角（border-radius），陰影（box-shadow），
對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉,縮放,定位,傾斜
增加了更多的CSS選擇器 多背景 rgba
在CSS3中唯一引入的僞元素是::selection.
媒體查詢，多欄佈局
border-image
四、解釋盒模型寬高值得計算方式，邊界塌陷，負值作用，box-sizing概念？
1. 盒模型：IE 678 下(不添加doctype) 使用ie盒模型，寬度 = 邊框 + padding + 內容寬度； chrom、IE9+、(添加doctype) 使用標準盒模型， 寬度 = 內容寬度。
2. box-sizing : 爲了解決標準黑子和IE盒子的不同，CSS3增添了盒模型屬性box-sizing，content-box(默認)，border-box 讓元素維持IE傳統盒子模型， inherit 繼承 父盒子模型；
3. 邊界塌陷：塊元素的 top 與 bottom 外邊距有時會合並（塌陷）爲單個外邊距（合併後最大的外邊距），這樣的現象稱之爲 外邊距塌陷。
4. 負值作用：負margin會改變浮動元素的顯示位置，即使我的元素寫在DOM的後面，我也能讓它顯示在最前面。
五、BFC（Block Formatting Context） 是什麼？應用？
1. BFC 就是 ‘塊級格式上下文’ 的格式，創建了BFC的元素就是一個獨立的盒子，不過只有BLock-level box可以參與創建BFC，它規定了內部的Bloc-level Box 如何佈局，並且與這個獨立盒子裏的佈局不受外部影響，當然它也不會影響到外面的元素。
2. 應用場景：
1. 解決margin疊加的問題
2. 用於佈局（overflow: hidden）,BFC不會與浮動盒子疊加。
3. 用於清除浮動，計算BFC高度。
六、如何實現瀏覽器內多個標籤頁之間的通信?
調用localstorge、cookies等本地存儲方式
七、簡要說一下CSS的元素分類
塊級元素：div,p,h1,form,ul,li;
行內元素 : span,a,label,input,img,strong,em;
八、解釋下浮動和它的工作原理？清除浮動的方法
浮動元素脫離文檔流，不佔據空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。
1.使用空標籤清除浮動。
這種方法是在所有浮動標籤後面添加一個空標籤 定義css clear:both. 弊端就是增加了無意義標籤。
2.使用after僞對象清除浮動
該方法只適用於非IE瀏覽器。具體寫法可參照以下示例。使用中需注意以下幾點。一、該方法中必須爲需要清除浮動元素的僞對象中設置 height:0，否則該元素會比實際高出若干像素；
#parent:after{
content:".";
height:0;
visibility:hidden;
display:block;
clear:both;
}
3.設置overflow爲hidden或者auto
4.浮動外部元素
九、CSS隱藏元素的幾種方法（至少說出三種）
Opacity:元素本身依然佔據它自己的位置並對網頁的佈局起作用。它也將響應用戶交互;
Visibility:與 opacity 唯一不同的是它不會響應任何用戶交互。此外，元素在讀屏軟件中也會被隱藏;
Display:display 設爲 none 任何對該元素直接打用戶交互操作都不可能生效。此外，讀屏軟件也不會讀到元素的內容。這種方式產生的效果就像元素完全不存在;
Position:不會影響佈局，能讓元素保持可以操作;
Clip-path:clip-path 屬性還沒有在 IE 或者 Edge 下被完全支持。如果要在你的 clip-path 中使用外部的 SVG 文件，瀏覽器支持度還要低;
十、如何讓一個盒子水平垂直居中
//已知寬高<div class="div1"></div><style>
.div1{
width:400px;
height:400px;
position:absolute;
left:50%;
top:50%
margin:-200px 0 0 -200px; }
</style>//未知寬高<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style>
.div1{
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
border: 1px solid #000;
width: 400px;
height: 400px; } </style></head><body> <div class="div1"></div></body></html>//未知寬高方法二：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style>
.div1{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
border: 1px solid #000;
width: 400px;
height: 400px; } </style></head><body> <div class="div1"></div></body></html>
2
JS部分
1、cookie、localStorage、sessionStorage的區別和使用？
cookie：是存儲在本地的數據，有時候也用cookies，通常經過加密，應用最經典的就是判斷註冊用戶是否已經登錄過該網站。 localStorage：僅在客戶端保存（即瀏覽器），不參與和服務器的通信；沒有時間限制，即使瀏覽器關閉，數據依然存在；
創建和訪問localStorage：
1）、設置數據：
var forgetData = {phone:vm.phone}; localStorage.setItem("forgetData",JSON.Stringfy(forgetData)); //forgetData是存儲在localStorage裏邊的本地數據；JSON.Stringfy(forgetData)是將數據轉化爲字符串格式；
獲取數據：
vm.forgetData=JSON.parse(localStorage.getItem("forgetData")); //將對象轉化爲json；
2）、設置：localStorage.name = "zhao";
獲取：localStorage.name //zhao localStorage.setItem(key,value);//設置數據 localStorage.getItem(key);//獲取數據 localStorage.removeItem(key);//刪除單個數據 localStorage.clear();//清除所有localStorage的數據
sessionStorage：當用戶的瀏覽器窗口關閉時，數據會被清除；
共同點：都是保存在瀏覽器端，且同源的。
區別：
cookie數據始終在同源的http請求中攜帶9即使不需要)，即cookie在瀏覽器和服務器之間來回傳遞；cookie數據還有路徑的概念，可以限制cookie只屬於某個路徑下。存儲大小限制也不同，cookie數據大小不能超過4K，同時因爲每次http請求都會攜帶cookie，所以cookie只能保存很小的數據。
sessionStorage和localStorage不會自動把數據發給服務器，只在本地保存，雖然也有大小限制，但是要比cookie大得多，可以達到5M或者更大。
數據有效期不同，sessionStorage僅在當前瀏覽器窗口關閉前有效，不能持久保存；localStorage：始終有效，瀏覽器窗口關閉也一直保存；cookie：只在cookie設置的過期時間之前保存，即使瀏覽器窗口關閉。
作用域不同，sessionStorage在不同瀏覽器窗口的數據不能共享，即使是同一個頁面；localStorage在所有的同源窗口中都是共享的；cookie也是在同源窗口中共享的，
2、如何實現瀏覽器多標籤頁之間的通信？
調用localStorage、cookie本地存儲方式。
3、JavaScript的typeof返回類型有哪些？
Object（null和Array）、number、undefined、string、Boolean
4、類型轉換
強制轉換：parseInt();parseFloat();number();
5、數組的方法
var list = [1,2,3];list.pop();//刪除數組的最後一個元素 var list = [1,2];list.unshift(0,1);//頭部添加 var list = [0,1,1,2,3];list.push(4,5);//尾部添加 var list = [1,2,3,4,5];var arr = list.concat(4,[5,6]);//把兩個數組連接起來 //var arr = [1,2,3,4,5]; //var list = [1,2,3];list.join("-"); //1-2-3list.reverse();//3,2,1list.slice(1);//var list = [2,3];list.slice(1,2);//var list = [2];list.slice(1,-2);//設置了兩個參數，終止下標爲負數，當出現負數時，將負數加上數組長度的值來替換該位置的數。var arr = list.splice(0,1);//刪除 var list = [2,3]; var arr = [1];可以刪除任意數量的項，只需指定2個參數；要刪除的第一項的位置和要刪除的項數。例如splice(0,2);會刪除當前數組的前兩項list.splice(2,0,4,6);//插入，var list = [1,2,4,6,3]; 可以向指定位置插入任意數量的項，需要3個參數，起始位置、0（要刪除的項數）、要插入的任意數量的項。例如splice(2,0,4,6);會從第二個位置插入4和6；list.splice(2,1,4,6);//替換，var list = [1,2,6,3]; 可以向指定位置插入任意數量的項，同時刪除任意數量的項，需要3個參數，起始位置、要刪除的項數、要插入的任意數量的項。例如splice(2,1,4,6);會從位置 2 開始插入4和6。list.sort();//按照第一個數字大小進行排序;function compare(a,b){
return a-b;//正序；
return b-a;//倒序；}list.sort(compare);
6、ajax請求時get和post的區別？
get：從服務器上獲取數據，傳送數據量小，安全性低，請求會被緩存，緩存是針對URL進行緩存的，get請求參數直接加在URL地址後面，一種參數組合就會產生一種URL的緩存，重複的請求結果是相同的；post：向服務器發送數據；傳送數據量大，請求不會被緩存，參數封裝在二進制的數據體中，服務器也不會記錄參數，相對安全，所以涉及用戶隱私的數據都要用post傳送；
7、ajax請求時，如何解釋json數據？
使用eval方法解析的時候，eval();不會去判斷該字符串是否合法，而且json對象裏的js方法也會被執行，這是非常危險的；推薦使用JSON.parse(); JSON.parse();把字符串轉化成json。
8、call和apply的區別？
共同點：
都可以用來代替另一個對象調用一個方法，將一個函數的對象上下文從初始的上下文改變爲由thisObj指定的新對象。
另一種說法，都能夠改變方法的執行上下文（執行環境），將一個對象的方法交給另一個對象來執行，並且是立即執行。
不同點：
apply();//最多只能有兩個參數--新this對象和一個數組argArray，如果給該方法傳遞多個參數，則把參數都寫進這個數組裏邊，當然，即使只有一個參數，也要寫進數組裏邊。
call();//可以接收多個參數，第一個參數apply()一樣，後面則是一串參數列表。
實際上，apply和call的功能是一樣的，只是傳入的參數列表的形式不同。
9、http常用狀態碼？
100 Continue 繼續，一般在發送post請求時，已發送了http header之後服務端將返回此信息，表示確認，之後發送具體參數信息 200 OK 正常返回信息 201 Created 請求成功並且服務器創建了新的資源 202 Accepted 服務器已接受請求，但尚未處理 301 Moved Permanently 請求的網頁已永久移動到新位置。 302 Found 臨時性重定向。 303 See Other 臨時性重定向，且總是使用 GET 請求新的 URI。 304 Not Modified 自從上次請求後，請求的網頁未修改過。 400 Bad Request 服務器無法理解請求的格式，客戶端不應當嘗試再次使用相同的內容發起請求。 401 Unauthorized 請求未授權。 403 Forbidden 禁止訪問。 404 Not Found 找不到如何與 URI 相匹配的資源。 500 Internal Server Error 最常見的服務器端錯誤。 503 Service Unavailable 服務器端暫時無法處理請求（可能是過載或維護）。
10.你有哪些性能優化的方法？
（詳情請看雅虎14條性能優化原則）。
（1） 減少http請求次數：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適；網頁Gzip，CDN託管，data緩存 ，圖片服務器。
（2） 前端模板 JS+數據，減少由於HTML標籤導致的帶寬浪費，前端用變量保存AJAX請求結果，每次操作本地變量，不用請求，減少請求次數
（3） 用innerHTML代替DOM操作，減少DOM操作次數，優化javascript性能。
（4） 當需要設置的樣式很多時設置className而不是直接操作style。
（5） 少用全局變量、緩存DOM節點查找的結果。減少IO讀取操作。
（6） 避免使用CSS Expression（css表達式)又稱Dynamic properties(動態屬性)。
（7） 圖片預加載，將樣式表放在頂部，將腳本放在底部 加上時間戳。
11.深拷貝和淺拷貝
基本類型指的是簡單的數據段，引用類型指的是多個值構成的對象； var name = "John"; // 基本類型值
var obj = new Object();
obj.name = "John";
// obj 爲引用類型值
在複製變量中，對於基本類型來說，兩者互不影響， var num = 1; var num1 = num; // num1 = 1;
var num1 = 3; // num還是1,不會變
淺拷貝和深拷貝的區別：
對於淺拷貝來說，對於一個數組（數組是一個對象），只要我們修改了一個拷貝數組，原數組也會跟着改變。
因爲他們引用的是同一個地址的數據，拷貝的時候並沒有給b數組創造獨立的內存，只是把a數組指向數據的指針拷貝給了b；
而深拷貝就與其相反，將會給b數組創造獨立的內存，並且將a數組的內容一一拷貝進來，兩者互不影響。
實現深拷貝：
一：層級拷貝，用遞歸實現；
二：JSON解析 var b = JSON.parse(JSON.stringify(a));
3
其他
一、怎麼讓Chrome支持小於12px 的文字？
這個我們在做移動端的時候，設計師圖片上的文字假如是10px，我們實現在網頁上之後。往往設計師回來找我們，這個字體能小一些嗎？我設計的是10px？爲啥是12px?其實我們都知道，谷歌Chrome最小字體是12px，不管你設置成8px還是10px，在瀏覽器中只會顯示12px，那麼如何解決這個坑爹的問題呢？
我們的做法是：
針對谷歌瀏覽器內核，加webkit前綴，用transform:scale()這個屬性進行縮放！
<style>pspan{font-size:10px;-webkit-transform:scale(0.8);display:block;}</style><p><span>haorooms博客測試10px</span></p>
二、IOS手機瀏覽器字體齒輪
修改-webkit-font-smoothing屬性，結果是：-webkit-font-smoothing:none:無抗鋸齒-webkit-font-smoothing: antialiased | subpixel-antialiased |default:灰度平滑
三、如何修改chrome記住密碼後自動填充表單的黃色背景？
大體可以通過input : -webkit-autofill來進行修改！
input:-webkit-autofill {background-color:#FAFFBD;background-image: none;color:#000;}
四、谷歌瀏覽器運行下面代碼，並解釋！
[].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)})
運行上面代碼之後，會發現HTML層都被使用不同的顏色添加了一個高亮的邊框。爲什麼會這樣呢？
首先我們來看
[].forEach.call()，關於call()和apply()，我前面有文章也寫過，具體可以看http://www.haorooms.com/post/js_constructor_pro
[].forEach.call()等價於Array.prototype.forEach.call()
其次我們來看$$("*")
你可以在你的Chrome瀏覽器控制檯中輸入$$('a')，然後你就能得到一個當前頁面中所有錨元素的列表。
$$函數是許多現代瀏覽器命令行API中的一個部分，它等價於document.querySelectorAll,你可以將一個CSS選擇器作爲這個函數的參數，然後你就能夠獲得當前頁面中所有匹配這個CSS選擇器的元素列表。如果你在瀏覽器控制檯以外的地方，你可以使用document.querySelectorAll('')來代替$$('')
爲元素添加顏色
爲了讓元素都有一個漂亮的邊框，我們在上面的代碼中使用了CSS屬性outline。outline屬性位於CSS盒模型之外，因此它並不影響元素的屬性或者元素在佈局中的位置，這對於我們來說非常有用。這個屬性和修改border屬性非常類似，因此下面的代碼應該不會很難理解：
a.style.outline="1px solid #"+ color
真正有趣的地方在於定義顏色部分：
（~~(Math.random()*(1<<24))).toString(16)
~~的作用相當於parseInt，和我前面講解的“|”功能類似，關於運算符“I” ，可以去看看！
通過上面代碼可以獲取到一個隨機的顏色值！
五、input [type=search] 搜索框右側小圖標如何美化？
美化效果如下圖：
右側默認的比較難看的按鈕，美化成右側效果。
input[type="search"]::-webkit-search-cancel-button{-webkit-appearance: none;height:15px;width:15px;border-radius:8px;background:url("images/searchicon.png")no-repeat 00;background-size:15px15px;}
用到的是僞元素::-webkit-search-cancel-button，關於什麼是僞類和爲元素，請看：http://www.haorooms.com/post/css_wl_wys
六、iOS safari 如何阻止“橡皮筋效果”？
可以參考一下知乎上的回答 https://www.zhihu.com/question/22256539 。
但是，我們遇到的問題不是這樣，我是要解決彈跳導致彈出層（position:absolute）的覆蓋層高度小於100%;
針對這個問題，我想到的解決方案如下：
方法一： 把position:absolute改成position:fixed，並在彈出層之後，設置body的高度是100%；overflow是hidden。
方法二：
思路是獲取蘋果瀏覽器導航欄的高度。然後滾動的時候，重新獲取其高度。在導航欄高度變小的時候，給彈出層增加高度的百分比！
代碼如下：
//ios safari 伸縮判斷var topbarHeight=window.outerHeight-window.innerHeight,agent=navigator.userAgent,globleflag=true;
$(window).scroll(function(){if(agent.indexOf("iPhone")!=-1|| agent.indexOf("iPad")!=-1){var topbarHeightNow=window.outerHeight-window.innerHeight;if(topbarHeightNow<topbarHeight){
globleflag=false//此處寫處理邏輯}else{
globleflag=true//此處寫處理邏輯}}});
七、實現點擊文字，文字後面radio選中效果
這個效果是前端很經常用到和遇到的效果了，實現這個效果的方式也很多，很多朋友用js和jquery來實現，但是最簡單的，我們可以直接用lable標籤的 for 屬性來實現。
看下下面例子：
<form><labelfor="male">Male</label><inputtype="radio"name="sex"id="male"/><br/><labelfor="female">Female</label><inputtype="radio"name="sex"id="female"/></form>
label 的for屬性後面跟着input的id,就可以點擊label，來觸發input效果了，大家可以試一試！
八、網站中，圖片文件（jpg，png,gif），如何點擊下載？而非點擊預覽？
我們平時在網站中的圖片，假如我們要下載，如下寫：
<ahref="haorooms博客.jpg">下載</a>
我們點擊下載按鈕，只會預覽“haorooms博客.jpg”這張圖片，並不會出現下載框，另存爲那種？那麼我們如何做呢？
我們只需要如下寫
<ahref="haorooms博客.jpg"download>下載</a>
就可以下載了。點擊如下進行嘗試吧！下載
不但如次，我們還可以指定文件名稱，如下寫法：
<ahref="haorooms博客.jpg"download="haoroom前端博客圖片下載">下載</a>
測試如下：下載
上面就是指定下載的寫法！
九、Math.min()比Math.max()大
Math.min()<Math.max()// falseMath.min()>Math.max()// true
因爲Math.min() 返回 Infinity, 而 Math.max()返回 -Infinity。
前端技術棧問題
1
vue相關問題？
更多前端技能請關注公衆號”極致簡文“
▼
往期精彩回顧
▼
