前端面試題總結——綜合問題(持續更新中)

楷楷發表於2019-02-16
前端面試題

前端面試題總結——綜合問題(持續更新中)

1.頁面從輸入URL到頁面載入顯示完成，這個過程中都發生了什麼？（流程說的越詳細越好）

1.輸入域名地址
2.傳送至DNS伺服器並獲得域名對應的WEB伺服器IP地址；
3.與WEB伺服器建立TCP連線；
4.伺服器的永久重定向響應（從 http://example.com 到 http://www.example.com）
5.瀏覽器跟蹤重定向地址
6.伺服器處理請求
7.伺服器返回一個HTTP響應
8.瀏覽器顯示 HTML
9.瀏覽器傳送請求獲取的資源（如圖片、音訊、視訊、CSS、JS等等）
10.瀏覽器傳送非同步請求

2.瀏覽器工作原理

1.使用者介面 2.網路 3.UI後端 4.資料儲存
5.瀏覽器引擎 6.渲染引擎 7.js直譯器

3.瀏覽器解析過程：

流程：解析html以構建dom樹->構建render樹->佈局render樹->繪製render樹

4.介紹一下你對瀏覽器核心的理解？

主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎：負責取得網頁的內容（HTML、XML、影像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，然後會輸出至顯示器或印表機。
瀏覽器的核心的不同對於網頁的語法解釋會有不同，所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網路內容的應用程式都需要核心。
JS引擎則：解析和執行javascript來實現網頁的動態效果。
最開始渲染引擎和JS引擎並沒有區分的很明確，後來JS引擎越來越獨立，核心就傾向於只指渲染引擎。

5.常見的瀏覽器核心有哪些？

Trident核心：IE,360，傲遊，搜狗，世界之窗，騰訊等。[又稱MSHTML]
Gecko核心：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto核心：Opera7及以上。 [Opera核心原為：Presto，現為：Blink;]
Webkit核心：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]

6.請描述一下 cookies，sessionStorage 和 localStorage 的區別？

cookie是網站為了標示使用者身份而儲存在使用者本地終端（Client Side）上的資料（通常經過加密），
，資料會在瀏覽器和伺服器間來回傳遞。
sessionStorage和localStorage不會自動把資料發給伺服器，僅在本地儲存。
儲存大小：

cookie資料大小不能超過4k。
sessionStorage和localStorage 雖然也有儲存大小的限制，但比cookie大得多，可以達到5M或更大。

有期時間：

localStorage    儲存持久資料，瀏覽器關閉後資料不丟失除非主動刪除資料；
sessionStorage  資料在當前瀏覽器視窗關閉後自動刪除。
cookie          設定的cookie過期時間之前一直有效，即使視窗或瀏覽器關閉

7.請大概描述下頁面訪問cookie的限制條件

跨域問題，設定了HttpOnly。

8.如何實現瀏覽器內多個標籤頁之間的通訊? (阿里)

呼叫localstorge、cookies等本地儲存方式

9.頁面可見性（Page Visibility API） 可以有哪些用途？

通過 visibilityState 的值檢測頁面當前是否可見，以及開啟網頁的時間等;
在頁面被切換到其他後臺程式的時候，自動暫停音樂或視訊的播放；

10.網頁驗證碼是幹嘛的，是為了解決什麼安全問題。

區分使用者是計算機還是人的公共全自動程式。可以防止惡意破解密碼、刷票、論壇灌水；
有效防止黑客對某一個特定註冊使用者用特定程式暴力破解方式進行不斷的登陸嘗試。

11.為什麼利用多個域名來儲存網站資源？

CDN快取更方便 ，突破瀏覽器併發限制
節約cookie頻寬 ，節約主域名的連線數，優化頁面響應速度 防止不必要的安全問題

12.請談一下你對網頁標準和標準制定機構重要性的理解。

網頁標準和標準制定機構都是為了能讓web發展的更‘健康’，開發者遵循統一的標準，降低開發難度，開發成本，SEO也會更好做，也不會因為濫用程式碼導致各種BUG、安全問題，最終提高網站易用性。

