前端面試問題整理（34題）

 

1.http緩存機制，瀏覽器緩存究竟是什麼？
所謂的http緩存，就是瀏覽器本身給你的一個功能，一個緩存數據庫，夾在服務端和客戶端中間，你只須要設置一些參數便可實現  緩存/不緩存/時效內緩存/時效外緩存等（默認存在緩存）
瀏覽器緩存分爲強緩存和協商緩存，瀏覽器加載一個頁面的簡單流程以下：

（1）瀏覽器先根據這個資源的http頭信息來判斷是否命中強緩存。若是命中則直接加在緩存中的資源，並不會將請求發送到服務器。

（2）若是未命中強緩存，則瀏覽器會將資源加載請求發送到服務器。服務器來判斷瀏覽器本地緩存是否失效。若可使用，則服務器並不會返回資源信息，瀏覽器繼續從緩存加載資源。（3）若是未命中協商緩存，則服務器會將完整的資源返回給瀏覽器，瀏覽器加載新資源，並更新緩存。---------------------------------------------

2.瀏覽器 cookie 和 session 的認識
session 是基於 cookie 實現的。cookie 保存在客戶端瀏覽器中，而 session 保存在服務器上。cookie 機制是經過檢查客戶身上的「通行證」來肯定客戶身份的話，那麼 session 機制就是經過檢查服務器上的「客戶明細表」來確認客戶身份。session 至關於程序在服務器上創建的一份客戶檔案，客戶來訪的時候只須要查詢客戶檔案表就能夠了。

cookie 和 session 的區別：存在的位置：cookie 存在於客戶端，臨時文件夾中；session 存在於服務器的內存中，一個 session 域對象爲一個用戶瀏覽器服務安全性cookie 是以明文的方式存放在客戶端的，安全性低，能夠經過一個加密算法進行加密後存放；session 存放於服務器的內存中，因此安全性好生命週期(以 20 分鐘爲例)cookie 的生命週期是累計的，從建立時，就開始計時，20 分鐘後 cookie 生命週期結束；session 的生命週期是間隔的，從建立時，開始計時如在 20 分鐘，沒有訪問 session，那麼 session 生命週期被銷燬。可是，若是在 20 分鐘內（如在第 19 分鐘時）訪問過 session，那麼，將從新計算 session 的生命週期。關機會形成 session 生命週期的結束，可是對 cookie 沒有影響訪問範圍cookie 爲多個用戶瀏覽器共享；session 爲一個用戶瀏覽器獨享----------------------------------------------

3.前端經常使用框架：
bootstrap，angular，Vue，react----------------------------------------------

4.響應式佈局：
響應式Web設計可讓一個網站同時適配多種設備和多個屏幕，可讓網站的佈局和功能隨用戶的使用環境（屏幕大小、輸入方式、設備/瀏覽器能力）而變化響應式佈局主要經過:(媒體查詢 media query) 來爲不一樣的尺寸的屏幕下同一個元素來設置不一樣的樣式.----------------------------------------------

5.混合app：（瞭解）

Hybrid App是指介於web-app（網頁APP，如京東web）、native-app（原生應用，如手機上面的APP應用）這二者之間的app,兼具2者的優點。就是包了個客戶端的殼，其實裏面是HTML5的網頁。---------------------------------------------

6.async/await 和 promise 的區別
promise是ES6爲解決異步回調而生，避免出現回調地獄。async/await是基於Promise實現的，它不能用於普通的回調函數。async/await使得異步代碼看起來像同步代碼。使用Async/Await明顯節約了很多代碼。咱們不須要寫.then，不須要寫匿名函數處理Promise的resolve值，也不須要定義多餘的data變量，還避免了嵌套代碼。async/await讓咱們能夠同時捕獲異步和同步代碼拋出的異常。Promise若是在then()函數裏出現異常，在Promise的外面的try/catch是捕獲不到，這種狀況咱們須要使用Promise的catch()函數。----------------------------------------------

7.開發環境和生產環境
通常開發環境就是有不少調試代碼，和調試信息輸出的環境。運行環境把調試部分都刪除，或屏蔽了，速度會更快。開發環境：開發環境是程序猿們專門用於開發的服務器，配置能夠比較隨意， 爲了開發調試方便，通常打開所有錯誤報告。生產環境：是值正式提供對外服務的，通常會關掉錯誤報告，打開錯誤日誌。-------------------------------------------------

