面試題準備

1、HTML相關

1. HTML5新增特性和函數

• document.querySelector()
• classList: add()、 remove()
• requestFullScreen()
• preload和prefetch:
  rel="preload/prefetch" as="font/style/script.."(文件類型) type="font/woff2"
  preload：是聲明式的fetch，能夠強制瀏覽器請求資源，同時不阻賽文檔onload事件。能夠用於解決文字加載閃爍問題。
  prefetch：提示瀏覽器這個資源未來可能須要，是否和何時加載由瀏覽器決定。
  對於當前頁面頗有必要的資源使用preload，對於可能在未來使用的資源使用prefetch。同時聲明可能致使二次下載。

2. HTML語義化

• 語義化，就是經過HTML標籤來表示頁面包含信息。
• 語義化標籤有header、h1-六、aside、footer等
• 語義化使文檔結構清晰，便於維護；利於搜索引擎抓取網頁。

三、前端須要注意哪些SEO

• 合理的title、description、keywords
• 語義化的html代碼
• 重要內容放在文檔結構前面
• 重要內容不要用js輸出，爬蟲不會抓取執行js後獲取的內容
• 少用iframe，搜索引擎不會抓取iframe內容
• 圖片加上alt和title
• 保證網站打開速度

4. 解析HTML文檔

1. 解析HTML，構建DOM樹
2. 解析CSS，生成CSS規則樹
3. 合併DOM樹和CSS規則，生成render樹
4. 佈局render樹(layout/reflow)，負責各元素位置和尺寸計算
5. 繪製render樹(paint)，繪製頁面像素信息
6. 瀏覽器會將各層信息發送給GPU，GPU會將各層合成(composite)，顯示在屏幕上

5. 迴流/重排和重繪

迴流：即重排，元素內容、結構、位置或尺寸發生變化，須要從新計算樣式樹和渲染樹，引起迴流
重繪：元素髮生的改變只是影響了元素的一些外觀(背景色改變，邊框顏色改變等)，引起重繪
引發迴流：

• 頁面渲染初始化
• DOM結構改變、位置改變、佈局改變
• 窗口resize
• 獲取元素位置信息，也會致使迴流。(getComputedStyle、offsetTop、scrollTop等)

優化：

• 減小逐項更改樣式，一次性更改style或修改class
• 避免循環操做dom，能夠建立documentFragment，操做完後再添加到文檔中
• 避免屢次讀取元素位置信息，能夠緩存到變量中
• 改變元素樣式，使它脫離文檔流

6. 簡單層與複合層

• 默認只有一個複合圖層，因此DOM節點都是在這個複合圖層下
• 開啓硬件加速後，能夠將某個節點變成複合圖層
• 複合圖層之間的繪製互不干擾
• 簡單圖層中，即便是absolute佈局，變化時不影響總體迴流，可是因爲在同一個圖層中，仍然會影響繪製，所以作動畫時性能很低。推薦作動畫時開啓硬件加速。

7. 外部資源下載

CSS資源下載：

• CSS下載時異步，不會阻賽構建DOM樹
• 會阻賽渲染，構建render樹會等到CSS下載解析完畢後執行
• media query聲明的CSS不會阻賽渲染

JS資源下載：

• 阻賽瀏覽器解析，需等待腳本下載並執行完後纔會繼續解析HTML
• defer和async，腳本變成異步，會等到解析完畢後再執行。
• defer是延遲執行，效果就像是將腳本放在body後面。
• async是異步執行，異步下載完畢後就會執行，不確保執行順序，必定在onload前，但不肯定在DOMContentLoaded事件前或後
• DOMContentLoaded事件僅當DOM加載完畢後就會觸發，load事件會等頁面全部DOM、樣式表、腳本、圖片都加載完成後執行。

img資源：

• 異步下載，不會阻賽渲染，下載完畢後直接用圖片資源替換原有src

8. 瀏覽器加載白屏

1. 請求發出前：資源不合法，如跨域、https用http等；請求隊列太多或本資源優先級不夠高，資源被delay；dns出問題，劫持，dns服務器掛了等
2. 請求發送過程當中：沒有到達服務器，如cdn掛了；到達服務器但沒有到達處理程序，如在隊列裏堆積，40三、401等；服務端500了；成功運行，可是遲遲沒有返回，如代碼耗時久，死循環等
3. 請求返回後：解析階段報錯，返回類型不對；執行階段報錯，死循環或代碼錯誤；
4. 用戶緣由

