當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

2021年前端面试题及答案

發布時間：2023/12/14 HTML 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 2021年前端面试题及答案小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

前端面試匯總（2020年）

一

大綱

1、前言

2、前端工程化

3、前端設計模式

4、前端安全性問題

5、前端跨域問題

6、前端數據加密

7、前端http相關問題

8、*前端基礎知識點面試題

9、前端技術棧問題

前言

由于新冠肺炎疫情，現在成天呆在家里，加上也要準備面試，就在家里看面試題，看著網上一堆面試題，決定收集常見題目匯總一下。關于面試大綱，我認為每個人都是千差萬別的。因為面試官都是對簡歷所寫的項目經驗進行深挖或者對你所掌握的基本技能進行考察。

前端工程化

什么是"前端工程化"？

前端工程化是使用軟件工程的技術和方法來進行前端的開發流程、技術、工具、經驗等規范化、標準化，其主要目的為了提高效率和降低成本，即提高開發過程中的開發效率，減少不必要的重復工作時間，而前端工程本質上是軟件工程的一種，因此我們應該從軟件工程的角度來研究前端工程。

如何做"前端工程化"？

前端工程化就是為了讓前端開發能夠“自成體系”，個人認為主要應該從模塊化、組件化、規范化、自動化四個方面思考。

前端設計模式

前端常見的設計模式主要有以下幾種，具體設計模式查看這篇文章。
1. 單例模式
2. 工廠模式
3. 策略模式
4. 代理模式
5. 觀察者模式
6. 模塊模式
7. 構造函數模式
8. 混合模式

前端安全性問題

這個是老的話題，有的在初中級前端面試中可能不會提到。但是在高級面試的時候，你要說出前端安全性問題防御，及前端常見安全性問題的攻擊原理是什么。

xss跨站腳本攻擊原理？如何進行？防御手段？

如何進行：如何XSS是指惡意攻擊者利用網站沒有對用戶提交數據進行轉義處理或者過濾不足的缺點，進而添加一些代碼，嵌入到web頁面中去。使別的用戶訪問都會執行相應的嵌入代碼。從而盜取用戶資料、利用用戶身份進行某種動作或者對訪問者進行病毒侵害的一種攻擊方式。

主要原理：過于信任客戶端提交的數據！

防御手段：不信任任何客戶端提交的數據，只要是客戶端提交的數據就應該先進行相應的過濾處理然后方可進行下一步的操作。

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攻擊。

Sql腳本注入原理？如何進行？防御手段？??

如何進行：利用現有應用程序，將（惡意）的SQL命令注入到后臺數據庫引擎執行的能力，它可以通過在Web表單中輸入（惡意）SQL語句得到一個存在安全漏洞的網站上的數據庫，而不是按照設計者意圖去執行SQL語句。

主要原理：通過把SQL命令插入到Web表單提交或輸入域名或頁面請求的查詢字符串，最終達到欺騙服務器執行惡意的SQL命令

防御手段：

使用預編譯，綁定變量（推薦）。

檢查數據類型。

過濾特殊字符和語句。

頁面不錯誤回顯。

web上傳漏洞原理？如何進行？防御手段？??

如何進行：用戶上傳了一個可執行的腳本文件，并通過此腳本文件獲得了執行服務器端命令的能力。

主要原理：當文件上傳時沒有對文件的格式和上傳用戶做驗證，導致任意用戶可以上傳任意文件，那么這就是一個上傳漏洞。

防御手段：

1. 最有效的，將文件上傳目錄直接設置為不可執行，對于Linux而言，撤銷其目錄的'x'權限；實際中很多大型網站的上傳應用都會放置在獨立的存儲上作為靜態文件處理，一是方便使用緩存加速降低能耗，二是杜絕了腳本執行的可能性；
2. 文件類型檢查：強烈推薦白名單方式，結合MIME Type、后綴檢查等方式；此外對于圖片的處理可以使用壓縮函數或resize函數，處理圖片的同時破壞其包含的HTML代碼；
3. 使用隨機數改寫文件名和文件路徑，使得用戶不能輕易訪問自己上傳的文件；
4. 單獨設置文件服務器的域名；