8.jquery 和 vue 的區別

jQuery是使用選擇器（$）選取DOM對象，對其進行賦值、取值、事件綁定等操做，其實和原生的HTML的區別只在於能夠更方便的選取和操做DOM對象，而數據和界面是在一塊兒的。好比須要獲取label標籤的內容：$("lable").val();,它仍是依賴DOM元素的值。 Vue則是經過Vue對象將數據和View徹底分離開來了。對數據進行操做再也不須要引用相應的DOM對象，能夠說數據和View是分離的，他們經過Vue對象這個vm實現相互的綁定。這就是傳說中的MVVM。vue適用的場景：複雜數據操做的後臺頁面，表單填寫頁面jquery適用的場景：好比說一些html5的動畫頁面，一些須要js來操做頁面樣式的頁面然而兩者也是能夠結合起來一塊兒使用的，vue側重數據綁定，jquery側重樣式操做，動畫效果等，則會更加高效率的完成業務需求---------------------------------------------------

9.html中的行內標籤，塊級標籤，行內快標籤
塊級標籤：獨佔一行，不和其餘元素待在同一行，能夠設置寬高。（div，p，h1-h6，ul，li，dl，dt）行內標籤：能和其餘元素待在同一行，不能設置寬高。（a，span，strong，u，em）行內塊標籤：能和其餘元素待在同一行，能設置寬高。（img,input,textarea）-----------------------------------------------------

10.Css3 盒子模型
在CSS裏，每一個可視的HTML元素在頁面上都會被渲染成一個矩形區域，一般被稱爲盒子模型。盒子模型主要定義四個區域：內容(content)、內邊距(padding)、邊框(border)，外邊距(margin)。
盒子模型有兩種類型：傳統的content-box和CSS3以後才導入的border-box，由box-sizing屬性定義。雖然border-box更位直觀，但由於兼容的緣由，缺省值仍然是傳統的content-box。
content-box：width和height定義的是內容(Content)部分的寬度和高度而不是整個盒子的高度，內邊距(padding)、邊框(border)和外邊距(margin)依次加在外面。背景會填充padding和content部分。
border-box：width和height定義包含邊框(border)，內邊距(padding)和內容(content)，但不包含外邊距(margin)-----------------------------------------------------

11.原型鏈
每一個對象均可以有一個原型_proto_，這個原型還能夠有它本身的原型，以此類推，造成一個原型鏈。查找特定屬性的時候，咱們先去這個對象裏去找，若是沒有的話就去它的原型對象裏面去，若是仍是沒有的話再去向原型對象的原型對象裏去尋找...... 這個操做被委託在整個原型鏈上，這個就是咱們說的原型鏈。
__proto__ 是原型鏈查詢中實際用到的，它老是指向 prototype原型對象；
prototype （原型對象）是函數所獨有的，在定義構造函數時自動建立，它老是被 __proto__ 所指。
全部對象都有__proto__屬性，函數這個特殊對象除了具備__proto__屬性，還有特有的原型屬性prototype。prototype對象默認有兩個屬性，constructor屬性和__proto__屬性。prototype屬性能夠給函數和對象添加可共享（繼承）的方法、屬性，而__proto__是查找某函數或對象的原型鏈方式。constructor，這個屬性包含了一個指針，指回原構造函數。----------------------------------------------------

12.爲何在cmd 中輸入 vue ui就能夠打開 vue-cli腳手架：
@vue/cli3.0增長一個可視化項目管理工具，全局安裝完成cli3.0以後，能夠直接在cmd輸入命令：vue ui  啓動便可，地址默認是localhost:8000--------------------------------------------

13.跨域：
1. JSONP（服務器send調用了前端函數時2.CORS跨域資源共享（服務器響應頭中帶有access-control-origin時則容許瀏覽器跨域3.服務器代理（a瀏覽器請求a服務器跨域b服務器，a服務器請求b服務器--------------------------------------------

14.methods 裏 使用 箭頭函數 會怎樣
沒有this指向-------------------------------------------------

15.js數據類型
Undefined、Null、Bollean、Number、String-------------------------------------------------

