前端面試必問

一、HTML+CSS

1.HTML

001.標籤上title屬性與alt屬性的區別是什麼？

title: 仔顯示圖片的時候，滑鼠以上可以顯示一些資訊，一般爲建議、提示型別
alt ： 當網速不佳，或者因其他原因圖片載入不出來，代替圖片解釋的資訊

002.、有什麼區別?、有什麼區別em?

	有區別，但區別不明顯，瀏覽器顯示不出來。

003.請寫出至少5個html5新增的標籤，並說明其語意和應用場景？

section：定義文件中的一個章節
nav：定義只包含導航鏈接的章節
header：定義頁面或章節的頭部。它經常包含 logo、頁面標題和導航性的目錄。
footer：定義頁面或章節的尾部。它經常包含版權資訊、法律資訊鏈接和反饋建議用的地址。
aside：定義和頁面內容關聯度較低的內容——如果被刪除，剩下的內容仍然很合理。

004.請說說你對標籤語意化的理解？

a. 去掉或者丟失樣式的時候能夠讓頁面呈現出清晰的結構
b. 有利於SEO：和搜尋引擎建立良好溝通，有助於爬蟲抓取更多的有效資訊：爬蟲依賴於標籤來確定上下文和各個關鍵字的權重；
c. 方便其他裝置解析（如螢幕閱讀器、盲人閱讀器、移動裝置）以意義的方式來渲染網頁；
d. 便於團隊開發和維護，語意化更具可讀性，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。

005.html5有哪些新特性、移除了那些元素？

a. HTML5 現在已經不是 SGML 的子集，主要是關於影象，位置，儲存，多工等功能的增加。

b. 拖拽釋放(Drag and drop) API

c. 語意化更好的內容標籤（header,nav,footer,aside,article,section）

d. 音訊、視訊API(audio,video)

e. 畫布(Canvas) API

f. 地理(Geolocation) API

g. 本地離線儲存 localStorage 長期儲存數據，瀏覽器關閉後數據不丟失

h. sessionStorage 的數據在頁面對談結束時會被清除

i. 表單控制元件，calendar、date、time、email、url、search

j. 新的技術webworker, websocket等

移除的元素：

a. 純表現的元素：basefont，big，center, s，strike，tt，u；

b. 對可用性產生負面影響的元素：frame，frameset，noframes；

006.html5的儲存型別有什麼區別？

答：
cookies:伺服器和用戶端都可以存取，大小隻有4KB左右，有有效期，過期後將會刪除；
localStorage:將數據儲存在原生的硬體裝置，沒有時間限制，關閉瀏覽器也不會丟失。永久保cun
sessionStorage:將數據儲存在session物件中，關閉瀏覽器後數據也隨之銷燬。臨時儲存。

007.cookies，sessionStorage和localStorage的區別是什麼？

答：
它們之間的共同點：都是儲存在瀏覽器端，且是同源的。
它們之間的區別：

cookies是爲了標識使用者身份而儲存在使用者本地終端上的數據，始終在同源http請求中攜帶，
即cookies在瀏覽器和伺服器間來回傳遞，而sessionstorage和localstorage不會自動把數據發給伺服器，
僅在本地儲存。
儲存大小的限制不同。cookie儲存的數據很小，不能超過4k，而sessionstorage和localstorage
儲存的數據大，可達到5M。數據的有效期不同。cookie在設定的cookie過期時間之前一直有效，即使視窗
或者瀏覽器關閉。sessionstorage僅在瀏覽器視窗關閉之前有效。localstorage始終有效，視窗和瀏覽器
關閉也一直儲存，用作長久數據儲存。
作用域不同。cookie在所有的同源視窗都是共用；sessionstorage不在不同的瀏覽器共用，即使同一頁面；localstorage在所有同源視窗都是共用。

008.在form表單中，get方式和post方式提交數據的區別是什麼？如何判斷在實際開發中的應用？

答：
get方式和post方式提交數據的區別：
1） 大小不同，get方式傳輸的數據量較小，而post可以傳輸大量的數據。
2） 安全程度不同，get方式傳輸數據能夠被別人輕易的看到數據內容，所以安全程度較低，
而post則可以很好的隱藏。
3） 速度不同，post方式速度較慢，而get方式速度較快。
4） 在伺服器上的作用不同，get是從伺服器上獲取數據，而post是向伺服器上傳送數據。

在實際開發中的應用：
1）在重要數據進行傳輸數據的時候，用post的方式進行提交數據。
2）在做數據查詢的時候，用get的方式進行提交數據。
3）在做增加、刪除和修改數據的時候，用post的方式進行提交數據。

009.行內元素有哪些？塊級元素有哪些？空元素有哪些？

答：
塊級元素：div、p、h1-h6、ol、ul、table、form
行內元素：span、a、img、input、select、small
空元素：沒有內容的元素、 br、 hr

010.對於src以及href,它們之間有什麼樣的區別呢？

答：
1）src用於替換當前元素；href用於在當前文件和參照資源之間確立聯繫。
2）src是source的縮寫，指向外部資源的位置，指向的內容將會嵌入到文
檔中當前標籤所在位置。
3）href是Hypertext Reference的縮寫，指向網路資源所在位置，建立和
當前元素（錨點）或當前文件（鏈接）之間的鏈接。

2.CSS

001.談談你對CSS佈局的理解?

常見的佈局方式：固定佈局、流式佈局、彈性佈局、浮動佈局、定位佈局、margin和padding

002.請列舉幾種可以清除浮動的方法（至少兩種）

a. 新增額外標籤，例如
<div style="clear:both"></div>

b. 父元素設定 overflow：hidden auto；
c. 父元素也設定浮動

003.CSS中 link 和@import 的區別是什麼？

a. link屬於HTML標籤，而@import是CSS提供的，且只能載入 CSS
b. 頁面被載入時，link會同時被載入，而@import參照的CSS會等到頁面被載入完再載入
link方式的樣式的權重 高於@import的權重

004.position的absolute與fixed共同點與不同點?

相同：
a. 改變行內元素的呈現方式，display被置爲block
b. 讓元素脫離普通流，不佔據空間
c. 預設會覆蓋到非定位元素上

區別：
absolute的」根元素「是可以設定的，而fixed的」根元素「固定爲瀏覽器視窗。
當你卷動網頁，fixed元素與瀏覽器視窗之間的距離是不變的。

005.position的值， relative和absolute分別是相對於誰進行定位的？

absolute：生成絕對定位的元素，相對於 static 定位以外的第一個祖先元素進行定位

fixed：生成絕對定位的元素，相對於瀏覽器視窗進行定位。 （IE6不支援）

relative：生成相對定位的元素，相對於其在普通流中的位置進行定位

static：預設值。沒有定位，元素出現在正常的流中

006.CSS3有哪些新特性？

CSS3實現圓角（border-radius），陰影（box-shadow），對文字加特效（text-shadow），線性漸變（gradient），變形（transform）

007.什麼是 FOUC（無樣式內容閃爍）？你如何來避免 FOUC？

如果使用import方法對CSS進行匯入，會導致某些頁面在Windows下的IE出現一些奇怪的現象：
以無樣式顯示頁面內容的瞬間閃爍，這種現象稱之爲文件樣式短暫失效(Flash of Unstyled Content)，
簡稱爲FOUC。
原理：當樣式表晚於結構性html載入，當載入到此樣式表時，頁面將停止之前的渲染。
     此樣式表被下載和解析後，將重新渲染頁面，也就出現了短暫的花屏現象。
解決方法：
      使用LINK標籤將樣式表放在文件HEAD中。

008.怎麼理解BFC？優化前端效能的方法?