13.知道什麼是微格式嗎？

　微格式（Microformats）是一種讓機器可讀的語義化XHTML詞彙的集合，是結構化資料的開放標準。是為特殊應用而制定的特殊格式
　優點：將智慧資料新增到網頁上，讓網站內容在搜尋引擎結果介面可以顯示額外的提示。

14.一個頁面上有大量的圖片，載入很慢，你有哪些方法優化這些圖片的載入，給使用者更好的體驗。

（1）圖片懶載入，在頁面上的未可視區域可以新增一個滾動條事件，判斷圖片位置與瀏覽器頂端的距離與頁面的距離，如果前者小於後者，優先載入。
（2）如果為幻燈片、相簿等，可以使用圖片預載入技術，將當前展示圖片的前一張和後一張優先下載。
（3）如果圖片過大，可以使用特殊編碼的圖片，載入時會先載入一張壓縮的特別厲害的縮圖，以提高使用者體驗。
（4）如果圖片展示區域小於圖片的真實大小，則因在伺服器端根據業務需要先行進行圖片壓縮，圖片壓縮後大小與展示一致。

15.談談以前端角度出發做好SEO（搜尋引擎）需要考慮什麼？

合理的標籤使用， 主要的網際網路目錄，連結交換和連結廣泛度。

16.請寫出一些前端效能優化的方式，越多越好

1.減少dom操作
2.部署前，圖片壓縮，程式碼壓縮
3.優化js程式碼結構，減少冗餘程式碼
4.減少http請求，合理設定 HTTP快取
5.使用內容分發cdn加速
6.靜態資源快取
7.圖片延遲載入

17.描述一下漸進增強和優雅降級之間的不同?

區別：優雅降級是從複雜的現狀開始，並試圖減少使用者體驗的供給，而漸進增強則是從一個非常基礎的，能夠起作用的版本開始，並不斷擴充，以適應未來環境的需要。降級（功能衰減）意味著往回看；而漸進增強則意味著朝前看，同時保證其根基處於安全地帶。

18.webSocket如何相容低瀏覽器？(阿里)

Adobe Flash Socket 、
ActiveX HTMLFile (IE) 、
基於 multipart 編碼傳送 XHR 、
基於長輪詢的 XHR

19.web開發中會話跟蹤的方法有哪些

  1. cookie 2.session
  2. url重寫 4.隱藏input 5.ip地址

20.HTTP method

  1. 一臺伺服器要與HTTP1.1相容，只要為資源實現GET和HEAD方法即可
  2. GET是最常用的方法，通常用於請求伺服器傳送某個資源。
  3. HEAD與GET類似，但伺服器在響應中值返回首部，不返回實體的主體部分
  4. PUT讓伺服器用請求的主體部分來建立一個由所請求的URL命名的新文件，或者，如果那個URL已經存在的話，就用幹這個主體替代它
  5. POST起初是用來向伺服器輸入資料的。實際上，通常會用它來支援HTML的表單。表單中填好的資料通常會被送給伺服器，然後由伺服器將其傳送到要去的地方。
  6. TRACE會在目的伺服器端發起一個環回診斷，最後一站的伺服器會彈回一個TRACE響應並在響應主體中攜帶它收到的原始請求報文。TRACE方法主要用於診斷，用於驗證請求是否如願穿過了請求/響應鏈。
  7. OPTIONS方法請求web伺服器告知其支援的各種功能。可以查詢伺服器支援哪些方法或者對某些特殊資源支援哪些方法。
  8. DELETE請求伺服器刪除請求URL指定的資源

21.HTTP response報文結構是怎樣的

rfc2616中進行了定義：

  1. 首行是狀態行包括：HTTP版本，狀態碼，狀態描述，後面跟一個CRLF
  2. 首行之後是若干行響應頭，包括：通用頭部，響應頭部，實體頭部
  3. 響應頭部和響應實體之間用一個CRLF空行分隔
  4. 最後是一個可能的訊息實體 響應報文例子如下：