9. 前端須要注意什麼

• 交互優化：請求時間過長，響應間隔過長
• 日誌埋點：生成環境操做埋點、報錯處理
• 異地容災：cdn切換、後端環境
• 減小事故、快速處理
• 請求方面：請求合併、順序依賴、權限控制、大數據查詢邏輯拆分
• 前端解耦
• 版本控制

2、CSS相關

1. CSS3新增特性有哪些

• 新增多種選擇器
• transform、transtion、animation
• background-clip、background-size、background-origin
• box-sizing

2. CSS預處理器

css預處理器有sass、less和stylus。

3. CSS盒模型

content-box (標準盒模型)、border-box(怪異盒模型)

3. 層疊優先級

從下到上：
層疊上下文background/border < 負z-index < block < float < inline < z-index: auto或z-index: 0或不依賴z-index的層疊上下文(例：transform、opacity) < 正z-index

4. 雪碧圖

概念：將多個小圖拼接到一個圖片中。經過background-position和元素尺寸調節須要顯示的圖案。
優勢：

• 減小HTTP請求數，提升頁面加載速度。
• 增長圖片信息重複度，提升壓縮比，減小圖片大小
• 更換風格方便

缺點：

• 圖片合併麻煩
• 維護麻煩

5. link和@import的區別

• link是HTML提供的標籤，@import是CSS提供的語法規則。
• 加載頁面時，link引入的CSS被同時加載；@import引入的CSS在頁面加載完後被加載。
• 能夠經過操做js控制link標籤，@import不行。
• link支持最大限度並行下載；當頁面引入過多@import，會致使加載順序混亂。（在IE瀏覽器中）
• link優於@import，無兼容性問題。

6. BFC和IFC

構成BFC:

• float值不爲none
• position值爲absolute或fixed
• dispaly值爲inline-block、flex、table-cell等
• overflow值不爲visibility

BFC特性:

• 解決了垂直方向外邊距摺疊問題
• 解決了浮動元素父級元素塌陷問題
• BFC內的子元素不受外部元素影響，也不影響外部元素。

IFC：水平方向上的margin、border和padding在框之間獲得保留。在垂直方向上能夠以不一樣方式對齊。line box高度由line-height決定。

3、JS相關

1. AJAX

原理：在用戶與服務器之間加了一箇中間層(ajax引擎)，使用戶操做與服務器響應異步化。
優勢：

• 無刷新更新數據
• 異步與服務器通訊
• 前端和後端負載平衡

缺點：

• 沒法瀏覽器後退和加入書籤功能
• 搜索引擎沒法搜索

function ajax (url, method) {
  var xhr = new XmlHttpRequest()
  xhr.open(method, url)
  xhr.send()
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
       console.log(xhr.responseText)
    } 
  }
}
複製代碼

2. 事件冒泡和事件捕獲

事件冒泡：事件會從最內層的元素開始發生，一直向上傳播，直到document對象。
時間捕獲：事件會從最外層開始發生，直到最具體的元素。
element.addEventListener(event, fn, useCapture)：useCapture爲false則在事件冒泡階段調用函數，爲true則在時間捕獲階段調用函數。
當事件冒泡和事件捕獲同時存在，對於非target節點先執行捕獲再執行冒泡，對於target節點，誰先註冊就先執行誰。
用這一機制，能夠實現事件代理。

3. this指向和call、apply和bind

this: ES5中，this永遠指向最後調用它的那個對象。箭頭函數中，會根據定義時的上下文肯定。箭頭函數中沒有this綁定，必須經過查找做用域決定其值，若是箭頭函數被非箭頭函數包含，則this綁定的最近一層非箭頭函數的this，不然，this爲undefined。
非嚴格模式下，this默認是window對象，嚴格模式下，則是undefined。
改變this指向:

• 使用es6箭頭函數
• 函數內部使用局部變量保存，例var _that = this
• 使用apply、call或bind
• new實例化一個對象

apply、call和bind的區別:
apply方法參數以數組形式傳入，非嚴格模式下，this傳null或undefined時會自動指向window對象；call方法參數以不定參形式傳入；bind會返回一個新的方法。

4. new期間作了什麼

1. 建立一個空對象obj
2. 將空對象的原型指向其構造函數的原型
3. 將this指向obj
4. 若是無返回值或返回一個非對象，則直接返回obj，不然返回指定的對象。