BFC， 可以理解爲他是運用一些渲染規則的塊渲染區域，他是css世界中的結界，爲何說是結界，
因爲在觸發了BFC 特性的容器下元素和容器外部元素完全隔離，子元素的佈局不會影響外部元素，
反之亦然

BFC 元素有如下一些特徵:
  BFC 的塊不會和浮動塊重疊
  計算BFC 元素的高度時，會包括浮動元素
  在一個BFC下的塊 margin 會發生重疊 ，不在同一個則不會
  BFC元素是一個獨立的容器，使得裏面的元素和外部元素隔離開，互不影響
 觸發BFC: 
    float的值不爲 none
    overflow 的值爲 auto ，scroll 和 hidden
    display 的值爲  table-cell ， table-caption 和 inline-block
    position 設定爲 absolute 和 fixed
    
   除此之外， html 元素本身預設就是一個  BFC 元素

009.css 的盒子模型，低版本IE 的盒子模型有什麼不同的?

有兩種， IE盒子模型、W3C盒子模型；
盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border)；
區 別： IE的content部分把 border 和 padding計算了進去;

010.px 和 em 和 rem 的區別?

px 是絕對單位
em 相對單位，基於父節點字型大小
rem 會繼承父級元素的字型大小
使用 rem 爲元素設定字型大小時，仍然是相對大小，但相對的只是HTML 跟元素

011.重繪和迴流?

重繪：當渲染樹中的元素外觀（如：顏色）發生改變，不影響佈局時，產生重繪
迴流：當渲染樹中的元素的佈局（如：尺寸、位置、隱藏/狀態狀態）發生改變時，產生重繪迴流

二、JavaScript

001.描述一下 this

002.什麼是 Promise ？

- Promise 就是一個物件，用來表示並傳遞非同步操作的最終結果
- Promise 最主要的互動方式：將回撥函數傳入 then 方法來獲得最終結果或出錯原因
- Promise 程式碼書寫上的表現：以「鏈式呼叫」代替回撥函數層層巢狀（回撥地獄）

003.宏任務 & 微任務

宏任務(macro-task)：整體程式碼script、setTimeOut、setInterval
微任務(mincro-task)：promise.then、promise.nextTick(node)

004.跨域?

什麼是跨域？爲什麼瀏覽器要使用同源策略？你有集中方式可以解決跨域問題？

1.因爲瀏覽器處與安全考慮，有同源策略，也就是說，如果協定，域名或者埠號
有一個不同就是跨域，ajax 請求會失敗
2.那麼是處於什麼安全考慮纔會引入這種機制機製呢，其實主要是用來防止，CSRF 攻擊的，簡單點說 CSRF 攻擊是利用使用者的登入狀態發起惡意請求
3. 也就是沒有同源策略的條件下，A網站可以被任意其他來源的Ajax存取到內容，如果你當前A 網站還存在登錄態，那麼對方可以通過Ajax獲得你的任何資訊，當然跨域並不能完全阻止CSRF

怎麼解決跨域問題？
JSONP:（只限於get請求）

script可以把請求內容當做字串讀取，解析成js程式碼
src：不受同源策略的影響，只要返回的js程式碼正確就可以了

CORS :
CORS 需要瀏覽器和後端同時支援，IE 8 和 9 需要通過 XDomainRequest 來實現。
後端設定(伺服器端) Access-Control-Allow-Origin
nginx代理跨域

005.bind call apply 區別？

call 和 apply 都是爲了解決改變 this指向，作用都是相同的，只是傳參的方式不同。
除了第一個參數外， call 可以接收一個參數列表 ， apply只接受一個參數陣列
bind：  只想改變this的指向，但是不呼叫函數，
call和  apply 呼叫。 這兩種，呼叫方法可以改變this的指向。僅本次呼叫第一個參數是改變後的this指向

006.token、cookie、session？

token 就是令牌，比如你授權(登錄) 一個程式時，他就是一個依據，判斷你是否已經授權該軟體(最好是身份認證，安全性好，且是唯一的) 使用者身份的驗證方式
cookie 是寫在用戶端的一個 txt檔案，裏面包括登錄資訊之類的，這樣你下次再登錄某個網站，就會自動呼叫cookie 自動登錄使用者名稱伺服器生成，發送到瀏覽器，瀏覽器儲存，下次請求再次發送給伺服器
session 是一類用來用戶端和伺服器之間儲存裝填的解決方案，對談完成被銷燬

007.sessionStorage 、localStorage 和 cookie ?

共同點：用於瀏覽器端儲存的快取數據;
不同點：
(1)、儲存內容是否發送到伺服器端：當設定了Cookie後，數據會發送到伺服器端，造成一定的寬頻浪費；
web storage,會將數據儲存到本地，不會造成寬頻浪費；
(2)、數據儲存大小不同：Cookie數據不能超過4K,適用於對談標識；web storage數據儲存可以達到5M;
(3)、數據儲存的有效期限不同：cookie只在設定了Cookid過期時間之前一直有效，即使關閉視窗或者瀏覽器；
sessionStorage,僅在關閉瀏覽器之前有效；localStorage,數據儲存永久有效；
(4)、作用域不同：cookie和localStorage是在同源同視窗中都是共用的；sessionStorage不在不同的瀏覽器視窗中共用，即使是同一個頁面；

008.安全類?

CSRF、XSS   攻擊原理、防禦措施
攻擊原理:  
防禦措施:
Token驗證
Referer 驗證（簡單易行，但 referer 可能被改變）
隱藏令牌（跟 Token驗證差不多，把令牌存到 header 中）


XSS（cross-site scripting）跨域指令碼攻擊:
攻擊原理： 往 Web 頁面裡插入惡意Script程式碼
防禦措施:  HTML：對以下這些字元進行跳脫：

009.原型鏈

每個範例物件（ object ）都有一個私有屬性（稱之爲 proto ）指向它的建構函式的原型物件（prototype ）。該原型物件也有一個自己的原型物件( proto ) ，層層向上直到一個物件的原型物件爲 null。根據定義，null 沒有原型，並作爲這個原型鏈中的最後一個環節（原型鏈）

010深淺拷貝？

011.token的原理?

1. 用戶端輸入使用者名稱和密碼
2. 伺服器端來驗證這個使用者名稱和密碼 如果是正確的 會簽發一個token 再把這個 token 返回給用戶端  
3. 用戶端把這個token 儲存起來 
4. 用戶端每次像伺服器端請求資源的時候需要帶着伺服器端簽發的 token 
5. 伺服器端 然後做比較  如果是驗證成功 ，就會返回用戶端請求的數據

019.怎麼判斷一個物件爲空物件

1. 將 json 物件轉化爲 json 字串，在判斷該字串是否爲 {}
2. for in 回圈判斷
3. ES6 的 Object.keys() 方法，返回值也是物件中屬性名組成的數

三、Vue

001.Vue 專案優化:

cdn 加速器
路由懶載入
v-if 和 v-show 的選擇使用
圖片懶載入
非同步元件
第三方庫按需引入
瀏覽器快取

002.說一說 Vue 響應式原理

基於ES5的object.definedProperty() 這個方法對數據做劫持。劫持數據的set與get，然後結合watch監聽（發佈訂閱模式）在數據發生變化時，通知頁面進行更新

特點：
由於ES5的object.definedProperty（）這個方法不相容 IE8，所以我們的vue的相容性也是不相容 IE8 及以下版本

003.MVVM架構思想

MVVM分爲Model、View、ViewModel三者。
Model 代表數據模型，數據和業務邏輯都在Model層中定義；

