前端面試題 -- 綜合

前言

這篇文章總結一些前端面試過程中常常遇到的 HTTP、瀏覽器、SEO 等方面的問題，若是有須要瞭解其餘面試問題的小夥伴， 請點擊 這裏，查看 HTML+CSS+JavaScript 等方面的問題。總結問題，分享給有須要的小夥伴,歡迎star關注

若是文章中有出現紕漏、錯誤之處，還請看到的小夥伴留言指正，先行謝過

如下 ↓

HTTP相關

1. HTTP有什麼特色

• 簡單快速：客戶向服務器請求服務時，只需傳送請求方法和路徑
• 靈活：HTTP容許傳輸任意類型的數據對象。正在傳輸的類型由 Content-Type 加以標記
• 無鏈接：無鏈接的含義是限制每次鏈接只處理一個請求。服務器處理完客戶的請求，並收到客戶的應答後，即斷開鏈接 (深刻-持久鏈接、管線化)
• 無狀態：HTTP協議是無狀態協議( Cookie 的出現)

2. http和https協議有什麼區別

http: 是互聯網上應用最爲普遍的一種網絡協議，是一個客戶端和服務器端請求和應答的標準（ TCP），用於從 WWW服務器傳輸超文本到本地瀏覽器的傳輸協議，它可使瀏覽器更加高效，使網絡傳輸減小

https: 是以安全爲目標的HTTP通道，簡單講是 HTTP 的安全版，即 HTTP 下加入 SSL 層，HTTPS 的安全基礎是 SSL ，所以加密的詳細內容就須要 SSL

• http 是超文本傳輸協議，信息是明文傳輸，https 則是具備安全性的 ssl 加密傳輸協議
• http 和 https 使用的是徹底不一樣的鏈接方式，用的端口也不同，前者是 80 ，後者是 443
• http 的鏈接很簡單，是無狀態的；HTTPS 協議是由 SSL+HTTP 協議構建的可進行加密傳輸、身份認證的網絡協議，比 http 協議安全

參考 http與https的區別

3. http狀態碼有那些？分別表明是什麼意思

經常使用 http 狀態碼：

• 200 OK 服務器成功處理了請求
• 301/302 Moved Permanently（重定向）請求的URL已移走
• 404 Not Found (頁面丟失)未找到資源
• 403 服務器拒絕請求
• 408 （請求超時） 服務器等候請求時發生超時
• 501 Internal Server Error 服務器遇到一個錯誤，使其沒法對請求提供服務
• 502 （錯誤網關） 服務器做爲網關或代理，從上游服務器收到無效響應
• 504 （網關超時） 服務器做爲網關或代理，可是沒有及時從上游服務器收到請求

更多 參考 這裏

4. 什麼是HTTP持久化和管線化

出現背景： HTTP 最初的版本中，每進行一次 HTTP 通訊，就要斷開一次 TCP 鏈接（無鏈接）

爲解決上述問題，HTTP/1.1 增長了持久鏈接（HTTP Persistent Connections ）的方法，其特色是，只要一方未明確提出斷開鏈接，則另外一方保持 TCP 鏈接狀態

管線化是指將多個 HTTP 請求整批發送，在發送過程當中不用等待對方響應

管線化是在持久鏈接的基礎上實現的，管線化的實現，可以同時並行發送多個請求，而不須要一個接一個的等待響應

5. Http報文

HTTP 報文是面向文本的，報文中的每個字段都是一些 ASCII 碼串，各個字段的長度是不肯定的。 HTTP 有兩類報文： 請求報文和響應報文

HTTP的這兩種報文都由三部分組成：開始行、首部行、實體主體

參考 這裏

6. 從輸入URL到頁面加載全過程

參考 這裏

7. 爲何利用多個域名來存儲網站資源會更有效

• CDN 緩存更方便
• 突破瀏覽器併發限制
• 節約 cookie 帶寬
• 節約主域名的鏈接數，優化頁面響應速度
• 防止沒必要要的安全問題

瀏覽器相關

1. 瀏覽器是由什麼組成的