5. var、let和const

• 經過var聲明的變量存在變量提高特性
• let和const定義塊級做用域變量。不會被變量提高，重複聲明會報錯。
• var在全局聲明，會掛載在window對象上；但let和const不會。
• const不是指值不能夠修改，是不能夠修改內存地址指向。

臨時死區(Temporal Dead Zone)，TDZ。用let和const聲明的變量會放在TDZ中。訪問TDZ中的變量會觸發運行時錯誤。只有執行過變量聲明語句後，變量纔會從TDZ中移出，而後方可訪問。

6. arguments和caller、callee

arguments是一個類數組，只具備length屬性，可被轉換成數組。
callee指向當前執行的函數
caller指向調用對象，在全局調用函數返回null，在函數內部調用函數，返回外部函數引用。

7. requestAnimationFrame

該方法告訴瀏覽器你但願執行動畫並請求瀏覽器在下一次重繪以前調用指定函數來更新動畫。傳入一個回調函數做爲參數，回調函數會在每次重繪前調用。返回一個long性的id，用於在cancelAnimationFrame(id)以取消回調函數。

8.打開一個網頁經歷了哪些過程

1. 調用DNS服務，若是存在瀏覽器緩存、本地緩存或路由緩存時，直接返回緩存文件。
2. 發起一個http請求，創建TCP鏈接。
3. 服務端接到請求後，處理請求，返回響應報文。
4. 客戶端拿到返回的html文檔流後，開始解析
5. 解析DOM生成DOM樹，解析CSS生成CSSOM樹。而後合併生成render樹。
6. 進行layout/reflow和paint
7. 返回圖層信息，使用GPU進行硬件加速
8. 觸發load事件

9. event loop

• JS分爲同步任務和異步任務
• 同步任務都在主線程上執行，造成一個執行棧
• 主線程以外，事件觸發線程管理着一個任務隊列，只有異步任務有了運行結果，就在任務隊列中放置一個事件
• 一旦執行棧中的全部同步任務執行完畢(此時JS引擎線程空閒)，系統就會讀取任務隊列，將可運行的異步任務添加到可執行棧中，開始執行
• 定時器，是由定時器線程控制。當使用setTimeout和setInterval時，就會調用定時器線程。建議用setTimeout模擬setInterval。
• macroTask/task和microTask/jobs

macroaTask：每次執行棧執行的代碼就是一個宏任務(包括每次從事件隊列中獲取一個事件回調並放到執行棧中執行)。每個task會從頭至尾將這個任務執行完畢，不會執行其餘；每一個task執行結束後，在下一個task開始執行前，對頁面進行渲染。
造成macroTask的操做：主代碼塊，setTimeout、setInterval等
microTask：當前task執行結束後當即執行的任務。在某一個macroTask執行完後，會在它執行期間產生的microTask都執行完畢(在渲染前)。
造成microTask的操做：Promise、process.nextTick等

10. 變量對象、活得對象、執行環境、做用域鏈

執行環境定義了變量或函數有權訪問的其餘數據，決定了它們各自的行爲。每一個執行環境都有一個變量對象，環境中定義的全部變量和函數都保存在這個對象中。
當代碼在一個環境中執行時，會建立變量對象的一個做用域鏈。做用域鏈保證對執行環境有權訪問的全部變量和函數的有序訪問。 若是執行環境是函數，活動對象就被做爲變量對象。活動對象最開始只包含一個變量，即arguments對象(全局環境不存在arguments對象)。

4、HTTP相關

1. get和post

get和post都是http請求，http底層是TCP/IP，因此它們本質上是TCP連接。
get請求只是把參數放在url中請求數據，post請求則是把參數放在request body中。
get請求產生一個TCP數據包，post會產生兩個TCP數據包。get請求會把http header和data一併發送；post請求會先發送header。服務器響應100 continue，瀏覽器再發送data。

2. options請求

• 檢測服務器支持的請求方法，響應報文返回一個allow字段
• cors中的預檢請求，請求報文中Access-Control-Request-Method和Access-Control-Request-Headers，響應報文中返回Access-Control-Allow-Origin、Access-Control-Allow-Methods和Access-Control-Allow-Headers。
  優化：請求頭部添加Access-Control-Max-Age，在有效時間內，同類型請求不會再發送預檢請求。

3.五層因特爾協議棧