View 代表UI檢視，負責數據的展示；
ViewModel 負責監聽 Model 中數據的改變並且控制檢視的更新，處理使用者互動操作；
Model 和 View 並無直接關聯，而是通過 ViewModel 來進行聯繫的，Model 和 ViewModel 之間有着雙向數據系結的聯繫。
這種模式實現了 Model 和 View 的數據自動同步，因此開發者只需要專注對數據的維護操作即可，而不需要自己操作 dom。

004.解釋單向數據流和雙向數據系結

單向數據流：顧名思義，數據流是單向的。數據流動方向可以跟蹤，流動單一，追查問題的時候可以更快捷。缺點就是寫起來不太方便。要使UI發生變更就必須建立各種 action 來維護對應的 state雙向數據系結：數據之間是相通的，將數據變更的操作隱藏在框架內部。優點是在表單互動較多的場景下，會簡化大量與業務無關的程式碼。缺點就是無法追蹤區域性狀態的變化，增加了出錯時 debug 的難度

005.hash、history 的區別?

vue-router 預設使用 hash 模式，所以在路由載入的時候，專案中的 url 會自帶 #。如果不想使用 #，可以使用 vue-router 的另一種模式 history

!!!需要注意的是，當我們啓用 history 模式的時候，由於我們的專案是一個單頁面應用，所以在路由跳轉的時候，就會出現存取不到靜態資源而出現 404 的情況，這時候就需要伺服器端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面

url 展示上，hash 模式有「#」，history 模式沒有
重新整理頁面時，hash 模式可以正常載入到 hash 值對應的頁面，而 history 沒有處理的話，會返回 404，一般需要後端將所有頁面都設定重定向到首頁路由
相容性，hash 可以支援低版本瀏覽器和 IE。

006.常用的Vue 指令有哪些?

v-model:一般用在表達輸入，很輕鬆的實現表單控制元件和數據的雙向系結
v-html：更新元素的innerHTML
v-show與v-if：條件渲染，注意二者區別
v-on:click:可以簡寫爲@click,@系結一個事件。如果事件觸發了，就可以指定事件的處理常式
v-for：基於源數據多次渲染元素或模板
v-bind:當表達式的值改變時，將其產生的連帶影響，響應式地作用於DOM語法
v-bind:title=」msg」簡寫：title="msg"

007.常用的Vue 指令有哪些

v-model:一般用在表達輸入，很輕鬆的實現表單控制元件和數據的雙向系結
v-html：更新元素的innerHTML
v-show與v-if：條件渲染，注意二者區別
v-on:click:可以簡寫爲@click,@系結一個事件。如果事件觸發了，就可以指定事件的處理常式
v-for：基於源數據多次渲染元素或模板
v-bind:當表達式的值改變時，將其產生的連帶影響，響應式地作用於DOM語法
v-bind:title=」msg」簡寫：title="msg"

008. computed 和 watch 有什麼區別？

computed 是計算屬性，依賴其他屬性計算值，並且 computed 的值有快取，只有當計算值變化纔會返回內容。
watch 監聽到值的變化就會執行回撥，在回撥中可以進行一些邏輯操作。
所以一般來說需要依賴別的屬性來動態獲得值的時候可以使用 computed，對於監聽到值的變化需要做一些複雜業務邏輯的情況可以使用 watch。

009. 介紹下虛擬DOM

虛擬dom與diff運算:

虛擬dom就是一個json物件，他用於對真實的dom進行描述

diff運算：

當vue範例中的數據發生變化時，vue會獲得一份對虛擬dom的拷貝，如此我們就有兩份虛擬dom，一份是數據變化前的虛擬dom，一份是數據變化後的虛擬dom，所謂的diff運算就是對着兩份虛擬dom進行差異比較，從而找出他們最小的差異，再把這份最小的差異渲染到真實dom中去
同級比較，再比較子節點
先判斷一方有子節點一方沒有子節點的情況(如果新的children沒有子節點，將舊的子節點移除)
比較都有子節點的情況(核心diff)
遞回比較子節點

010.diff演算法

減少Dom操作  提高元件複用性
diff運算：新的虛擬dom與舊的虛擬dom對比，找出**最小差異**，發送給真實的dom進行更新

011.vue生命週期的理解

beforeCreate: vue範例的掛載元素el和數據物件data都爲undefined，還未初始化。
created: vue範例的數據物件data有了，el還沒有
beforeMount: vue範例的$el和data都初始化了，但還是掛載之前爲虛擬的dom節點，data.message還未替換。
mounted: vue範例掛載完成，data.message成功渲染。
beforeUpdate: 數據更新前呼叫
Update: 數據更新後呼叫
beforeDestroy：適合移除事件、定時器等等，否則可能會引起記憶體泄露的問題。
destroyed: 進行一系列的銷燬操作，如果有子元件的話，也會遞回銷燬子元件，所有子元件都銷燬完畢後纔會執行

第一次頁面載入會觸發哪幾個勾點？

會觸發下面下麪這幾個beforeCreate、created、beforeMount、mounted

簡單描述每個週期具體適合哪些場景？

生命週期勾點的一些使用方法： beforecreate : 可以在這加個loading事件，在載入範例時觸發 created : 初始化完成時的事件寫在這裏，如在這結束loading事件，非同步請求也適宜在這裏呼叫 mounted : 掛載元素，獲取到DOM節點 updated : 如果對數據統一處理，在這裏寫上相應函數 beforeDestroy : 可以做一個確認停止事件的確認框 nextTick : 更新數據後立即操作dom;

012. 元件通訊

父元件向子元件通訊
子元件通過 props 屬性，系結父元件數據，實現雙方通訊

子元件向父元件通訊
將父元件的事件在子元件中通過 $emit 觸發

非父子元件、兄弟元件之間的數據傳遞

013.vue-rotuer 路由實現

路由的概念就是， 能夠通過不同的請求地址來響應不同的頁面或數據
檢視：  router-view   路由坑   路由匹配到的元件將渲染在這裏

導航： router-link     路由跳轉  相當於a標籤   沒有a標籤的#號 而且還自帶樣式    .router-link-active    還有起到跳轉作用

014.v-if 和 v-show 的區別

 1. v-if 是真正的條件渲染, 預設條件爲false時元素不渲染，
    預設條件爲true時元素渲染  條件變爲false時元素會銷燬，
    條件變爲true時元素會重新建立。
    而 v-show 只是簡單的去控制元素的css的display屬性。

 2. v-show 有更高的初始渲染開銷（因爲不管預設條件爲真還是假，都會渲染出來）
    v-if 有更高的切換開銷（切換時做銷燬與重建的操作） 如果需要頻繁切換顯示
    隱藏使用v-show更好，其餘情況使用v-if就好。

 3. v-if 有 v-else v-else-if 去配套使用。
    v-show 沒有，它是孤零零的一個人
        
 4. v-if 能配合 template 元素使用，而 v-show 不能。

015.Vue元件中 data 爲什麼必須是函數？

元件時可以進行復用的，如果 data直接寫成物件，複用的時候，會造成數據污染 (複用後影響其他範例) 因爲物件是參照數據型別
data方法返回一個物件作爲元件的屬性，這樣做的目的是爲了每一個元件範例都擁有獨立的data屬性

016.vue 等單頁面應用的優缺點

優點：
良好的互動體驗
良好的前後端工作分離模式
減輕伺服器壓力

缺點：
SEO難度較高
前進、後退管理
初次載入耗時多

017. $route 和$ router的區別

$router 爲 VueRouter 範例，想要導航到不同 URL，則使用 $router.push 方法$ route 爲當前 router 跳轉物件裏面可以獲取 name 、 path 、 query 、 params 等

018.NextTick 是做什麼的