22.HTTP狀態碼及其含義

狀態碼型別
狀態碼 類別 原因短語
1XX Information（資訊性狀態碼） 接收的請求正在處理
2XX Success（成功狀態碼） 請求正常處理完畢
3XX Redirection（重定向狀態碼） 需要進行附加的操作以完成請求
4XX Client Error（客戶端錯誤狀態碼） 伺服器無法處理請求
5XX Server Error（服務端錯誤狀態碼） 伺服器處理請求出錯
204：伺服器成功處理，但未返回內容。
304：Not Modified 未修改。所請求的資源未修改，伺服器返回此狀態碼時，不會返回任何資源。客戶端通常會快取訪問過的資源，通過提供一個頭資訊指出客戶端希望只返回在指定日期之後修改的資源
400：Bad Request 客戶端請求的語法錯誤，伺服器無法理解
403：Forbidden 伺服器理解請求客戶端的請求，但是拒絕執行此請求
404：Not Found 伺服器無法根據客戶端的請求找到資源（網頁）。通過此程式碼，網站設計人員可設定”您所請求的資源無法找到”的個性頁面

23.什麼是同源：協議相同 域名相同 埠相同

同源政策的目的，是為了保證使用者資訊的安全，防止惡意的網站竊取資料。
如果非同源，共有三種行為受到限制。
（1） Cookie、LocalStorage 和 IndexDB 無法讀取。
（2） DOM 無法獲得。
（3） AJAX 請求不能傳送。

24.關於建站安全防護

答：要做好防XSS、CSRF、SQL隱碼攻擊.DDOS攻擊。
XSS概念:
譯為跨站指令碼攻擊,具體是指攻擊者在Web頁面裡插入惡意Script指令碼，當使用者瀏覽該網頁時，Script程式碼會被執行，從而進行惡意攻擊。
XSS預防:
關鍵cookie欄位設定httpOnly
輸入檢查,特殊字元 < > / &等,對其進行轉義後儲存
CSRF概念：
本質上講，是黑客將一個http介面中需要傳遞的所有引數都預測出來，然後不管以什麼方式，他都可以根據他的目的來任意呼叫你的介面，對伺服器實現CURD。
CSRF 預防：
使用驗證碼，更高階用圖靈測試
SQL概念：
通常沒有任何過濾，直接把引數存放到了SQL語句當中
SQL預防：
根本上防止SQL隱碼攻擊的方法，就是引數化查詢或者做詞法分析。
DDOS概念：
利用木桶原理，尋找利用系統應用的瓶頸；阻塞和耗盡；當前問題：使用者的頻寬小於攻擊的規模，噪聲訪問頻寬成為木桶的短板。
DDOS預防：用軟硬體結合的方式來防禦是最有效的

25.對前端工程化的理解

1.開發規範
2.模組化開發
3.元件化開發
4.元件倉庫
5.效能優化
6.專案部署
7.開發流程
8.開發工具

26.AMD和CMD是什麼？它們的區別有哪些？

AMD和CMD是二種模組定義規範。現在都使用模組化程式設計，AMD，非同步模組定義；CMD，通用模組定義。AMD依賴前置，CMD依賴就近。CMD的API職責單一，沒有全域性require，AMD的一個API可以多用。

27.MVC BFC

mvc是模型(model)－檢視(view)－控制器(controller)的縮寫，一種軟體設計典範使用MVC的目的是將M和V的實現程式碼分離，從而使同一個程式可以使用不同的表現形式。MVC對應Html，CSS，js。
BFC全稱”Block Formatting Context”, 中文為“塊級格式化上下文”。流體特性：塊狀水平元素，如div元素（下同），在預設情況下（非浮動、絕對定位等），水平方向會自動填滿外部的容器；BFC元素特性表現原則就是，內部子元素不會影響外部的元素。

28.你如何對網站的檔案和資源進行優化？