前端跨越問題

什么是跨域？??

由瀏覽器同源策略限制的一類請求場景，當不同地址，不同端口，不同級別，不同協議就會構成跨域。

什么是同源策略？??

所謂同源是指"協議+域名+端口"三者相同，即便兩個不同的域名指向同一個ip地址，也非同源。

它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，瀏覽器很容易受到XSS、CSFR等攻擊。

如何解決跨域？能說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協議跨域

前端數據加密問題

一般如何處理用戶敏感信息？??

前端一般使用md5、base64加密、sha1加密，想要了解詳情請自行百度。

前端http相關問題

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新）

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服務端：哈哈哈哈哈啊哈哈哈哈服務端：笑死我了哈哈哈哈哈哈哈

Http和Https的區別？??

1、https協議需要到ca申請證書，一般免費證書較少，因而需要一定費用。

2、http是超文本傳輸協議，信息是明文傳輸，https則是具有安全性的ssl加密傳輸協議。

3、http和https使用的是完全不同的連接方式，用的端口也不一樣，前者是80，后者是443。

4、http的連接很簡單，是無狀態的；HTTPS協議是由SSL+HTTP協議構建的可進行加密傳輸、身份認證的網絡協議，比http協議安全。

*前端基礎知識點面試題

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>

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、function

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)); ? ? ? ?

其他??

一、怎么讓Chrome支持小于12px 的文字？

這個我們在做移動端的時候，設計師圖片上的文字假如是10px，我們實現在網頁上之后。往往設計師回來找我們，這個字體能小一些嗎？我設計的是10px？為啥是12px?其實我們都知道，谷歌Chrome最小字體是12px，不管你設置成8px還是10px，在瀏覽器中只會顯示12px，那么如何解決這個坑爹的問題呢？

我們的做法是：

針對谷歌瀏覽器內核，加webkit前綴，用transform:scale()這個屬性進行縮放！

二、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。

前端技術棧問題

vue相關問題？??

更多前端技能請關注公眾號”極致簡文“

▼

往期精彩回顧

▼

React組件與生命周期

React函數組件和Class組件以及Hooks

2020年最火爆的Vue.js面試題

Redux使用之我要買個女朋友（入門篇）

關注公眾號，精彩不間斷

總結

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

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

上一篇：论文阅读：Softer-NMS: Ret
下一篇： Docker初级学习指南

HTML

2021年前端面试题及答案

前言

前端工程化

如何做"前端工程化"？

前端設計模式

前端安全性問題

xss跨站腳本攻擊原理？如何進行？防御手段？

CSRF跨站請求偽造原理？如何進行？防御手段？

Sql腳本注入原理？如何進行？防御手段？??

web上傳漏洞原理？如何進行？防御手段？??

前端跨越問題

什么是跨域？??

什么是同源策略？??

如何解決跨域？ 能說1，2，7，8就行。

前端數據加密問題

一般如何處理用戶敏感信息？??

前端http相關問題

HTTP常用狀態碼及其含義？??

websocket和輪詢及長輪詢區別??

Http和Https的區別？??

*前端基礎知識點面試題

HTML/5、CSS/3相關??

JS部分

其他??

一、怎么讓Chrome支持小于12px 的文字？

二、IOS手機瀏覽器字體齒輪

三、如何修改chrome記住密碼后自動填充表單的黃色背景？

四、谷歌瀏覽器運行下面代碼，并解釋！

首先我們來看

其次我們來看$$("*")

為元素添加顏色

五、input [type=search] 搜索框右側小圖標如何美化？

六、iOS safari 如何阻止“橡皮筋效果”？

七、實現點擊文字，文字后面radio選中效果

八、網站中，圖片文件（jpg，png,gif），如何點擊下載？而非點擊預覽？

九、Math.min()比Math.max()大

vue相關問題？??

總結

如何解決跨域？能說1，2，7，8就行。