16.生命週期鉤子函數
①beforeCreate組件實例將要建立，通常在該時機，開啓加載一個動畫。

②created組件實例建立完成，在該時機能夠訪問實例中的data的屬性和methods中的方法，但不能操做dom。由於頁面還未加載成功，頁面未顯示。注意：調用methods中的方法，完成網絡請求，vue推薦的兩種數據獲取方式一、beforeRouteEnter 該路由加載以前請求數據，數據請求完成執行next（），顯示目標路由（優勢：保證頁面顯示時，必定能夠拿到數據）二、created，在該時機發起請求，獲取數據

③beforeMount組件實例將要掛載到掛載點,頁面未顯示，開發中不多使用

④mounted組件模板已經渲染到指定的el，頁面顯示，能夠操做dom。

⑤beforeUpdate組件將要更新

⑥updated組件更新完成注意：關於update的鉤子函數，都是頁面動態渲染有關，每當數據變化是，變會頁面更新，都會觸發這些鉤子，這些鉤子的觸發頻率很高，咱們極少操做，即使操做，也要保證內部方法輕量級。

⑦beforeDestroy組件將要銷燬

⑧destroyed組件銷燬完成。常在該時機移除耗時操做，好比計時器等----------------------------------------------------

17.原生ajax的實現步驟
1.建立ajax對象var xhr = new XMLHttpRequest();