期待的解決方案包括：檔案合併檔案最小化/檔案壓縮使用CDN託管快取的使用（多個域名來提供快取）其他。

29.你都使用哪些工具來測試程式碼的效能？

Profiler,JSPerf,Dromaeo。

30.如果網頁內容需要支援多語言，你會怎麼做？

1.應用字符集的選擇，選擇UTF-8編碼
2.語言書寫習慣&導航結構
3.資料庫驅動型網站

31.如果設計中使用了非標準的字型，你該如何去實現？

所謂的標準字型是多數機器上都會有的，或者即使沒有也可以由預設字型替代的字型。
方法：
用圖片代替
web fonts線上字型檔，如Google Webfonts，Typekit等等；http://www.chinaz.com/free/20…；
@font-face，Webfonts(字型服務例如：Google Webfonts，Typekit等等。)

32.：如何自學一門新程式語言

(1)瞭解背景知識：歷史、現狀、特點、應用領域、發展趨勢
(2)搭建開發環境，編寫HelloWorld
(3)宣告變數和常量
(4)資料型別
(5)運算子
(6)邏輯結構
(7)通用小程式
(8)函式和物件
(9)第三方庫、元件、框架
(10)實用專案

33.什麼是雜湊表？

雜湊表（也叫雜湊表），是根據關鍵碼值直接進行訪問的資料結構。也就是說，它通過把關鍵碼值對映到表中一個位置來訪問記錄，以加快查詢的速度。這個對映函式叫做雜湊函式，存放記錄的陣列叫做雜湊表。

34.靜態網頁和動態網頁區別：

靜態:網頁內容任何人在任何時間訪問都是不變的

    HTML/CSS/JS/視訊/音訊

動態:網頁內容不同人在不同時間訪問可能是不同的

    JSP/PHP/ASP.NET/Node.JS

35.SQL語句的分類

DDL:資料定義語句 CREATE/DROP/ALTER…
DCL:資料控制語句 GRANT…
DML:操作操作語句 INSERT/UPDATE/DELETE
DQL:查詢語句 SELECT

36.如何學習新技術: 3步:

  1. 上官網看是什麼
  2. 上官網看快速入門
  3. 下載手冊備查

37.什麼是彈性佈局？

解決某元素中“子元素”的佈局方式，為佈局提供最大的靈活性。
設為flex佈局以後，子元素的float、clear和vertical-align屬性將失效!!!
display:flex; 屬性align-self 定義子元素的位置。

38.編寫響應式？

1.宣告viewport元標籤 2.使用流式佈局 3.所有容器使用相對尺寸，不用絕對尺寸
4.（最重要原則）使用CSS3 Media Query技術

39.常見的瀏覽器相容問題？

1.不同瀏覽器的標籤預設的內.外補丁不同。
*{margin:0;padding:0;}
2.圖片預設有間距
使用float屬性為img佈局
3.居中問題（而FF預設為左對齊）
margin: 0 auto;
4.CSS 相容字首
-ms- IE
-moz- Firefox
-o- Opera
-webkit- Chrome
5.使用CSS Hack
如： +:IE6,7的字首

  -:IE6的字首

40.H5新特性：總共10點

(1)Canvas繪圖
(2)SVG繪圖
(3)地理定位
(4)Web Worker
web worker 是執行在後臺的 JS，獨立於其他指令碼，不會影響頁面的效能。
(5)Web Storage
1.Cookie技術 （ 相容性好,資料不能超4kb,操作複雜）2.（相容性差,資料8MB,操作簡單）sessionStorage 3.localStorage
(6)Web Socket
WebSocket協議是基於TCP的一種新的網路協議。它實現了瀏覽器與伺服器全雙工(full-duplex)通訊——允許伺服器主動傳送資訊給客戶端。

41.C3新特性：共7點

1.複雜的選擇器
2.彈性佈局
3.動畫

42.Less，Sass

Less 是一門 CSS 預處理語言，它擴充套件了 CSS 語言，增加了變數、函式等特性，使 CSS 更易維護和擴充套件。

