45道前端面試題吐血整理
個人收錄，你不知道的，總會在這里找到答案，自己的強(qiáng)大才是真的強(qiáng)大，希望我寫的也可以幫到你。
1、頁面從輸入URL到頁面加載顯示完成，這個過程中都發(fā)生了什么？
1.輸入域名地址
2.發(fā)送至DNS服務(wù)器并獲得域名對應(yīng)的WEB服務(wù)器IP地址；
3.與WEB服務(wù)器建立TCP連接；
4.服務(wù)器的永久重定向響應(yīng)（從?
http://example.com?到?http://www.example.com）5.瀏覽器跟蹤重定向地址
6.服務(wù)器處理請求
7.服務(wù)器返回一個HTTP響應(yīng)
8.瀏覽器顯示 HTML
9.瀏覽器發(fā)送請求獲取的資源（如圖片、音頻、視頻、CSS、JS等等）
10.瀏覽器發(fā)送異步請求
這里我貼一篇不久前寫的文章?在瀏覽器地址欄鍵入URL，按下回車之后會經(jīng)歷了那些事
2、瀏覽器工作原理
1.用戶界面 、2.網(wǎng)絡(luò) 、3.UI后端 、4.數(shù)據(jù)存儲 、5.瀏覽器引擎 、6.渲染引擎 、7.js解釋器、
3、瀏覽器解析過程：
流程：解析?html?以構(gòu)建?dom?樹?->?構(gòu)建?render?樹->布局?render?樹->繪制?render樹
4.介紹一下你對瀏覽器內(nèi)核的理解？
主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎：負(fù)責(zé)取得網(wǎng)頁的內(nèi)容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網(wǎng)頁的顯示方式，然后會輸出至顯示器或打印機(jī)。瀏覽器的內(nèi)核的不同對于網(wǎng)頁的語法解釋會有不同，所以渲染的效果也不相同。所有網(wǎng)頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網(wǎng)絡(luò)內(nèi)容的應(yīng)用程序都需要內(nèi)核。
JS引擎則：解析和執(zhí)行javascript來實現(xiàn)網(wǎng)頁的動態(tài)效果。最開始渲染引擎和JS引擎并沒有區(qū)分的很明確，后來JS引擎越來越獨(dú)立，內(nèi)核就傾向于只指渲染引擎。
5.常見的瀏覽器內(nèi)核有哪些？
Trident內(nèi)核：IE,360，傲游，搜狗，世界之窗，騰訊等。[又稱MSHTML]
Gecko內(nèi)核：Netscape6及以上版本，F(xiàn)F,MozillaSuite/SeaMonkey等
Presto內(nèi)核：Opera7及以上。?[Opera內(nèi)核原為：Presto，現(xiàn)為：Blink;]
Webkit內(nèi)核：Safari,Chrome等。?[ Chrome的：Blink（WebKit的分支）]
6.請描述一下 cookies，sessionStorage 和 localStorage 的區(qū)別？
cookie是網(wǎng)站為了標(biāo)示用戶身份而儲存在用戶本地終端（Client Side）上的數(shù)據(jù)（通常經(jīng)過加密），數(shù)據(jù)會在瀏覽器和服務(wù)器間來回傳遞。sessionStorage和localStorage不會自動把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存。
存儲大小：
cookie數(shù)據(jù)大小不能超過4k。
sessionStorage和localStorage?雖然也有存儲大小的限制，但比cookie大得多，可以達(dá)到?5M?或更大。有期時間：
localStorage?存儲持久數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動刪除數(shù)據(jù);
sessionStorage?數(shù)據(jù)在當(dāng)前瀏覽器窗口關(guān)閉后自動刪除.
cookie?設(shè)置的cookie過期時間之前一直有效，即使窗口或瀏覽器關(guān)閉
7.請大概描述下頁面訪問cookie的限制條件
跨域問題，設(shè)置了HttpOnly。
8.如何實現(xiàn)瀏覽器內(nèi)多個標(biāo)簽頁之間的通信? (阿里)
調(diào)用localstorge、cookies等本地存儲方式
9.頁面可見性（Page Visibility API） 可以有哪些用途？
通過?visibilityState?的值檢測頁面當(dāng)前是否可見，以及打開網(wǎng)頁的時間等;
在頁面被切換到其他后臺進(jìn)程的時候，自動暫停音樂或視頻的播放
10.網(wǎng)頁驗證碼是做什么的，是為了解決什么安全問題。
區(qū)分用戶是計算機(jī)還是人的公共全自動程序?？梢?code style="margin-right: 2px;margin-left: 2px;padding: 2px 4px;font-size: inherit;color: rgb(233, 105, 0);line-height: inherit;border-radius: 4px;background: rgb(248, 248, 248);">防止惡意破解密碼、刷票、論壇灌水；
有效防止黑客對某一個特定注冊用戶用特定程序暴力破解方式進(jìn)行不斷的登陸嘗試。
11.為什么利用多個域名來存儲網(wǎng)站資源？
CDN?緩存更方便 ，突破瀏覽器并發(fā)限制 節(jié)約cookie帶寬 ，節(jié)約主域名的連接數(shù)，優(yōu)化頁面響應(yīng)速度 防止不必要的安全問題
12.談一下你對網(wǎng)頁標(biāo)準(zhǔn)和標(biāo)準(zhǔn)制定機(jī)構(gòu)重要性的理解。
網(wǎng)頁標(biāo)準(zhǔn)和標(biāo)準(zhǔn)制定機(jī)構(gòu)都是為了能讓?web?發(fā)展的更‘健康’，開發(fā)者遵循統(tǒng)一的標(biāo)準(zhǔn)，降低開發(fā)難度，開發(fā)成本，SEO也會更好做，也不會因為濫用代碼導(dǎo)致各種?BUG、安全問題，最終提高網(wǎng)站易用性。
13.知道什么是微格式嗎？
微格式（Microformats）是一種讓機(jī)器可讀的語義化?XHTML?詞匯的集合，是結(jié)構(gòu)化數(shù)據(jù)的開放標(biāo)準(zhǔn)。是為特殊應(yīng)用而制定的特殊格式
優(yōu)點(diǎn)：將智能數(shù)據(jù)添加到網(wǎng)頁上，讓網(wǎng)站內(nèi)容在搜索引擎結(jié)果界面可以顯示額外的提示。
14.一個頁面上有大量的圖片，加載很慢，你有哪些方法優(yōu)化這些圖片的加載，給用戶更好的體驗。
（1）圖片懶加載，在頁面上的未可視區(qū)域可以添加一個滾動條事件，判斷圖片位置與瀏覽器頂端的距離與頁面的距離，如果前者小于后者，優(yōu)先加載。
（2）如果為幻燈片、相冊等，可以使用圖片預(yù)加載技術(shù)，將當(dāng)前展示圖片的前一張和后一張優(yōu)先下載。
（3）如果圖片過大，可以使用特殊編碼的圖片，加載時會先加載一張壓縮的特別厲害的縮略圖，以提高用戶體驗。
（4）如果圖片展示區(qū)域小于圖片的真實大小，則因在服務(wù)器端根據(jù)業(yè)務(wù)需要先行進(jìn)行圖片壓縮，圖片壓縮后大小與展示一致。
可以看看這篇文章?關(guān)于前端優(yōu)化的一些方案
15.談?wù)勔郧岸私嵌瘸霭l(fā)做好SEO（搜索引擎）需要考慮什么？
合理的標(biāo)簽使用， 主要的互聯(lián)網(wǎng)目錄，鏈接交換和鏈接廣泛度。
16.請寫出一些前端性能優(yōu)化的方式，越多越好
1.減少dom操作
2.部署前，圖片壓縮，代碼壓縮
3.優(yōu)化js代碼結(jié)構(gòu)，減少冗余代碼
4.減少http請求，合理設(shè)置 HTTP緩存
5.使用內(nèi)容分發(fā)cdn加速
6.靜態(tài)資源緩存
7.圖片延遲加載
可以看看這篇文章?關(guān)于前端優(yōu)化的一些方案
17.描述一下漸進(jìn)增強(qiáng)和優(yōu)雅降級之間的不同?
區(qū)別：優(yōu)雅降級是從復(fù)雜的現(xiàn)狀開始，并試圖減少用戶體驗的供給，而漸進(jìn)增強(qiáng)則是從一個非?；A(chǔ)的，能夠起作用的版本開始，并不斷擴(kuò)充，以適應(yīng)未來環(huán)境的需要。降級（功能衰減）意味著往回看；而漸進(jìn)增強(qiáng)則意味著朝前看，同時保證其根基處于安全地帶。
18.webSocket如何兼容低瀏覽器？(阿里)
Adobe Flash Socket
ActiveX HTMLFile (IE)
基于 multipart 編碼發(fā)送 XHR
基于長輪詢的 XHR
19.web開發(fā)中會話跟蹤的方法有哪些
1.cookie
2.session
3.url重寫
4.隱藏input
5.ip地址
20.HTTP method
1.一臺服務(wù)器要與
HTTP1.1兼容，只要為資源實現(xiàn)GET和HEAD方法即可。2.
GET是最常用的方法，通常用于請求服務(wù)器發(fā)送某個資源。3.
HEAD?與?GET?類似，但服務(wù)器在響應(yīng)中值返回首部，不返回實體的主體部分。4.
PUT?讓服務(wù)器用請求的主體部分來創(chuàng)建一個由所請求的?URL?命名的新文檔，或者，如果那個?URL?已經(jīng)存在的話，就用干這個主體替代它。5.
POST?起初是用來向服務(wù)器輸入數(shù)據(jù)的。實際上，通常會用它來支持HTML的表單。表單中填好的數(shù)據(jù)通常會被送給服務(wù)器，然后由服務(wù)器將其發(fā)送到要去的地方。6.
TRACE?會在目的服務(wù)器端發(fā)起一個環(huán)回診斷，最后一站的服務(wù)器會彈回一個TRACE響應(yīng)并在響應(yīng)主體中攜帶它收到的原始請求報文。TRACE?方法主要用于診斷，用于驗證請求是否如愿穿過了請求/響應(yīng)鏈。7.
OPTIONS?方法請求?web?服務(wù)器告知其支持的各種功能?？梢圆樵兎?wù)器支持哪些方法或者對某些特殊資源支持哪些方法。8.
DELETE?請求服務(wù)器刪除請求?URL?指定的資源。
21.HTTP response報文結(jié)構(gòu)是怎樣的
rfc2616中進(jìn)行了定義：
1.首行是狀態(tài)行包括：HTTP版本，狀態(tài)碼，狀態(tài)描述，后面跟一個
CRLF2.首行之后是若干行響應(yīng)頭，包括：
通用頭部，響應(yīng)頭部，實體頭部3.響應(yīng)頭部和響應(yīng)實體之間用一個?
CRLF?空行分隔
22.HTTP狀態(tài)碼及其含義
舉例狀態(tài)碼類型:
| 狀態(tài)碼 | 類別 | 原因短語 |
|---|---|---|
| 1XX | Information（信息性狀態(tài)碼） | 接收的請求正在處理 |
| 2XX | Success（成功狀態(tài)碼） | 請求正常處理完畢 |
| 3XX | Redirection（重定向狀態(tài)碼） | 需要進(jìn)行附加的操作以完成請求 |
| 4XX | Client Error（客戶端錯誤狀態(tài)碼） | 服務(wù)器無法處理請求 |
| 5XX | Server Error（服務(wù)端錯誤狀態(tài)碼） | 服務(wù)器處理請求出錯 |
| 204 | 服務(wù)器成功處理，但未返回內(nèi)容。 | |
| 304 | Not Modified 未修改。 | 所請求的資源未修改，服務(wù)器返回此狀態(tài)碼時，不會返回任何資源?？蛻舳送ǔ彺嬖L問過的資源，通過提供一個頭信息指出客戶端希望只返回在指定日期之后修改的資源 |
| 400 | Bad Request | 客戶端請求的語法錯誤，服務(wù)器無法理解 |
| 403 | Forbidden | 服務(wù)器理解請求客戶端的請求，但是拒絕執(zhí)行此請求 |
| 404 | Not Found | 服務(wù)器無法根據(jù)客戶端的請求找到資源（網(wǎng)頁）。通過此代碼，網(wǎng)站設(shè)計人員可設(shè)置"您所請求的資源無法找到"的個性頁面 |
23.什么是同源：協(xié)議相同 域名相同 端口相同
同源政策的目的，是為了保證用戶信息的安全，防止惡意的網(wǎng)站竊取數(shù)據(jù)。
如果非同源，共有三種行為受到限制
1.
Cookie、LocalStorage?和?IndexDB?無法讀取。2.
DOM?無法獲得。3.
AJAX?請求不能發(fā)送。
24.關(guān)于建站安全防護(hù)
要做好防XSS、CSRF、SQL注入攻擊.DDOS攻擊。
XSS概念:
譯為跨站腳本攻擊,具體是指攻擊者在Web頁面里插入惡意Script腳本，當(dāng)用戶瀏覽該網(wǎng)頁時，Script代碼會被執(zhí)行，從而進(jìn)行惡意攻擊。
XSS預(yù)防:
關(guān)鍵
cookie字段設(shè)置httpOnly
輸入檢查,特殊字符 < > / &等,對其進(jìn)行轉(zhuǎn)義后存儲
CSRF概念：
本質(zhì)上講，是黑客將一個http接口中需要傳遞的所有參數(shù)都預(yù)測出來，然后不管以什么方式，他都可以根據(jù)他的目的來任意調(diào)用你的接口，對服務(wù)器實現(xiàn)CURD。
CSRF 預(yù)防：
使用驗證碼，更高級用圖靈測試
SQL概念：
通常沒有任何過濾，直接把參數(shù)存放到了SQL語句當(dāng)中
SQL預(yù)防：
根本上防止
SQL注入的方法，就是參數(shù)化查詢或者做詞法分析。
DDOS概念：
利用
木桶原理，尋找利用系統(tǒng)應(yīng)用的瓶頸；阻塞和耗盡；當(dāng)前問題：用戶的帶寬小于攻擊的規(guī)模，噪聲訪問帶寬成為木桶的短板。DDOS預(yù)防：用軟硬件結(jié)合的方式來防御是最有效的
25.對前端工程化的理解
1.開發(fā)規(guī)范
2.模塊化開發(fā)
3.組件化開發(fā)
4.組件倉庫
5.性能優(yōu)化
6.項目部署
7.開發(fā)流程
8.開發(fā)工具
26.AMD和CMD是什么？它們的區(qū)別有哪些？
AMD?和?CMD?是二種模塊定義規(guī)范?，F(xiàn)在都使用模塊化編程，AMD，異步模塊定義；CMD，通用模塊定義。AMD依賴前置，CMD依賴就近。CMD的?API?職責(zé)單一，沒有全局require，AMD的一個API可以多用。
27.MVC BFC
mvc是模型(model)－視圖(view)－控制器(controller)的縮寫，一種軟件設(shè)計典范使用MVC的目的是將M和V的實現(xiàn)代碼分離，從而使同一個程序可以使用不同的表現(xiàn)形式。MVC對應(yīng)Html，CSS，js。
BFC全稱”Block Formatting Context”, 中文為“塊級格式化上下文”。流體特性：塊狀水平元素，如div元素（下同），在默認(rèn)情況下（非浮動、絕對定位等），水平方向會自動填滿外部的容器；BFC元素特性表現(xiàn)原則就是，內(nèi)部子元素不會影響外部的元素。
28.你如何對網(wǎng)站的文件和資源進(jìn)行優(yōu)化？
期待的解決方案包括：文件合并文件最小化/文件壓縮使用CDN托管緩存的使用（多個域名來提供緩存）其他。
29.如果網(wǎng)頁內(nèi)容需要支持多語言，你會怎么做？
1.應(yīng)用字符集的選擇，選擇UTF-8編碼
2.語言書寫習(xí)慣&導(dǎo)航結(jié)構(gòu)
3.數(shù)據(jù)庫驅(qū)動型網(wǎng)站
30.如果設(shè)計中使用了非標(biāo)準(zhǔn)的字體，你該如何去實現(xiàn)？
所謂的標(biāo)準(zhǔn)字體是多數(shù)機(jī)器上都會有的，或者即使沒有也可以由默認(rèn)字體替代的字體。
方法：
用圖片代替
web fonts在線字庫，如
Google Webfonts，Typekit等等;http://www.chinaz.com/free/20…；
@font-face，Webfonts(字體服務(wù)例如：Google Webfonts，Typekit等等。)
31.如何自學(xué)一門新編程語言
(1)了解背景知識：歷史、現(xiàn)狀、特點(diǎn)、應(yīng)用領(lǐng)域、發(fā)展趨勢
(2)搭建開發(fā)環(huán)境，編寫HelloWorld
(3)聲明變量和常量
(4)數(shù)據(jù)類型
(5)運(yùn)算符
(6)邏輯結(jié)構(gòu)
(7)通用小程序
(8)函數(shù)和對象
(9)第三方庫、組件、框架
(10)實用項目
32.什么是哈希表？
散列表（也叫哈希表），是根據(jù)關(guān)鍵碼值直接進(jìn)行訪問的數(shù)據(jù)結(jié)構(gòu)。也就是說，它通過把關(guān)鍵碼值映射到表中一個位置來訪問記錄，以加快查找的速度。這個映射函數(shù)叫做散列函數(shù)，存放記錄的數(shù)組叫做散列表。
33.靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁區(qū)別：
靜態(tài):?網(wǎng)頁內(nèi)容任何人在任何時間訪問都是不變的
動態(tài):?網(wǎng)頁內(nèi)容不同人在不同時間訪問可能是不同的
34.SQL語句的分類
DDL:數(shù)據(jù)定義語句?
CREATE/DROP/ALTER…DCL:數(shù)據(jù)控制語句?
GRANT…DML:操作操作語句?
INSERT/UPDATE/DELETEDQL:查詢語句?
SELECT
35.什么是彈性布局？
解決某元素中“子元素”的布局方式，為布局提供最大的靈活性。
設(shè)為?flex?布局以后，子元素的?float、clear?和vertical-align屬性將失效!!!
display:flex; 屬性align-self?定義子元素的位置。
36.編寫響應(yīng)式？
1.聲明viewport元標(biāo)簽
2.使用流式布局
3.所有容器使用相對尺寸，不用絕對尺寸
4.（最重要原則）使用CSS3 Media Query技術(shù)
37.常見的瀏覽器兼容問題？
1.不同瀏覽器的標(biāo)簽?zāi)J(rèn)的內(nèi).外補(bǔ)丁不同。*{margin:0;padding:0;}
2.圖片默認(rèn)有間距使用float屬性為img布局
3.居中問題（而FF默認(rèn)為左對齊）
margin: 0 auto;4.CSS 兼容前綴?
-ms- IE、-moz- Firefox、-o- Opera、-webkit- Chrome、5.使用CSS Hack 如：?
+:IE6,7的前綴、-:IE6的前綴
38.H5新特性：
(1)
Canvas繪圖(2)
SVG繪圖(3)
地理定位(4)
Web Worker
web worker?是運(yùn)行在后臺的 JS，獨(dú)立于其他腳本，不會影響頁面的性能。(5)
Web Storage1.Cookie技術(shù) （ 兼容性好,數(shù)據(jù)不能超4kb,操作復(fù)雜）
2.（兼容性差,數(shù)據(jù)8MB,操作簡單）sessionStorage
3.localStorage
(6)
Web SocketWebSocket協(xié)議是基于TCP的一種新的網(wǎng)絡(luò)協(xié)議。它實現(xiàn)了瀏覽器與服務(wù)器全雙工(full-duplex)通信——允許服務(wù)器主動發(fā)送信息給客戶端。
39.C3新特性：
1.復(fù)雜的選擇器
2.彈性布局
3.動畫
40.什么是typescript
1.它是JavaScript的一個超集，而且本質(zhì)上向這個語言添加了可選的靜態(tài)類型和基于類的面向?qū)ο缶幊獭?/span>
2.
TypeScript擴(kuò)展了JavaScript的語法，所以任何現(xiàn)有的JavaScript程序可以不加改變的在TypeScript下工作。TypeScript是為大型應(yīng)用之開發(fā)而設(shè)計，而編譯時它產(chǎn)生 JavaScript 以確保兼容性。
41.三大框架的區(qū)別：
Angular帶有比較強(qiáng)的排它性的
React主張是函數(shù)式編程的理念，侵入性沒有Angular那么強(qiáng)，主要因為它是軟性侵入。
Vue 漸進(jìn)式的
42.spa應(yīng)用
優(yōu)點(diǎn)：用戶體驗好 、良好的前后端分離。
缺點(diǎn)：
1.不利于SEO。
2.初次加載耗時相對增多。
3.導(dǎo)航不可用，如果一定要導(dǎo)航需要自行實現(xiàn)前進(jìn)、后退。
43.什么是模塊化編程？
每個模塊內(nèi)部，module變量代表當(dāng)前模塊。
這個變量是一個對象，它的exports屬性（即module.exports）是對外的接口。加載某個模塊，其實是加載該模塊的module.exports屬性。
44.性能優(yōu)化？
1.使用 CDN
2.圖片懶加載
3.使用外部 JavaScript 和 CSS
4.壓縮 JavaScript 、 CSS 、字體、圖片等
5.優(yōu)化 CSS Sprite
6.減少 HTTP 請求數(shù)
7.減少 DNS 查詢
8.減少 DOM 元素數(shù)量
9.減少 DOM 操作
10.把腳本放在頁面底部
可以看看這篇文章?關(guān)于前端優(yōu)化的一些方案
45.什么是HTTP協(xié)議：
HTTP是一個客戶端和服務(wù)器端請求和應(yīng)答的標(biāo)準(zhǔn)
（TCP）。
HTTP1.1?和?2.0協(xié)議的區(qū)別：
HTTP1.1不支持?header?數(shù)據(jù)的壓縮，而2.0支持