$nextTick 是在下次 DOM 更新回圈結束之後執行延遲迴調，在修改數據之後使用 $nextTick，則可以在回撥中獲取更新後的 DOM

019. 計算屬性computed 和事件 methods 有什麼區別

computed: 計算屬性是基於它們的依賴進行快取的,只有在它的相關依賴發生改變時纔會重新求值對於 method ，只要發生重新渲染，method 呼叫總會執行該函數

020.對比 jQuery ， Vue 有什麼不同

jQuery 通過操作 DOM 去實現頁面的一些邏輯渲染；
Vue 通過數據的雙向系結，最終表現在 DOM 層面，減少了 DOM 操作Vue 使用了元件化思想，使得專案子集職責清晰，提高了開發效率，方便重複利用，便於協同開發

021.對keep-alive 的理解

keep-alive 是 Vue 內建的一個元件，可以使被包含的元件保留狀態，或避免重新渲染

如果你需要在元件切換的時候，儲存一些元件的狀態防止多次渲染，就可以使用 keep-alive 元件包裹需要儲存的元件。
對於 keep-alive 元件來說，它擁有兩個獨有的生命週期勾點函數，分別爲 activated 和 deactivated 。用 keep-alive 包裹的元件在切換時不會進行銷燬，而是快取到記憶體中並執行 deactivated 勾點函數，命中快取渲染後會執行 actived 勾點函數。

022.Vue 中 key 的作用

key 的特殊屬性主要用在 Vue 的虛擬 DOM 演算法，在新舊 nodes 對比時辨識 VNodes。如果不使用 key，Vue 會使用一種最大限度減少動態元素並且儘可能的嘗試修復/再利用相同類型元素的演算法。使用 key，它會基於 key 的變化重新排列元素順序，並且會移除 key 不存在的元素。有相同父元素的子元素必須有獨特的 key。重複的 key 會造成渲染錯誤

023.Vue 的核心是什麼

數據驅動 元件系統

024.hash模式與 history模式的區別？

1.url 地址表現不同，hash模式有#號，history模式沒有
2.實現原理不同
3. 相容不同 ：
  1.hash模式都可以相容
  2.histyory 模式只能相容到IE10及以上
  3.history 模式會出現404 找不到頁面這種問題，需要後端設定相關的處理才行，而hash 模式沒有這個問題
  4.history 模式時，重定向會有些問題 ，需要頁面的名字叫index.html才行

025.

四、React

001.react 專案優化?

使用程式碼分割  實現程式碼分割  讓元件按需載入  優化專案 效能
使用 key
shouldconmpoentUpdate
元件儘可能的進行拆分
傳參優化
多元件優化

002.Vue 和 reacat 的區別?

相同點： 
1、 數據驅動頁面，提供響應式的檢視元件
2、 都有 virtual DOM 元件化的開發， 通過props參數進行父子之間元件傳遞數據，都實現了 webComponents 規範
3、 數據流動單向，都支援伺服器端的渲染 SSR
4、 都有支援native的方法， react 有 react native vue有 wexx
 不同點：
1. 數據系結： Vue實現了雙向的數據系結，react 數據流動是單向的
2. 數據渲染： 大規模的數據渲染， react更快
3. 使用場景： React 配合Redux 架構適合大規模多人共同作業複雜專案，Vue 適合小快 的專案
4. 開發分格， react推薦做法 jsx+ inline style 把html和css都寫在js了 ， vue是採用 webpack +vue-loader 單檔案元件格式 html，js，css同一個檔案

003.React 的特點和優勢?

1. 宣告式設計 - React採用宣告範式，可以輕鬆描述應用
2. 高效 - React 通過對Dom的模擬（虛擬Dom),最大限度減少與Dom的互動
3. 靈活 - React 可以與一直的庫或框架很好的配合
4. JSX - JSX 是 JavaScript 的語法擴充套件
5. 元件 - 通過React構建元件，使得程式碼更加容易得到複用，能夠很好的應用在大專案的開發中
6. 單項響應的數據流 - React 實現了單項響應的數據流，從而減少了重複程式碼，這也是它爲什麼比傳統的系結更簡單。

004.函數語言程式設計好處：

1. 程式碼簡潔，開發快速
2. 接近自然語言，易於理解
3. 更方便的程式碼管理
4. 易於"併發程式設計「
5. 程式碼的熱升級

005.JSX 注意事項