從原理構成上分爲七個模塊，分別是 User Interface（用戶界面）、 Browser engine（瀏覽器引擎） 、 Rendering engine（渲染引擎） 、 Networking（網絡） 、 JavaScript Interpreter（js解釋器） 、 UI Backend（UI後端） 、 Date Persistence（數據持久化存儲）

其中，最重要的是渲染引擎（內核）和 JavaScript 解釋器（ JavaScript引擎）

瀏覽器內核主要負責 HTML 、CSS 的解析，頁面佈局、渲染與複合層合成; JavaScript 引擎負責 JavaScript 代碼的解釋與執行

2. 瀏覽器緩存機制

瀏覽器的緩存機制也就是咱們說的 HTTP 緩存機制，其機制是根據 HTTP 報文的緩存標識進行的

參考 這裏

3. 瀏覽器渲染機制

參考 這裏

4. 幾個很實用的BOM屬性對象方法

location 對象：主要存儲 url 相關信息

history 對象：瀏覽歷史信息相關

history.go() // 前進或後退指定的頁面數 history.go(num);
history.back() // 後退一頁
history.forward() // 前進一頁

navigator 對象：瀏覽器信息相關

navigator.userAgent  //返回用戶代理頭的字符串表示(就是包括瀏覽器版本信息等的字符串)
navigator.cookieEnabled // 返回瀏覽器是否支持(啓用)cookie

其餘

1. 談談你對SEO的理解

SEO：搜索引擎優化，其目的是爲了使網站可以更好的被搜索引擎抓取，提升在搜索引擎內的天然排名，從而帶來更多的免費流量，獲取收益

SEO主要有兩種方法，站內優化和站外優化

前端SEO優化

2. 前端怎麼控制管理路由

路由就是瀏覽器地址欄中的 url 與所見網頁的對應關係

前端路由的實現方式：

基於 hash（ ocation.hash+hashchange事件）

展現層面也就是切換 # 後面的內容，呈現給用戶不一樣的頁面。如今愈來愈多的單頁面應用，基本都是基於 hash 實現

特性：

• url 中 hash 值的變化並不會從新加載頁面
• hash 值的改變，都會在瀏覽器的訪問歷史中增長一個記錄，也就是能經過瀏覽器的回退、前進按鈕控制 hash 的切換
• 咱們能夠經過 hashchange 事件，監聽到 hash 值的變化，從而響應不一樣路徑的邏輯處理

基於 istory 新 API（ history.pushState()+popState 事件）

window.history.pushState(null, null, "http://www.google.com");

這兩個 API 的相同之處是都會操做瀏覽器的歷史記錄，而不會引發頁面的刷新。不一樣之處在於，pushState 會增長一條新的歷史記錄，而 replaceState 則會替換當前的歷史記錄

詳見History API -MDN

3. 防抖和節流的區別

防抖：任務頻繁觸發的狀況下，只有任務觸發的間隔超過指定間隔的時候，任務纔會執行

節流：指定時間間隔內只會執行一次任務

推薦 這裏

4. 頁面重構怎麼操做

頁面重構就是根據原有頁面內容和結構的基礎上，經過 div+css 寫出符合 web 標準的頁面結構。

具體實現要達到如下三點：

• 功能不全頁面的重構：頁面功能符合用戶體驗、用戶交互結構完整，可經過標準驗證，
• 代碼重構：代碼質量、SEO 優化、頁面性能、更好的語義化、瀏覽器兼容、CSS 優化
• 充分考慮到頁面在站點中的「做用和重要性」，並對其進行有針對性的優化

後記

這篇文章收集的問題雖然很少，可是每一部分單獨拎出來均可以寫一篇深刻理解，因此仍是很須要耐心才能夠看完的

這段時間收集了不少前端面試的相關問題，發現有些東西仍是很須要深刻理解的，有時候僅僅停留在 ‘會用’ 的階段仍是遠遠不夠的。因此，後面有時間也會聊一聊本身嘗試的東西，發現的問題，有興趣一塊兒探索的小夥伴能夠關注哦

期待同行 GitHub完整版面試題

以上