2.告訴ajax請求地址以及請求方式(ajax下的open方法)xhr.open(‘get’,’http://www.example.com’); 第一個參數爲請求方式，第二個參數爲請求地址/服務器端對應的路由請求地址

3.發送請求xhr.send();

4.獲取服務器端與客戶端的響應數據xhr.onload = function () {console.log(xhr.responseText);  }xhr.responseText 獲取服務器端的響應數據

post請求有兩種：都須要設置請求格式參數

（1）post請求xhr.setRequstHeader(‘Content-Type’,’application/x-www-form-urlencoded’);  

（2）json格式xhr.setRequstHeader(‘Content-Type’,’application/json’);  固定寫法，第一個參數報文屬性名稱，第二個參數報文屬性對應的值

get請求，攜帶參數在open()的url後面；post請求，參數在send（）中攜帶------------------------------------------------

18.es6新特性
1.const和letlet表示聲明變量，而const表示聲明常量，二者都爲塊級做用域；const 聲明的變量都會被認爲是常量，意思就是它的值被設置完成後就不能再修改了：
2.模板字符串在ES6以前，咱們每每這麼處理模板字符串：經過「\」和「+」來構建模板而對ES6來講基本的字符串格式化。將表達式嵌入字符串中進行拼接。用${}來界定；ES6反引號(``)直接搞定；
3.箭頭函數ES6 中，箭頭函數就是函數的一種簡寫形式，使用括號包裹參數，跟隨一個 =>，緊接着是函數體；箭頭函數三個特色：不須要 function 關鍵字來建立函數省略 return 關鍵字繼承當前上下文的 this 關鍵字
4.for...of 和 for...infor...of 用於遍歷一個迭代器for...in 用來遍歷對象中的屬性
5.對象和數組解構例：const {data:res} 就是數據解構const {data:res} = await this.$http.get();----------------------------------------------------

19.css權重
！Important -> #id -> 屬性選擇器，class 或僞類 -> 標籤選擇器或僞元素 -> 通配符*----------------------------------------------

20.Css僞元素和僞類僞元素

都是爲了給一些特殊需求加樣式，定義上基本一致僞類像類選擇器同樣給已存在某個元素添加額外的樣式；僞元素則是給本身虛擬的元素添加樣式。
經常使用的僞類：hover，activehover指當鼠標移動到元素上時觸發某種樣式；activate指鼠標按下時的某種樣式。
經常使用僞元素：before 和 after是常常常常重用的僞元素。
21.本地存儲LocalStorage
sessionStorage，只會在窗口打開的時候纔有效，一次性緩存會話，關閉瀏覽器自動釋放

localStorage，只要沒有手動清除，就會一直保留，永久存儲，以文件形式存儲cookie,是用來跟蹤用戶信息的，默認只是一次性會話，維持到瀏覽器關閉---------------------------------------------------

22.移動端佈局：流式（百分比）佈局，rem佈局，響應式佈局（媒體查詢），flex（彈性）佈局---------------------------------------------------

23.頁面的生命週期是什麼：
1.頁請求：頁請求發生在頁面生命週期開始以前，用戶請求頁時，ASP.NET將肯定是否須要分析和編譯頁

2.開始：在開始階段，將設置頁屬性，如Request和Response。在此階段，頁還將肯定請求是回發請求仍是新請求，並設置IsPostBack屬性

3.頁初始化：在頁初始化期間，可使用頁中的控件，並設置每一個控件的UniqueID屬性。

4.加載：在加載期間，若是當前請求是回發請求，則將使用從視圖狀態和控件狀態恢復的信息加載控件屬性。

5.驗證：在驗證期間，將調用全部驗證程序控件的Validate方法，此方法將設置各個驗證程序控件和頁的IsValidate屬性。

6.回發事件處理：若是請求是回發請求，則將調用全部事件處理程序

7.呈現：在呈現以前，會針對該頁和全部控件保存視圖狀態。在呈現階段中，頁會針對每一個控件調用Render方法，它會提供一個文本編寫器，用於將控件的輸出寫入頁的Response屬性和OutputStream中

8.卸載：徹底呈現頁並將頁發送至客戶端、準備丟棄該頁後，將調用卸載。此時，將卸載頁屬性並執行清理。
也能夠說從建立-銷燬的過程建立先後，載入先後，更新先後，銷燬先後----------------------------------------------------

24.什麼是MVVM：
是一種設計思想。Model層表明數據模型，View表明UI組件。ViewModel是一個同步View和Model的對象。在mvvm框架下，view和model之間沒有直接的聯繫，而是經過viewmodel進行交互，model和viewmodel之間的交互是雙向的，所以view數據的變化會同步到model上，而model數據的變化也會當即反映到view上。--------------------------------------------------

25.git經常使用命令
配置姓名和郵箱：git config --golbal user.name/user.email  

查看配置信息 git config --list

初始化本地倉庫 git init

查看文件狀態 git status

添加文件到暫存區 git add

文件名提交到本地倉庫 git commit -m日誌說明

查看分支 git branch創

建分支 git branch develop

切換分支 git checkout 分支名

克隆倉庫 git clone往

服務器推送 git push 地址 分支名-----------------------------------------------------

26.js由那三部分組成？詳細描述一下？
js有三部分組成，即ECMAScript、DOM、BOM三部分組成。ECMAScript是核心解釋器、DOM(Document Object Model)是文檔對象模型、BOM(Browser Object Model)是瀏覽器對象模型。
ECMAScript也是一種語言，它自己不包含輸入輸出定義；ECMA-262規定了語法、類型、語句、關鍵詞、保留字、操做符、對象，ECMAScript就是對實現該規定的各個方面內容的語言的描述。javascript實現了ECMAScript。
BOM(Browser Object Model)是瀏覽器對象模型。提供了獨立於內容而與瀏覽器窗口進行交互的對象因爲BOM主要用於管理窗口與窗口之間的通信，所以其核心對象是window
DOM是文檔對象模型，它主要包含了獲取元素、修改樣式、操做元素三個方面的內容，咱們的絕大部分操做都是DOM操做，DOM操做大部分是能夠兼容的，由於多個瀏覽器具備兼容寫法。----------------------------------------------------

27.js的繼承
1.原型鏈繼承（新實例的原型等於父類的實例。）

2.接用構造函數繼承（用.call()和.apply()將父類構造函數引入子類函數（在子類函數中作了父類函數的自執行（複製）））

3.組合繼承（組合原型鏈繼承和借用構造函數繼承）（經常使用）（結合了兩種模式的優勢，傳參和複用）

4.原型式繼承（用一個函數包裝一個對象，而後返回這個函數的調用，這個函數就變成了個能夠隨意增添屬性的實例或對象。object.create()就是這個原理。）---------------------------------------------------

28.什麼是閉包？
函數嵌套函數內部的函數能夠引用外部函數的參數或者變量參數和變量不會被垃圾回收機制回收，由於內部函數還在引用------------------------------------------------

29.jQuery中有哪幾種類型的選擇器？
從我本身的角度來說，能夠有3種類型的選擇器，以下：

一、基本選擇器：直接根據id、css類名、元素名返回匹配的dom元素。

二、層次選擇器：也叫作路徑選擇器，能夠根據路徑層次來選擇相應的DOM元素。

三、過濾選擇器：在前面的基礎上過濾相關條件，獲得匹配的dom元素。--------------------------------------------------

30.http協議是什麼？

HTTP（超文本傳輸協議）是一個基於請求與響應模式的、無狀態的、應用層的協議，常基於TCP的鏈接方式，HTTP1.1版本中給出一種持續鏈接的機制，絕大多數的Web開發，都是構建在HTTP協議之上的Web應用。
http是屬於「應用層的協議」，並且是基於TCP/IP協議的。HTTP協議一般承載於TCP協議之上，有時也承載於TLS或SSL協議層之上，這個時候，就成了咱們常說的HTTPS。
在TCP/IP協議中，TCP協議提供可靠的鏈接服務，鏈接是經過三次握手進行初始化的。三次握手是指創建一個 TCP 鏈接時須要客戶端和服務器端總共發送三個包以確認鏈接的創建。三次握手的目的是同步鏈接雙方的序列號和確認號並交換 TCP窗口大小信息，爲了防止已失效的鏈接請求報文段忽然又傳送到了服務端，於是產生錯誤。

1.第一次握手：創建鏈接時：客戶端發送syn（syn=j）包到服務器，等待服務器肯定

2.第二次握手：服務器收到syn包(ack=j+1),同時本身也發送一個syn包(syn=k)，即SYN+ACK包。

3.第三次握手：客戶端收到服務器的SYN+ACK包，向服務器發送確認包ack(ack=k+1)，此包發送完畢，tcp鏈接成功--------------------------------------------------

31.Http協議中有哪些請求方式?
GET:用於請求訪問已經被URI(統一資源標識符)識別的資源,能夠經過URL傳參給服務器POST:用於傳輸信息給服務器,主要功能與GET方法相似,但通常推薦使用POST方式PUT:傳輸文件,報文主體中包含文件內容,保存到對應URI位置HEAD:得到報文首部,與GET方法相似,只是不返回報文主體,通常用於驗證URI是否有效DELETE:刪除文件,與PUT方法相反,刪除對應URI位置的文件OPTIONS:查詢響應URI支持的HTTP方法---------------------------------------------------

32.JSON和JSONP是什麼？
JSON是一種數據交換格式，而JSONP是一種被開發人員創造出來的一種非官方的跨域數據交互協議。
JSON數據格式在前端開發這個領域用的比較多基於純文本，跨平臺傳遞簡單；JavaScript原生支持，後臺語言幾乎所有支持；輕量級數據格式，佔用字符數量極少，特別適合互聯網傳遞；可讀性較強；容易編寫和解析；
JSONP數據交互協議通常用於Ajax跨域請求。Ajax直接請求普通文件存在跨域無權限訪問的問題，然而web頁面上調用js文件則不受是否跨域的影響（凡是擁有src該屬性的標籤都有跨域的能力），因而經過web端跨域訪問數據的時候，設法把數據裝進js格式的文件裏面。獲取以後即可以在web端進一步進行處理。
爲了便於客戶端使用數據，逐漸造成了一種非正式傳輸協議，人們把它稱做JSONP，該協議的一個要點就是容許用戶傳遞一個callback參數給服務端，而後服務端返回數據時會將這個callback參數做爲函數名來包裹住JSON數據，這樣客戶端就能夠隨意定製本身的函數來自動處理返回數據了。
------------------------------------------------

33.css3新增屬性都有哪些？
1.css3邊框：border-radius，box-shadow，border-image2.css3背景：background-size： 屬性規定背景圖片的尺寸。3.css3 2D轉換：transform()，translate()，rotate()4.css3 3D轉換：rotateX()繞x軸旋轉；rotateY()繞y軸旋轉。例：transform：rotateX(120deg);5.css3 動畫6.css3 過渡-------------------------------------------------

34.什麼是鉤子函數？鉤子函數是Windows消息處理機制的一部分，經過設置「鉤子」，應用程序能夠在系統級對全部消息、事件進行過濾，訪問在正常狀況下沒法訪問的消息。鉤子的本質是一段用以處理系統消息的程序，經過系統調用，把它掛入系統。