元件首字母是大寫會被認爲是自定義元件,首字母是小寫，會被認爲是原生dom 節點
元件最外層需要被一個標籤包裹，不能有兄弟節點
return (加上小括號,可以回車)
元件可以巢狀
函數式寫法和class 寫法 (無狀態元件的編寫方式 )
註釋的寫法 {這裏面寫註釋} {//單行} {/多行/}
樣式
1. class ==> className , for ==> htmlFor(label)
2. 行內樣式(facebook 推薦),注意font-size 的寫法
事件
1. 箭頭函數
2. bind改變this指向
ref
1. 給標籤設定ref=「username」
  1. 通過這個獲取this.refs.username ,ref可以獲取到應用的真實dom
2. 給元件設定ref=「username」
  1. 通過這個獲取this.refs.username ,ref可以獲取到應用的真實元件物件

006.生命週期

1.初始化階段

componentWillMount ：render之前最後一次修改狀態的機會

render : 只能存取this.props和 this.state，不允許修改狀態和Dom 輸出

componentDidMount ：成功render並渲染完成真實Dom之後觸發，可以修改DOM

2.執行中階段

componentWillReceiveProps ：父元件修改屬性觸發

shouldComponentUpdate ：返回false會阻止render呼叫

componentWillUpdate ：不能修改屬性和狀態

render : 只能存取this.props和 this.state，不允許修改狀態和Dom 輸出

componentDidUpdate : 可以修改DOM

3.銷燬階段

componentWillUnmount ：在刪除這個元件前進行清理操作

問題：

componentWillMount ,在ssr中這個方法將會被多次呼叫，所以會重複觸發多遍，同時在這裏如果系結事件，將無法解綁，導致記憶體漏失，變得不夠安全高效逐步廢棄。
componentWillReceiveProps 外部元件多次頻繁更新傳入多次不同的 props，會導致不必要的非同步請求。
componetWillupdate, 更新前記錄 DOM 狀態, 可能會做一些處理，與componentDidUpdate相隔時間如果過長，會導致狀態不太信。

解決：

getDerivedStateFromProps 第一次的初始化元件以及後續的更新過程中(包括自身狀態更新以及父傳子) ，返回一個物件作爲新的state，返回null則說明不需要在這裏更新state
```
static getDerivedStateFromProps(nextProps){
  if(nextProps.value!==undefined){
     return{
           current:nextProps.value
     }
  }
  return null
}
```
getSnapshotBeforeUpdate 取代了 componetWillUpdate ,觸發時間爲update發生的時候，在render之後dom渲染之前返回一個值，作爲componentDidUpdate的第三個參數

007.react中效能優化的方案

shouldComponentUpdate
1. 控制組件自身或者子元件是否需要更新，尤其在子元件非常多的情況下，需要進行優化
PureComponent
1. PureComponent會幫你比較新props 跟舊的props，新的state和老的state（值相等,或者物件含有相同的屬性、且屬性值相等），決定shouldcomponentUpdate 返回true 或者false，從而決定要不要呼叫 render function。
2. 注意：如果你的 state 或 props 『永遠都會變』，那 PureComponent 並不會比較快，因爲shallowEqual 也需要花時間。

008.爲什麼虛擬 dom 會提高效能?(必考)

虛擬 dom 相當於在 js 和真實 dom 中間加了一個快取，利用 dom diff 演算法避免了沒有必要的 dom 操作，從而提高效能。
用 JavaScript 物件結構表示 DOM 樹的結構；然後用這個樹構建一個真正的 DOM 樹，插到文件當中當狀態變更的時候，重新構造一棵新的物件樹。然後用新的樹和舊的樹進行比較，記錄兩棵樹差異把 2 所記錄的差異應用到步驟 1 所構建的真正的 DOM 樹上，檢視就更新了。
採用虛擬DOM的話，當數據變化的時候，只需要區域性重新整理變化的位置就好了。
虛擬DOM具有批次處理和高效的Diff演算法,最終表現在DOM上的修改只是變更的部分，可以保證非常高效的渲染,優化效能.

009.區分Real DOM和Virtual DOM

real Dom
1. 更新緩慢
2. 可以直接更新 HTML
3. 如果元素更新，則建立新DOM
4. DOM 操作代價很高
5. 消耗的記憶體較多

Virtual DOM
1. 更新更快
2. 無法直接更新 HTML
3. 如果元素更新，則更新JSX
4. DOM 操作非常簡單
5. 很少的記憶體消耗

010.什麼是React？

React 是一個用於構建用戶介面的 JAVASCRIPT 庫。
React主要用於構建UI，很多人認爲 React 是 MVC 中的 V（檢視）。
React 起源於 Facebook 的內部專案，用來架設 Instagram 的網站，並於 2013 年 5 月開源。
React 擁有較高的效能，程式碼邏輯非常簡單，越來越多的人已開始關注和使用它。

011.React 的一些主要特點是:

React 的一些主要特點是:
 它提高了應用的效能
 可以方便地在用戶端和伺服器端使用
 由於JSX ，程式碼的可讀性很好
 使用 React，編寫UI 測試用例變得非常容易

012.你怎樣理解「在React中，一切都是元件」這句話

元件是 React 應用 UI 的構建塊。這些元件將整個 UI 分成小的獨立並可重用的部分。每個元件彼此獨立，而不會影響 UI 的其餘部分。

013.什麼是 Props?

Props 是 React 中屬性的簡寫。它們是隻讀元件，必須保持純，即不可變。它們總是在整個應用中從父元件傳遞到子元件。子元件永遠不能將 prop 送回父元件。這有助於維護單向數據流，通常用於呈現動態生成的數據。

014.react 中的高階函數

高階函數就是一個純js且沒有副作用的函數。
高階元件是一個純函數,也是容器元件.是參數爲元件,返回值爲新元件的函數.

高階元件就是一個函數，且該函數接受一個元件作爲參數，並返回一個新的元件的函數。

015.react 中的高階函數

高階函數就是一個純js且沒有副作用的函數。
高階元件是一個純函數,也是容器元件.是參數爲元件,返回值爲新元件的函數.

高階元件就是一個函數，且該函數接受一個元件作爲參數，並返回一個新的元件的函數。

016. 高階元件

高階元件就是一個函數，且該函數接受一個元件作爲參數，並返回一個新的元件。基本上，這是從React的組成性質派生的一種模式，我們稱它們爲「純」元件，因爲它們可以接受任何動態提供的子元件，但它們不會修改或複製其輸入元件的任何行爲。


高階函數 ：  一個函數內部返回一個新的函數，內部採用閉包的寫法
var add = x => {
  return y => {
     return x+y
 }
}

高階元件：（HOC） Higher-Order-Component

高階元件本質上就是一個函數，內部可以接收一個元件，然後返回新的元件。

例如： React.memo()    connect()

父子通訊

父元件通過 props 傳遞數據給子元件，子元件通過呼叫父元件傳來的函數傳遞數據給父元件，這兩種方式是最常用的父子通訊實現辦法
2.這種父子通訊方式也就是典型的單向數據流，父元件通過props 傳遞數據，子元件不能直接修改props ，而是必須通過呼叫父元件函數的方式告知父元件修改數據

兄弟元件通訊：
對於這種情況可以通過共同的父元件來管理狀態和事件函數，比如說其中一個兄弟元件呼叫父元件傳遞過來的事件函數修改父元件中的狀態，然後父元件將狀態給另一個兄弟元件

跨多層次元件通訊：
如果你使用16.3 以上版本的話，對於這種情況可以使用 Context API

任意元件:
這種方式可以通過Redux 或者 Event Bus 解決，另外如果你不怕麻煩的話，可以使用這種方式解決上述所有的通訊情況

018. Hoc 高階元件

高階元件和高階函數就是同一個東西，我們實現一個函數，傳入一個元件，然後在函數內部再實現一個函數去擴充套件傳入的元件，最後返回一個新的元件，這就是高階元件的概念，作用就是爲了更好的複用程式碼

019. react中有多少種建立元件的方法？

 ES5元件 React.createElement()
 類元件 class User extends React.Component {}
 無狀態元件 function User(props) {}
 高階元件 function Hoc(Child) { }
 Hocks 元件

020. jsx 語法糖:

jsx = javascript xml 語法糖
jsx 變數、物件
jsx 不是強制的，但jsx讓程式碼更具可讀性
jsx 可以巢狀
jsx 中可以使用表達式，使用方法用 單大括號進行包裹
jsx 語法更接近javascript 而不是html

021. React元件生命週期的階段是什麼？

React 元件的生命週期有三個不同的階段：

1.初始化階段
  componentWillMount: rende之前最後一次修改狀態的機會
  render: 只能存取 this.props和 this.state，不允許修改狀態和DOM 輸出
  componentDidMount: 成功render並渲染完成真實DOM 之後觸發
  可以修改DOM
2.執行中階段
    componentWillReceiveProps: 父元件修改屬性觸發
    shouldComponentUpdata: 返回 false 會阻止render呼叫
    componentWillUpdate: 不能修改屬性和狀態
    render: 只能存取this.props 和this.state , 不允許修改態和DOM 輸出
    componentDidUpdate: :可以修改DOM
   
 3.銷燬階段
     componentWillUnmount: 再刪除元件之前進行清理操作，比如計時器和事件監聽器

022. React 生命週期？

一些最重要的生命週期方法是：

componentWillMount 建立範例前

render 渲染數據

componentDidMount 建立範例完成

componentWillUpdate 更新前

componentDidUpdate 更新完成這個每次都會重新請求不會判斷如果是一樣的就不更新

shouldcomponentUpdate(nextProps,nextState) nextProps新的值 nextState老的值這個可以判斷是否更新預設是true更新就會一直更新不應該更新就返回false 這裏就是要判斷應不應該更新如果更新之後的值和之前的值是一樣的話就返回 false 不讓他更新了

componentWillReceiveProps(nextProps) nextProps更改之後的值這個生命週期是在父元件屬性發生改變纔會觸發

componentWillunmount 銷燬就會觸發這個

新增生命週期：==========================
初始化： getDeriveStateFromProps(nextProps,nextState) nextState老數據 nextProps更新之後的數據使用的時候要加 static getDerivedStateFromProps(nextProps,nextState)

更新: getDeriveStateFromProps(nextProps,nextState) nextState老數據 nextProps更新之後的數據這個生命週期只要是父元件呼叫 setState 就會走整個的更新階段，
getDeriveStateFromProps 這個生命週期相當於兩個作用一個是初始化的時候一個更新就的時候就是父元件屬性發生屬性發生改變就會觸發這裏

更新：getSnapshotBeforeUpdate 這個就是更新之前會觸發的，但是的話就是先會執行render渲染然後立馬執行 getSnapshotBeforeUpdate 然後這個必須有返回值這個返回值可以在更新完成那個生命週期的第三個參數接收到

這個相當於有個快照的感覺，就是一渲染立馬會記錄那個狀態，這個是渲染在更新，會記錄那個瞬間的值

023.受控元件和非受控元件的區別?

其值由state控制的輸入表單元素稱爲「受控元件」。
其值由真實DOM控制的輸入表單元素稱爲「非受控元件」。

024. 純函數?

原則：

不會改變參數
相同的輸入一定產生相同的輸出

025.react 中key的作用是什麼？

key是React中用於追蹤哪些列表中元素被修改、刪除或者被新增的輔助標識。在diff演算法中，key用來判斷該元素節點是被移動過來的還是新建立的元素，減少不必要的元素重複渲染。

026.setState

非同步的 
首先 setState 的呼叫並不會馬上引起。 state 的改變，並且如果你一次呼叫了多個， 
setState ，那麼結果可能並不如你期待的一樣
可以傳第二個參數

027.通訊

父元件通過 props 傳遞給子元件
子-父  通過 自定義事件
兄弟元件通訊  context
任意元件   redux  event Bus

028.傳入 setState 函數的第二個參數的作用是什麼?

因爲setState是一個非同步的過程，所以說執行完setState之後不能立刻更改state裏面的值。如果需要對state數據更改監聽，setState提供第二個參數，就是用來監聽state裏面數據的更改，當數據更改完成，呼叫回撥函數。

029. React 中 refs 的作用是什麼

refs就想一個逃生窗，允許我們之間存取dom元素或者元件範例，可以向元件新增一個ref屬性的值是一個回撥函數，它將接受地城dom元素或元件的已掛在範例，作爲第一個參數

030. 在生命週期中的哪一步你應該發起AJAX 請求

我們應該將 AJAX 請求放到 componentDidMount 函數中執行，主要原因有下：

React 下一代調和演算法， fiber會通過開始或停止渲染的方式優化應用效能，其會影響到 componentWillMount 的觸發次數，對於 componentWillMount 這個生命週期函數的呼叫次數會變得不確定，react 可能會對次頻繁呼叫， componentWillMount . 如果我們將AJAX 請求放到 componentWillMount 函數中，那麼顯而易見其會觸發多次，自然也就不是好的選擇
如果我們將 AJAX 請求放置在生命週期的其他函數中，我們並不能保證請求僅在元件掛載完畢後纔會要求響應，如果我們的數據請求在元件掛載之前就完成，並且呼叫了 setState 函數將數據新增到元件狀態中，對於未掛載的元件則會報錯，而在 componentDidMount 函數中進行AJAX 請求則能有效避免這個問題

031. shouldComponentUpdate 的作用

shouldComponentUpdate 允許我們手動地判斷是否要進行元件更新，根據元件的應用場景設定函數的合理返回值能夠幫我們避免不必要的更新

032.當你呼叫setState的時候，發生了什麼事？

當呼叫 setState 時，React會做的第一件事情是將傳遞給 setState 的物件合併到元件的當前狀態。這將啓動一個稱爲和解（reconciliation）的過程。和解（reconciliation）的最終目標是以最有效的方式，根據這個新的狀態來更新UI。爲此，React將構建一個新的 React 元素樹（您可以將其視爲 UI 的物件表示）。
一旦有了這個樹，爲了弄清 UI 如何響應新的狀態而改變，React 會將這個新樹與上一個元素樹相比較（ diff ）。
通過這樣做， React 將會知道發生的確切變化，並且通過了解發生什麼變化，只需在絕對必要的情況下進行更新即可最小化 UI 的佔用空間。

033.在 React 當中 Element 和 Component 有何區別？

簡單地說，一個 React element 描述了你想在螢幕上看到什麼。換個說法就是，一個 React element 是一些 UI 的物件表示。
一個 React Component 是一個函數或一個類，它可以接受輸入並返回一個 React element t（通常是通過 JSX ，它被轉化成一個 createElement 呼叫）。

034. createElement 與 cloneElement 的區別是什麼?

createElement 函數式JSX 編譯之後使用的建立          
React Element 的函數 ， 而cloneElement  則是用於複製某個元素並傳入新的Props

035.redux中介軟體

中介軟體提供第三方外掛的模式，自定義攔截 action -> reducer 的過程，變爲 action -> middewares ->reducer . 這種機制機製可以讓我們改表數據流。實現如非同步 action 、 action 過濾、日誌輸出，異常報告等功能

redux-logger : 提供日誌輸出
redux-thunk : 處理非同步操作
redux-promise : 處理非同步操作，actionCreator的返回值是 promise

036.redux的設計思想

1. web 應用是一個狀態機， 檢視與狀態是 -- 對應的
2. 所有的狀態，儲存在一個物件裏面(唯一數據源)

037.redux？

是一個應用數據流框架，集中式管理
**怎麼用：**view呼叫 store 的 dispath 接收 action 傳入 store ，reducer 進行 state 操作， view 通過 store 提供的 getState 獲取最新的數據
缺點: state必須由父元件傳過來，子元件相關數據更新，父元件會強制渲染

038.redux 有什麼特點

1.一個元件所需要的數據，必須由父元件傳過來， 而不能像  flux 中直接從 store取
2.當一個元件相關數據更新時，即使父元件不需要用到這個元件，父元件還是會重新 render，
  可能會有效率影響，或者需要些複雜的 shouldComponentUpdate 進行判斷

039.Redux三大原則

唯一數據源：
  整個應用的state都被儲存到一個狀態樹裏面，並且這個狀態樹，只存在於唯一的store中
     
state  保持只讀狀態：
  state是隻讀的，唯一改變state的方法就是觸發action，action是一個用於描述以發生時間的普通物件
       
數據改變只能通過純函數來執行：
  使用純函數來執行修改，爲了描述action如何改變state的，你需要編寫reducers

040.Redux有四個組成部分

Redux 由以下元件組成：

**store：用來儲存數據** 
**reducer：真正的來管理數據**
**actionCreators：建立action，交由reducer處理**
**view： 用來使用數據，在這裏，一般用react元件來充當**

041.解釋 Reducer 的作用?

Reducers 是純函數，它規定應用程式的狀態怎樣因響應 ACTION 而改變。Reducers 通過接受先前的狀態和 action 來工作，然後它返回一個新的狀態。它根據操作的型別確定需要執行哪種更新，然後返回新的值。如果不需要完成任務，它會返回原來的狀態。

042.Store 在 Redux 中的意義是什麼？

Store 是一個 JavaScript 物件，它可以儲存程式的狀態，並提供一些方法來存取狀態、排程操作和註冊偵聽器。應用程式的整個狀態/物件樹儲存在單一儲存中。因此，Redux 非常簡單且是可預測的。我們可以將中介軟體傳遞到 store 來處理數據，並記錄改變儲存狀態的各種操作。所有操作都通過 reducer 返回一個新狀態。

043.爲啥要用 redux？

 1.很多非父子通訊需要管理
 2.快取後端數據，減少重複的後端請求，減輕伺服器壓力，提高使用者體驗
   減少Dom操作  提高元件複用性

044.react-redux?

安裝 : $ cnpm install react-redux -S

核心元件：
 **Provider  提供者  屬性上通過store將數據派給容器元件**
 **connect    用於連線容器元件與UI元件**
 
 `connect() 返回一個函數，函數參數接收UI元件，返回容器元件`  
 connect(mapStateToProps,mapDispatchToProps)(ui元件)
 容器元件內部幫你做了 store.subscribe() 的方法訂閱
    狀態變化 ==> 容器元件監聽狀態改變了 ==> 通過屬性的方式傳給UI元件

    把`store.getState()`的狀態轉化爲展示元件的`props`使用

045.Redux與Flux有何不同？

046.react效能優化是哪個周期函數

shouldComponentUpdate 這個方法用來判斷是否需要呼叫render方法重新描繪dom。因爲dom的描繪非常消耗效能，如果我們能在shouldComponentUpdate方法中能夠寫出更優化的dom diff演算法，可以極大的提高效能
PureComponent 可以判斷組價更不更新一樣的就不更新就是與之前的數據是不是一樣，就是做了判斷元件應該更新嗎? 應該 true ，不應該返回 false

047.虛擬DOM

虛擬dom相當於在js和真實dom中間加了一個快取，利用dom diff演算法避免了沒有必要的dom操作，從而提高效能:

具體實現步驟如下：
用 JavaScript 物件結構表示 DOM 樹的結構；然後用這個樹構建一個真正的 DOM 樹，插到文件當中
當狀態變更的時候，重新構造一棵新的物件樹。然後用新的樹和舊的樹進行比較，記錄兩棵樹差異
把2所記錄的差異應用到步驟1所構建的真正的DOM樹上，檢視就更新

048.diff演算法?

把樹形結構按照層級分解，只比較同級元素。
給列表結構的每個單元新增唯一的key屬性，方便比較。
React 只會匹配相同 class 的 component（這裏面的class指的是元件的名字）
合併操作，呼叫 component 的 setState 方法的時候, React 將其標記爲 - dirty.到每一個事件回圈結束, React 檢查所有標記 dirty的 component重新繪製.
選擇性子樹渲染。開發人員可以重寫shouldComponentUpdate提高diff的效能

049.react效能優化方案

shouldComponentUpdate 這個方法用來判斷是否需要呼叫render方法重新描繪dom。因爲dom的描繪非常消耗效能，如果我們能在shouldComponentUpdate方法中能夠寫出更優化的dom diff演算法，可以極大的提高效能
PureComponent 可以判斷組價更不更新一樣的就不更新就是與之前的數據是不是一樣，就是做了判斷元件應該更新嗎? 應該 true ，不應該返回 false

050.簡述flux 思想?

Flux 的最大特點，就是數據的"單向流動"。

Flux 是一種強制單向數據流的架構模式。它控制派生數據，並使用具有所有數據許可權的中心 store 實現多個元件之間的通訊。整個應用中的數據更新必須只能在此處進行。 Flux 爲應用提供穩定性並減少執行時的錯誤。

使用者存取 View
View發出使用者的 Action
Dispatcher 收到Action，要求 Store 進行相應的更新
Store 更新後，發出一個"change"事件
View 收到"change"事件後，更新頁面

051.Redux 有哪些優點？

結果的可預測性 - 由於總是存在一個真實來源，即 store ，因此不存在如何將當前狀態與動作和應用的其他部分同步的問題。
可維護性 - 程式碼變得更容易維護，具有可預測的結果和嚴格的結構。
伺服器端渲染 - 你只需將伺服器上建立的 store 傳到用戶端即可。這對初始渲染非常有用，並且可以優化應用效能，從而提供更好的使用者體驗。
開發人員工具 - 從操作到狀態更改，開發人員可以實時跟蹤應用中發生的所有事情。
社羣和生態系統 - Redux 背後有一個巨大的社羣，這使得它更加迷人。一個由才華橫溢的人組成的大型社羣爲庫的改進做出了貢獻，並開發了各種應用。
易於測試 - Redux 的程式碼主要是小巧、純粹和獨立的功能。這使程式碼可測試且獨立。
組織 - Redux 準確地說明了程式碼的組織方式，這使得程式碼在團隊使用時更加一致和簡單。

052.Hooks?

hooks 他是一組函數api
解決問題:  類元件   (無狀態元件)
hooks  讓類元件可以擁有 state， 生命週期等特性

053.狀態提升？

如果多個元件需要反映相同的變化數據，建議將共用狀態提升到最近的共同父元件中去，從而依靠自上而下的數據流，而不是嘗試在不同組件間同步 state

054.高階元件(higher order component)

高階元件是一個以元件爲參數並返回一個新元件的函數。HOC 執行你重用程式碼、邏輯和引導抽象。最常見的可能是 Redux 的 connect 函數。除了簡單分享工具庫和簡單的組合，HOC 最好的方式是共用 React 元件之間的行爲。如果你發現你在不同的地方寫了大量程式碼來做同一件事時，就應該考慮將程式碼重構爲可重用的 HOC。

五、微信小程式

六、其他

001.一次完整的HTTP事務是怎麼一個過程?

域名解析 --> 發起TCP的3次握手 --> 建立TCP連線後發起http請求 --> 伺服器響應http請求，瀏覽器得到html程式碼 --> 瀏覽器解析html程式碼，並請求html程式碼中的資源（如js、css、圖片等） --> 瀏覽器對頁面進行渲染呈現給使用者

002.HTTPS是如何實現加密?

HTTP 協定（HyperText Transfer Protocol，超文字傳輸協定）：是用戶端瀏覽器或其他程式與Web伺服器之間的應用層通訊協定。
https是一種http與SSL證書共同共同作業構建的網路協定，https優勢就在於能夠保證網路傳輸高效的同時，可以很好的維護網路傳輸過程的安全。
如何進行https加密？這涉及到了對SSL證書的申請，不同類型的網站所需的SSL證書型別不同，申請這一數位憑證需要想數位憑證頒發機構驗證域名的所有權以及公司相關的資訊，這也是爲什麼網站部署了SSL證書之後就擁有了一個安全可信的形象。完成申請之後，根據申請證書的教學，完成下載以及安裝。這就實現了對http到https的轉變，即完成了https加密。

003.瀏覽器是如何渲染頁面的?

先簡要概述瀏覽器渲染的步驟：

1.處理HTML標記並構建DOM樹
2.處理CSS標記並構建CSSOM樹
3.將DOM與CSSOM合併成一個渲染樹
4.根據渲染樹來佈局，計算每個節點的佈局資訊
5.將各個節點繪製到螢幕上

004.響應式佈局原理?

響應式佈局指的是同一頁面在不同螢幕尺寸下有不同的佈局。傳統的開發方式是PC端開發一套，手機端再開發一套，而使用響應式佈局只要開發一套就夠，缺點就是CSS比較重。

響應式設計與自適應設計的區別：

響應式開發一套介面，通過檢測視口解析度，針對不同用戶端在用戶端做程式碼處理，來展現不同的佈局和內容；自適應需要開發多套介面，通過檢測視口解析度，來判斷當前存取的裝置是pc端、平板、手機，從而請求服務層，返回不同的頁面。

005.http協定和tcp協定?

TCP是傳輸層協定，定義數據傳輸和連線方式的規範。握手過程中傳送的包裡不包含數據，三次握手完畢後，用戶端與伺服器才正式開始傳送數據.
HTTP 超文字傳送協定(Hypertext Transfer Protocol )是應用層協定，定義的是傳輸數據的內容的規範。
HTTP協定中的數據是利用TCP協定傳輸的，特點是用戶端發送的每次請求都需要伺服器回送響應，它是TCP協定族中的一種，預設使用 TCP 80埠。
好比網路是路，TCP是跑在路上的車，HTTP是車上的人。每個網站內容不一樣，就像車上的每個人有不同的故事一樣。

006.如何對網站的檔案和資源進行優化?

1、檔案合併（目的是減少http請求）
2、檔案壓縮（目的是直接減少檔案下載的體積）
3、使用cdn託管資源
4、使用快取
5、gizp壓縮你的js和css檔案
6、meta標籤優化（title,description,keywords）、heading標籤的優化、alt優化
7、反向鏈接，網站外鏈接優化

007.你對web標準和W3C重要性的理解?

web標準簡單來說可以分爲結構、表現和行爲。其中結構主要是有HTML標籤組成。或許通俗點說，在頁面body裏面我們寫入的標籤都是爲了頁面的結構。表現即指css樣式表，通過css可以是頁面的結構標籤更具美感。行爲是指頁面和使用者具有一定的互動，同時頁面結構或者表現發生變化，主要是有js組成。
web標準一般是將該三部分獨立分開，使其更具有模組化。但一般產生行爲時，就會有結構或者表現的變化，也使這三者的界限並不那麼清晰。
W3C對web標準提出了規範化的要求，也就是在實際程式設計中的一些程式碼規範：
1.對於結構要求：（標籤規範可以提高搜尋引擎對頁面的抓取效率，對SEO很有幫助）
- 標籤字母要小寫
- 標籤要閉合
- 標籤不允許隨意巢狀
2.對於css和js來說
1. 儘量使用外連css樣式表和js指令碼。是結構、表現和行爲分爲三塊，符合規範。同時提高頁面渲染速度，提高使用者的體驗。
2. 樣式儘量少用行間樣式表，使結構與表現分離，標籤的id和class等屬性命名要做到見文知義，標籤越少，載入越快，使用者體驗提高，程式碼維護簡單，便於改版
  不需要變動頁面內容，便可提供列印版本而不需要複製內容，提高網站易用性。

008.http的幾種請求方法和區別?

HTTP協定是一個廣泛應用的Internet協定。在其中有8個不同的請求方法：
GET、POST、HEAD、PUT、DELETE、OPTIONS、TRACE、CONNECT
GET：向特定的資源發出請求。
POST：向指定資源提交數據進行處理請求（例如提交表單或者上傳檔案）。數據被包含在請求體中。POST請求可能會導致新的資源的建立和/或已有資源的修改。

009.瀏覽器快取機制機製？

快取策略的分類：

強快取
協商快取

對於強快取，瀏覽器在第一次請求的時候，會直接下載資源，然後快取在本地，第二次請求的時候，直接使用快取。
對於協商快取，第一次請求快取且儲存快取標識與時間，重複請求向伺服器發送快取標識和最後快取時間，伺服器端進行校驗，如果失效則使用快取

010.http 狀態碼？

100-199 :   正在請求
200-299 :   表示一定上的成功
300-399 :   表示重定向
400-499 :   用戶端錯誤
500-599 :   伺服器端的錯誤

011.說說從輸入URL到看到頁面發生的全過程?

瀏覽器根據請求的URL 交給 DNS 域名解析，找到真實IP， 向伺服器發起請求;
伺服器交給後臺處理完成後返回數，瀏覽器接受檔案(HTML.JS,CSS 影象等)
瀏覽器對載入到的資源（HTML、JS、CSS等）進行語法解析，建立相應的內部數據結構（如HTML的DOM）；
載入解析到的資原始檔，渲染頁面，完成。
-----------------------------------------------
1、瀏覽器的位址列輸入URL並按下回車。
2、瀏覽器查詢當前URL的DNS快取記錄。
3、DNS解析URL對應的IP。
4、根據IP建立TCP連線（三次握手）。
5、HTTP發起請求。
6、伺服器處理請求，瀏覽器接收HTTP響應。
7、渲染頁面，構建DOM樹。
8、關閉TCP連線（四次揮手）

012.http 與 https 的區別?

爲了數據傳輸的安全， HTTPS 在HTTP 的基礎上加入SSL協定，SSL 依靠證書來驗證伺服器的身份，
並未瀏覽器和伺服器之間的通訊加密

http 是超文字傳輸協定，資訊是明文傳輸，
https 則是具有安全性的 ssl 加密傳輸協定

http 的連線很簡單， 是無狀態的； 
https 協定是由 SSL+HTTP 協定構建的可進行加密傳輸，身份認證的網路協定， 比 http 協定安全

013.什麼是記憶體？

就是該記憶體空間使用了 但是沒有回收 所以導致了泄漏
以下會造成記憶體漏失:
（1）意外的全域性變數引起的記憶體泄露。
（2）閉包引起的記憶體泄露。
（3）沒有清理的DOM元素參照。
（4）被遺忘的定時器或者回撥 
（5）子元素存在引起的記憶體泄露

014.相容問題？

png24位元的圖片在iE6瀏覽器上出現背景，解決方案是做成PNG8
瀏覽器預設的margin和paddin不同。解決方案是body,ul,li,ol,dl,dt,dd,form,input,h1,h2,h3,h4,h5,h6,p{margin:00;padding:000;}
IE下,event物件有x,y屬性,但是沒有pageX,pageY屬性
Firefox下,event物件有pageX,pageY屬性,但是沒有x,y屬性.

015.說說行動端是如何偵錯的?

(1)模擬手機偵錯
(2)真機偵錯之android手機+Chrome
(3)真機偵錯之 iphone+ safari ⑷UC瀏覽器
(1)微信內建瀏覽器偵錯
(2)debuggap
(3)抓包

016.專案測試沒問題。但是放到線上就有問題了，你是怎麼分析解決的？

可能的原因：
(1)後端原因：後端介面，後端伺服器
(2)域名、IP和路徑問題
(3)網路環境問題
(4)線上庫、框架、工具的版本和本地不—致問題
(5)線上和本地數據資源不—致問題
(6)程式bug

017.對前端介面工程師這個職位是怎麼樣理解的？

1. 前端是最貼近使用者的程式設計師，前端的能力就是能讓產品從 90分進化到 100 分，甚至更好
2. 參與專案，快速高品質完成實現效果圖，精確到1px；
3. 與團隊成員，UI設計，產品經理的溝通；
4. 做好的頁面結構，頁面重構和使用者體驗；
5. 處理hack，相容、寫出優美的程式碼格式；
6. 針對伺服器的優化、擁抱最新前端技術。

018.說一下瀏覽器的快取機制機製？

瀏覽器快取機制機製有兩種，一種爲強快取，一種爲協商快取
- 對於強快取，瀏覽器在第一次請求的時候，會直接下載資源，然後快取在本地，第二次請求的時候，直接使用快取。
- 對於協商快取，第一次請求快取且儲存快取標識與時間，重複請求向伺服器發送快取標識和最後快取時間，伺服器端進行校驗，如果失效則使用快取

019.Tcp連線: TCP 三次握手/Tcp 四次揮手

第一次握手，由瀏覽器發起，告訴伺服器，我要發起請求了，
第二次握手，由伺服器發起，告訴瀏覽器我準備接受了，你發送吧
第三次握手，由瀏覽器發送，告訴伺服器，我馬上發送了準備接受吧

第一次揮手， 瀏覽器發起，發送給伺服器 ，我東西發送完了，你準備關閉吧
第二次揮手，伺服器發送，告訴瀏覽器，我東西接收完了(請求報文) 我準備關閉了 你也準備吧
第三個揮手， 伺服器發起，告訴瀏覽器，我東西發送完了，(響應報文) 我準備關閉了 你也準備吧
第四次揮手， 瀏覽器發起，告訴瀏覽器，我東西接受完了，我準備關閉，你也準備吧

020.怎麼用css 實現一個三角形？

/* 把上、左、右三條邊隱藏掉（顏色設爲 transparent） */
#demo {
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent red transparent;
}

// 給其他三個邊框都設爲 透明
div {
	width: 0 ; 
    height: 0 ;
    border: 100px solid red;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
}

021.介紹一下 webpack

webpack是一個前端模組化打包工具，主要由入口，出口，loader，plugins四個部分。前端的打包工具還有一個gulp，不過gulp側重於前端開發的過程，而webpack側重於模組，例如他會將css檔案看作一個模組，通過css-loader將css打包成符合css的靜態資源。

2020 大前端面試題必問集錦 （持續更新）