上一篇文章，我們對js相關的知識點做了一個具體的介紹，有需要的朋友可自行查看：前端常見面試-js篇。當然對於前端面試來説，還會涉及到一些原理性的東西，具體這篇來重點探討一下這方面的問題。
1、請講述一下瀏覽器從輸入一個url到網頁展示的整個過程？
具體總結主要為6個步驟：
- DNS解析：進行域名解析，找到對應的服務ip
- TCP連接 ：進行三次握手，確保可以進行數據傳輸
- 發送HTTP請求：發送具體的請求信息
- *服務器處理請求並返回HTTP報文：服務器返回詳情的內容，具體包括：狀態碼,響應報頭和響應報文
- 瀏覽器解析渲染頁面：首先瀏覽器解析HTML文件構建DOM樹，然後解析CSS文件構建渲染樹，等到渲染樹構建完成後，瀏覽器開始佈局渲染樹並將其繪製到屏幕上
- 連接結束：斷開TCP連接
具體深入瞭解，課詳細查看：從輸入URL到頁面加載發生了什麼
2、如何優化網站性能？
答：http 請求方面，減少請求數量，請求體積，對應的做法是，對項目資源進行壓縮，控制項目資源的 dns 解析在2到4個域名，提取公告的樣式，公共的組件，雪碧圖，緩存資源，壓縮資源，提取公共資源壓縮，提取 css ，js 公共方法不要縮放圖片，使用雪碧圖，使用字體圖表（阿里矢量圖庫）使用 CDN，拋開無用的 cookie減少重繪重排，CSS屬性讀寫分離，最好不要用js 修改樣式，dom 離線更新，渲染前指定圖片的大小js 代碼層面的優化，減少對字符串的計算，合理使用閉包，首屏的js 資源加載放在最底部
3、promise的理解？
Promise是異步編程的一種解決方案，比傳統的解決方案——回調函數和事件——更合理和更強大。它由社區最早提出和實現，ES6將其寫進了語言標準，統一了用法，原生提供了Promise對象。
所謂Promise，簡單説就是一個容器，裏面保存着某個未來才會結束的事件（通常是一個異步操作）的結果。從語法上説，Promise是一個對象，從它可以獲取異步操作的消息。Promise提供統一的API，各種異步操作都可以用同樣的方法進行處理。
有了Promise對象，就可以將異步操作以同步操作的流程表達出來，避免了層層嵌套的回調函數。此外，Promise對象提供統一的接口，使得控制異步操作更加容易。
Promise缺點
1）無法取消Promise，一旦新建它就會立即執行，無法中途取消。
2）如果不設置回調函數，Promise內部拋出的錯誤，不會反應到外部。
3）當處於Pending狀態時，無法得知目前進展到哪一個階段（剛剛開始還是即將完成）。
4）同步調用，在發起一個函數或方法調用時，沒有得到結果之前，該調用就不返回，直到返回結果；
説明：異步調用的概念和同步相對，在一個異步調用發起後，被調用者立即返回給調用者，但調用者不能立刻得到結果，被調用者在實際處理這個調用的請求完成後，通過狀態、通知或回調等方式來通知調用者請求處理的結果。
簡單地説，同步就是發出一個請求後什麼事都不做，一直等待請求返回後才會繼續做事；異步就是發出請求後繼續去做其他事，這個請求處理完成後會通知你，這時候就可以處理這個迴應了。
4、解決跨域的方法？
什麼是跨域
只要協議、域名、端口有不同，則視為不同的域。（域名和域名對應的IP也是跨域）
跨域的解決方案
1) CORS: (Cross-Origin Resource Sharing)基於服務器支持的跨域，服務器設置Access-Control-Allow-Origin響應頭，瀏覽器可允許跨域
2）服務器代理
3）設置domain:能從子域設到主域，如a.b.c.com—>b.c.com—>c.com ;具體情況：在頁面中用iframe打開了另一個頁面（前提：兩個頁面主域是相同的）;利用frameElement.contentWindow.document.domain設置frame子頁面的主域，document.domain設置主頁面的主域，之後就能互相獲取dom中的數據。缺點是隻能用於不同子域間的交互。
4）img的src：擁有src屬性的img標籤，每次改變src屬性，都會發起http請求，常用於埋點需求
5）postMessage
var win = window.open("http://target.com");
var win = document.getElementById("targetId").contentWindow;
win.postMessage("data here", "http://target.com/rest");
function handleMessage(event){
if(event.orgin!="http://test.org:4000")
return;
var data = event.data;
event.source.postMessage("response data here", event.origin);
}
window.addEventListener("message", handleMessage, false); 6）window.name：即使在頁面打開多層iframe後，每個iframe中window.name 屬性值都是相同的，以此用作數據傳輸的工具。
但由於跨域的限制，是無法獲取另一個frame中的window.name數據，所以要使用一個同域的代理(proxy.html)：
7）jsonp：只能獲取get請求
9）nginx代理
5、瀏覽器的理解？
1）用户界面 － 包括地址欄、後退/前進按鈕、書籤目錄等，也就是所看到的除了用來顯示所請求頁面的主窗口之外的其他部分
2）瀏覽器引擎 － 用來查詢及操作渲染引擎的接口
3）渲染引擎 － 用來顯示請求的內容，例如，如果請求內容為html，它負責解析html及css，並將解析後的結果顯示出來。
4）網絡 － 用來完成網絡調用，例如http請求，它具有平台無關的接口，可以在不同平台上工作。
5）UI後端 － 用來繪製類似組合選擇框及對話框等基本組件，具有不特定於某個平台的通用接口，底層使用操作系統的用户接口。
6）jS解釋器 － 用來解釋執行JS代碼。
7）數據存儲 － 屬於持久層，瀏覽器需要在硬盤中保存類似cookie的各種數據，HTML5定義了web database技術，這是一種輕量級完整的客户端存儲技術
6、async/await的理解？
async/await其實是Promise的語法糖，它能實現的效果都能用then鏈來實現，這也和我們之前提到的一樣，它是為優化then鏈而開發出來的。從字面上來看，async是“異步”的簡寫，await譯為等待，所以我們很好理解async聲明function是異步的，await等待某個操作完成
await等待的是一個Promise對象，或者是其他值（也就是説可以等待任何值），如果等待的是Promise對象，則返回Promise的處理結果；如果是其他值，則返回該值本身。並且await會暫停當前async function的執行，等待Promise的處理完成。若Promise正常處理（fulfillded），其將回調的resolve函數參數作為await表達式的值，繼續執行async function；若Promise處理異常（rejected），await表達式會把Promise異常原因拋出；另外如果await操作符後面的表達式不是一個Promise對象，則返回該值本身。
7、https模式下請求頭帶有cookie需要如何配置？
答：設置cookie的secure屬性，當設置為true時，表示創建的 Cookie 會被以安全的形式向服務器傳輸，也就是隻能在 HTTPS 連接中被瀏覽器傳遞到服務器端進行會話驗證，如果是 HTTP 連接則獲取該信息，所以不會被竊取到Cookie 的具體內容。 但是這會導致在同一服務器下HTTPS切換到HTTP協議時，HTTP無法訪問、修改同名Cookie，所以必須在HTTPS下清除Cookie或者設定Cookie的作用域。
8、請講述一下http和https的區別？
1）https協議需要到ca申請證書，一般免費證書較少，因而需要一定費用。
2）http是超文本傳輸協議，信息是明文傳輸，https則是具有安全性的ssl加密傳輸協議。
3）http和https使用的是完全不同的連接方式，用的端口也不一樣，前者是80，後者是443。
4）http的連接很簡單，是無狀態的；HTTPS協議是由SSL+HTTP協議構建的可進行加密傳輸、身份認證的網絡協議，比http協議安全。
9、請講述一下dom的重繪和重排？
部分渲染樹（或者整個渲染樹）需要重新分析並且節點尺寸需要重新計算。這被稱為重排。注意這裏至少會有一次重排-初始化頁面佈局。
由於節點的幾何屬性發生改變或者由於樣式發生改變，例如改變元素背景色時，屏幕上的部分內容需要更新。這樣的更新被稱為重繪。
造成重排或者重繪的場景
1）添加、刪除、更新 DOM 節點
2）通過 display: none 隱藏一個 DOM 節點-觸發重排和重繪
3）通過 visibility: hidden 隱藏一個 DOM 節點-只觸發重繪，因為沒有幾何變化
4）移動或者給頁面中的 DOM 節點添加動畫
5）添加一個樣式表，調整樣式屬性
6）用户行為，例如調整窗口大小，改變字號，或者滾動。
10、請講述一下ajax的理解和優缺點？
答：ajax是無須進行刷新頁面就可以請求後台的數據的一種方法，通過XmlHttpRequest對象來向服務器發送異步請求，從服務器中獲取數據，然後通過js進行操作dom，以此來更新頁面內容。
1）、具體實現過程
a、創建一個XmlHttpRequest的對象
b、設置響應HTTP請求的回調函數
c、創建一個HTTP請求，指定響應的請求方法、url、參數等
d、發送HTTP請求
e、獲取服務端返回的數據
f、使用js操作dom更新頁面的內容
2）缺點
a、對搜索引擎不友好
b、要實現Ajax下的前後退功能成本較大
c、跨域問題限制
11、請講解一下對jsonp的理解？
答：jsonp是一種非官方跨域數據交互協議，它允許在服務器端集成< script >標籤返回至客户端，通過javascript回調的形式實現跨域訪問。因為同源策略的原因，我們不能使用XMLHttpRequest與外部服務器進行通信，但是< script >可以訪問外部資源，所以通過JSON與< script >相結合的辦法，可以繞過同源策略從外部服務器直接取得可執行的JavaScript函數。
原理
客户端定義一個函數，比如jsonpCallback，然後創建< script >，src為url + ?jsonp=jsonpCallback這樣的形式，之後服務器會生成一個和傳遞過來jsonpCallback一樣名字的參數，並把需要傳遞的數據當做參數傳入，比如jsonpCallback(json)，然後返回給客户端，此時客户端就執行了這個服務器端返回的jsonpCallback(json)回調。
優缺點
優點 - 兼容性好，簡單易用，支持瀏覽器與服務器雙向通信
缺點 - 只支持GET請求；存在腳本注入以及跨站請求偽造等安全問題
注意：JSONP不使用XMLHttpRequest對象加載資源，不屬於真正意義上的AJAX。
12、如何設計封裝一個組件？
答：組件封裝的目的是為了重用，提高開發效率和代碼質量低耦合，單一職責，可複用性，可維護性前端組件化設計思路
13、js加載的方式defer/async
答：渲染引擎遇到 script 標籤會停下來，等到執行完腳本，繼續向下渲染defer 是“渲染完再執行”，async 是“下載完就執行”，defer 如果有多個腳本，會按照在頁面中出現的順序加載，多個async 腳本不能保證加載順序加載
14、css動畫和js動畫的區別？
答：js 動畫代碼相對複雜一些動畫運行時，對動畫的控制程度上，js 能夠讓動畫，暫停，取消，終止，css動畫不能添加事件動畫性能看，js 動畫多了一個js 解析的過程，性能不如 css 動畫好
15、XSS與CSRF兩種跨站攻擊區別？
xss
xss跨站腳本攻擊，主要是前端層面的，用户在輸入層面插入攻擊腳本，改變頁面的顯示，或則竊取網站 cookie，預防方法：不相信用户的所有操作，對用户輸入進行一個轉義，不允許 js 對 cookie 的讀寫
csrf
csrf 跨站請求偽造，以你的名義，發送惡意請求，通過 cookie 加參數等形式過濾，沒法徹底杜絕攻擊，只能提高攻擊門檻
16、ios滑動卡頓
-webkit-overflow-scrolling:touch 可能會在IOS系統低的情況出現滾動條；嘗試溢出解決
17、http請求常見狀態碼
主要包括：1*，2*，3*，4*以及5*，具體如下：
1*（臨時響應）
表示臨時響應並需要請求者繼續執行操作的狀態代碼。
100（繼續）:請求者應當繼續提出請求。 服務器返回此代碼表示已收到請求的第一部分，正在等待其餘部分。
101（切換協議）:請求者已要求服務器切換協議，服務器已確認並準備切換。
2*（成功）
表示成功處理了請求的狀態代碼
200（成功）: 服務器已成功處理了請求。 通常，這表示服務器提供了請求的網頁。
201（已創建）: 請求成功並且服務器創建了新的資源。
202（已接受）: 服務器已接受請求，但尚未處理。
203（非授權信息）: 服務器已成功處理了請求，但返回的信息可能來自另一來源。
204（無內容）: 服務器成功處理了請求，但沒有返回任何內容。
205（重置內容）:服務器成功處理了請求，但沒有返回任何內容。
206（部分內容）: 服務器成功處理了部分 GET 請求。
3*（重定向）
表示要完成請求，需要進一步操作。 通常，這些狀態代碼用來重定向
300（多種選擇）: 針對請求，服務器可執行多種操作。 服務器可根據請求者 (user agent) 選擇一項操作，或提供操作列表供請求者選擇。
301（永久移動）: 請求的網頁已永久移動到新位置。 服務器返回此響應（對 GET 或 HEAD 請求的響應）時，會自動將請求者轉到新位置。
302（臨時移動）: 服務器目前從不同位置的網頁響應請求，但請求者應繼續使用原有位置來進行以後的請求。
303（查看其他位置）:請求者應當對不同的位置使用單獨的 GET 請求來檢索響應時，服務器返回此代碼。
304（未修改）:自從上次請求後，請求的網頁未修改過。 服務器返回此響應時，不會返回網頁內容。
305（使用代理）:請求者只能使用代理訪問請求的網頁。 如果服務器返回此響應，還表示請求者應使用代理。
307（臨時重定向）: 服務器目前從不同位置的網頁響應請求，但請求者應繼續使用原有位置來進行以後的請求。
4*（請求錯誤）
表示請求可能出錯，妨礙了服務器的處理
400（錯誤請求）:服務器不理解請求的語法。
401（未授權）:請求要求身份驗證。 對於需要登錄的網頁，服務器可能返回此響應。
403（禁止）:服務器拒絕請求。
404（未找到）:服務器找不到請求的網頁。
405（方法禁用）:禁用請求中指定的方法。
406（不接受）:無法使用請求的內容特性響應請求的網頁。
407（需要代理授權）:此狀態代碼與 401（未授權）類似，但指定請求者應當授權使用代理。
408（請求超時）: 服務器等候請求時發生超時。
409（衝突）: 服務器在完成請求時發生衝突。 服務器必須在響應中包含有關衝突的信息。
1 410（已刪除）: 如果請求的資源已永久刪除，服務器就會返回此響應。
411（需要有效長度）:服務器不接受不含有效內容長度標頭字段的請求。
412（未滿足前提條件）:服務器未滿足請求者在請求中設置的其中一個前提條件。
413（請求實體過大）:服務器無法處理請求，因為請求實體過大，超出服務器的處理能力。
414（請求的 URI 過長）:請求的 URI（通常為網址）過長，服務器無法處理。
415（不支持的媒體類型）:請求的格式不受請求頁面的支持。
416（請求範圍不符合要求）:如果頁面無法提供請求的範圍，則服務器會返回此狀態代碼。
417（未滿足期望值）:服務器未滿足”期望”請求標頭字段的要求。
5*
示服務器在嘗試處理請求時發生內部錯誤。 這些錯誤可能是服務器本身的錯誤，而不是請求出錯
500（服務器內部錯誤）: 服務器遇到錯誤，無法完成請求。
501（尚未實施）:服務器不具備完成請求的功能。 例如，服務器無法識別請求方法時可能會返回此代碼。
502（錯誤網關）:服務器作為網關或代理，從上游服務器收到無效響應。
503（服務不可用）:服務器目前無法使用（由於超載或停機維護）。 通常，這只是暫時狀態。
504（網關超時）: 服務器作為網關或代理，但是沒有及時從上游服務器收到請求。
505（HTTP 版本不受支持）:服務器不支持請求中所用的 HTTP 協議版本。