歸納：從應用層發送http請求，到傳輸層經過三次握手創建tcp/ip連接，網絡層進行ip尋址，再到數據鏈路層封裝成幀，最後物理層利用物理介質傳輸。

1. 應用層(dns、http)：DNS解析成IP併發送http請求
2. 傳輸層(tcp、udp)：簡歷tcp連接(三次握手)
3. 網絡層(IP、ARR)：IP尋址
4. 數據鏈路層：封裝成幀
5. 物理層：利用物理介質進行數據傳輸

OSI七層框架：多了會話層和表示層

1. 會話層：管理不一樣用戶和進程之間的對話，如控制登錄和註銷過程
2. 表示層：主要處理兩個通訊系統中交換信息的表示方式，包括數據格式交換，數據加密與解密，數據壓縮與終端類型轉換

4.http報文

報文通常包括：通用頭部，請求/響應頭部，請求/響應體
HTTP1.0定義了三種請求方法：get、post和head
HTTP1.0默認是短連接，一次http請求創建一次鏈接，結束就中斷鏈接
HTTP1.1新增了五種請求方法：OPTIONS、PUT、DELETE、TRACE和CONNECT
HTTP1.1默認是長連接
HTTP1.1中，每請求一個資源都須要開啓一個tcp鏈接。當資源數過多，會影響速度
HTTP2.0中，一個tcp鏈接能夠同時請求多個資源，速度顯著提高。
HTTP2.0：

• 多路複用(一個tcp鏈接能夠請求多個資源)
• 首部壓縮(http頭部壓縮，減小體積)
• 二進制分幀(在應用層跟傳送層之間增長了一個二進制分幀層。改進傳輸性能，實現低延遲和高吞吐量)
• 服務器端推送(服務端能夠對客戶端的一個請求發出多個響應，能夠主動通知客戶端)
• 請求優先級(若是流被賦予了優先級，它就會基於這個優先級來處理，由服務器決定須要多少資源處理該請求)

狀態碼：

• 200：請求成功，請求資源返回客戶端
• 304：請求資源未變動，直接使用本地緩存
• 400：請求有錯，如參數傳遞錯誤
• 401：請求未經受權，沒有權限
• 403：禁止訪問，好比未登陸時禁止訪問
• 404：請求資源未找到
• 500：服務器內部錯誤
• 503：服務不可用
• 1xx：指示信息，表示請求已接受，繼續處理
• 2xx：成功，表示請求已被成功接受
• 3xx：重定向，要求完成請求還須進行更進一步操做
• 4xx；客戶端錯誤，請求有語法錯誤或請求沒法實現
• 5xx：服務端錯誤，服務器未能實現合法請求

5. cookie和session

cookie：是瀏覽器的一種本地存儲方式，通常用來幫助客戶端和服務端通訊，經常使用來進行身份驗證，結合服務端session使用。主要內容包括：名字、值、過時時間、路徑和域。未設置過時時間，則是瀏覽器會話時間。

1. 用戶登陸後，服務端會生成一個session，session中有對於用戶的信息
2. 生成一個sessionid，在客戶端頁面中寫入cookie，值就是:jessionid=xxx
3. 之後發送請求時，就會自動帶上cookie，自動檢驗，有效時間內無須二次登錄校驗。

cookie中設置httponly，則js沒法讀取cookie
cookie和session的區別：

1. Cookie只能存儲ASCII字符串，Session能夠存儲複雜數據類型
2. Cookie存儲在客戶端，容易泄露。Session存儲在服務端，不存在數據泄露風險
3. Cookie能夠設置過時時間，而Session通常會話結束後就過時
4. Cookie保存在客戶端，不佔用服務端資源；Session保存在服務端，用戶不少時會消耗大量服務器內存
5. Cookie能夠設置爲多窗口共享，Session只在本窗口和子窗口有效
6. Cookie支持跨域訪問，Session僅在他所在域名有效

6. http和https

區別：https在請求前，會創建ssl連接，確保接下來的通訊是加密的，沒法被輕易截取分析。https開銷比http要大(須要創建安全連接和加密)，能夠配合HTTP2.0提高性能。
過程：