43ES6新特性：共8點

1.ES7只有2個特性:1.includes() 驗證陣列中是否存在某個元素 2.指數操作符
2.ES8新特性：
Object.values()
Object.entries()
padStart()
padEnd()
Object.getOwnPropertyDescriptors()
函式引數列表結尾允許逗號
Async/Await

43.原生ajax

function setRequest(){
              //1.獲取xhr物件
              var xhr=createXhr();
              //2.建立請求
             xhr.open("get","response.php",true);
              //3.設定回撥函式-onreadystatechange
             xhr.onreadystatechange=function(){
                 //判斷readyState以及status
        if(xhr.readyState==4&&xhr.status==200){
             //接收響應資料
             var resText=xhr.responseText;
             //列印在控制檯
             console.log(resText); 
                 }
              }
             //4.傳送請求
              xhr.send(null);
           }

44.跨域

  1. 通過jsonp跨域
    1.）原生實現：
    <script>

    var script = document.createElement(`script`);
script.type = `text/javascript`;

// 傳參並指定回撥執行函式為onBack
script.src = `http://www.....:8080/login?user=admin&callback=onBack`;
document.head.appendChild(script);

// 回撥執行函式
function onBack(res) {
    alert(JSON.stringify(res));
}

    </script>

2.跨域資源共享（CORS）只要服務端設定Access-Control-Allow-Origin即可

  1. nodejs中介軟體代理跨域

45.什麼是typescript

1.它是JavaScript的一個超集，而且本質上向這個語言新增了可選的靜態型別和基於類的物件導向程式設計。
2.TypeScript擴充套件了JavaScript的語法，所以任何現有的JavaScript程式可以不加改變的在TypeScript下工作。
TypeScript是為大型應用之開發而設計，而編譯時它產生 JavaScript 以確保相容性。

46.三大框架的區別：

Angular帶有比較強的排它性的
React主張是函數語言程式設計的理念，侵入性沒有Angular那麼強，主要因為它是軟性侵入。
Vue 漸進式的

47.spa應用

優點：使用者體驗好 、良好的前後端分離。
缺點：
1.不利於SEO。
2.初次載入耗時相對增多。
3.導航不可用，如果一定要導航需要自行實現前進、後退。

48.什麼是模組化程式設計？

每個模組內部，module變數代表當前模組。
這個變數是一個物件，它的exports屬性（即module.exports）是對外的介面。載入某個模組，其實是載入該模組的module.exports屬性。

49.什麼是混合程式設計？

混合程式設計是指使用兩種或兩種以上的程式設計語言來開發應用程式的過程。

50.效能優化？

1.使用 CDN
2.圖片懶載入
3.使用外部 JavaScript 和 CSS
4.壓縮 JavaScript 、 CSS 、字型、圖片等
5.優化 CSS Sprite
6.減少 HTTP 請求數
7.減少 DNS 查詢
8減少 DOM 元素數量
9.減少 DOM 操作
10.把指令碼放在頁面底部

51.什麼是HTTP協議：

HTTP協議傳輸的資料都是未加密的，也就是明文的，因此使用HTTP協議傳輸隱私資訊非常不安全，HTTPS協議是由SSL+HTTP協議構建的可進行加密傳輸、身份認證的網路協議，要比http協議安全。

HTTPS和HTTP的區別主要如下：
　　1、https協議需要到ca申請證照，一般免費證照較少，因而需要一定費用。
　　2、http是超文字傳輸協議，資訊是明文傳輸，https則是具有安全性的ssl加密傳輸協議。
　　3、http和https使用的是完全不同的連線方式，用的埠也不一樣，前者是80，後者是443。
　　4、http的連線很簡單，是無狀態的；HTTPS協議是由SSL+HTTP協議構建的可進行加密傳輸、身份認證的網路協議，比http協議安全。

前端加密方式https：是在http基礎上加了SSL協議，使用443埠,http是80埠;

相關文章