1. 瀏覽器請求創建SSL連接，向服務端發送一個隨機數和客戶端支持的加密算法，此時是明文傳輸
2. 服務端選擇一組加密算法和Hash算法，返回一個隨機數，並將本身的身份信息以證書形式返回給客戶端(證書裏包含了網站地址，非對稱加密的公匙，以及證書頒發機構信息等)
3. 瀏覽器收到服務端發來的證書後，驗證證書合法性，瀏覽器會產生新的隨機數，而後用證書中的公匙以及指定的加密算法加密後發送給服務端。利用這三個隨機數生成對稱加密傳輸key-session key。使用預約好的Hash算法計算握手消息，並使用生成的session key對消息加密傳輸給服務端。
4. 服務端收到瀏覽器的回覆後，生成session key，解密瀏覽器發來的握手消息，驗證Hash。再使用session key加密一段握手消息發送給客戶端
5. 瀏覽器解密並計算握手消息的Hash，若是與服務端發來的Hash一致，握手過程結束。

7. http緩存

緩存分爲強緩存(200 from cache)和協商緩存(304)
強緩存：瀏覽器若是判斷本地緩存未過時，就直接使用，無需發送http請求
協商緩存：瀏覽器會向服務端發送http請求，而後服務端告知瀏覽器文件未改變，讓瀏覽器繼續使用緩存(可使用ctrl + F5強制刷新使緩存失效)
強緩存頭部：http1.0 Pragma/Expires；http1.1 Cache-control/Max-Age
協商緩存頭部：http1.0 If-Modified-Since/Last-Modified；http1.1 If-None-Macth/ETag

8. 跨域

由於同源策略，當請求跨域資源時就會出現跨域問題。
CORS(跨域資源共享)實現：

1. 瀏覽器發送請求。若是是簡單請求就直接發送CORS請求(頭部中增長origin字段)；若是是非簡單請求則須要發送預檢請求(OPTIONS)。
2. 若是預檢請求檢測失敗，會返回一個沒有任何CORS相關頭部信息的報文，請求失敗。若是預檢請求成功，就能夠發送正式的請求到服務端了。
3. 簡單請求：請求方法是HEAD、GET、POST之一，Content-Type只能是application/x-www-form-urlencoded、multipart/form-data、text/plain之一，不能有自定義頭部字段。

解決跨域：

1. JSONP解決跨域：利用script標籤具備跨域能力。只能用於GET請求。
2. 配置CORS
3. window.postMessage()

9. 前端安全

XSS攻擊：跨站腳本攻擊，攻擊者經過注入非法Html或者js代碼，當用戶瀏覽網頁時，從而控制用戶瀏覽器。
XSS防範：設置httpOnly，對用戶輸入進行轉碼和過濾。
CSRF攻擊：跨站請求僞造。冒充用戶發送請求，完成一些違背用戶意願的事情。
CSRF防範：驗證碼、token、referer check

5、webpack

1. 原理

1. optimist將用戶配置的webpack.config.js和shell腳本傳過來的參數整合成options對象傳入下一個流程的控制對象中
2. 加載用戶配置在webpack.config.js的plugins，根據optimise.argv中參數的值決定是否加載對應插件(例：根據shell中指令，決定是否加載HotModuleReplacementPlugin插件)
3. 初始化compiler對象，調用compiler.run()（注：webpack的實際入口）,生成Compilation對象。這個對象有兩個做用：一是負責組織整個打包過程，包含了每一個構建環節及輸出環節所對應的方法；二是該對象內部存放着全部module、chunck、生成的asset以及用來生成最後打包文件的template信息

webpack關鍵事件節點：

• compile 開始編譯
• make 從入口點分析模塊及其依賴的模塊，建立這些模塊對象
• build-module 構建模塊
• after-compile 完成構建
• seal 封裝構建結果
• emit 把各個chunk輸出到結果文件
• after-emit 完成輸出

4. 觸發make，調用Compilation.addEntry，經過entry字段找到入口js文件。在addEntry方法中調用私有方法_addModuleChain，該方法主要完成兩件事：一是根據模塊類型獲取對應的模塊工廠並建立模塊，二是構建模塊
5. 觸發build-module，構建模塊：

1. 調用各loader處理模塊間的依賴，將全部資源都整合成模塊
2. 調用acorn解析經loader處理後的源文件生成抽象語法書AST
3. 遍歷AST，將當前模塊所依賴的模塊添加到依賴模塊數組中，而後構建該模塊所依賴的模塊

6. 打包輸出，觸發seal事件
7. 生成最終assets，調用emitAssets()，按照output中的配置項將文件輸出到對應的path中