1.HTTP和HTTPS的基本概念

http：是一個(gè)客戶端和服務(wù)端請(qǐng)求和應(yīng)答的標(biāo)準(zhǔn)（TCP），用于從www服務(wù)器傳輸超文本到本地瀏覽器的超文本傳輸協(xié)議。

成都創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站制作、成都做網(wǎng)站、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)、扎囊網(wǎng)絡(luò)推廣、微信小程序開(kāi)發(fā)、扎囊網(wǎng)絡(luò)營(yíng)銷、扎囊企業(yè)策劃、扎囊品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；成都創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供扎囊建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18980820575，官方網(wǎng)址：www.cdcxhl.com

https：是以安全為目標(biāo)的HTTP通道，即HTTP下加入SSL層進(jìn)行加密。其作用是：建立一個(gè)信息安全通道，確保數(shù)據(jù)的傳輸，確保網(wǎng)站的真實(shí)性。

補(bǔ)充：SSL是洋文“Secure Sockets Layer”的縮寫(xiě)，中文叫做“安全套接層”。

2.HTTP和HTTPS的區(qū)別及優(yōu)缺點(diǎn)？

1. HTTPS 協(xié)議需要 CA 證書(shū)，費(fèi)用較高；而HTTP 協(xié)議不需要；
2. HTTP是超文本傳輸協(xié)議，信息是明文傳輸；HTTPS協(xié)議要比HTTP協(xié)議安全，HTTPS是具有安全性的SSL加密傳輸協(xié)議，可防止數(shù)據(jù)在傳輸過(guò)程中被竊取、改變，確保數(shù)據(jù)的完整性（當(dāng)然這種安全性并非絕對(duì)的，低于更深的Web安全問(wèn)題，次數(shù)暫且不表）；
3. HTTP協(xié)議的默認(rèn)端口為80；HTTPS默認(rèn)端口為443；
4. HTTP 協(xié)議連接很簡(jiǎn)單，是無(wú)狀態(tài)的；HTTPS 協(xié)議是有SSL 和HTTP協(xié)議構(gòu)建的可進(jìn)行加密傳輸、身份認(rèn)證的網(wǎng)絡(luò)協(xié)議，比HTTP 更加安全；

3.HTTPS協(xié)議工作原理

如何保證信息的安全性：對(duì)稱加密、非對(duì)稱加密、數(shù)字證書(shū)與數(shù)字簽名

客戶端申請(qǐng)HTTPS通信，建立SSL鏈接 服務(wù)器響應(yīng)并向客戶端傳遞證書(shū)（證書(shū)中包含了密鑰） 客戶端驗(yàn)證證書(shū)，獲取公鑰生成對(duì)稱加密密鑰，用公鑰加密后傳給服務(wù)器 服務(wù)器收到消息，用私鑰解密，拿出對(duì)稱密鑰，并通知客戶端，SSL通道建立完成，HTTPS通道也建立完成。 共享密鑰交換成功，HTTPS通信建立后，客戶端和服務(wù)端利用共享密鑰加密通信 客戶端斷開(kāi)鏈接

一定要用https嗎？

https那么的安全，是不是我們?cè)谑裁磮?chǎng)景下都要去使用https進(jìn)行通信呢？答案是否定的。

1）https雖然提供了消息安全傳輸?shù)耐ǖ溃敲看蜗⒌募咏饷苁趾臅r(shí)，消息系統(tǒng)資源。所以，除非在一些對(duì)安全性比較高的場(chǎng)景下，比如銀行系統(tǒng)，購(gòu)物系統(tǒng)中我們必須要使用https進(jìn)行通信，其他一些對(duì)安全性要求不高的場(chǎng)景，我們其實(shí)沒(méi)必要使用https。

2）使用https需要使用到數(shù)字證書(shū)，但是一般權(quán)威機(jī)構(gòu)頒發(fā)的數(shù)字證書(shū)都是收費(fèi)的，而且價(jià)格也是不菲的，所以對(duì)于一些個(gè)人網(wǎng)站特別是學(xué)生來(lái)講，如果對(duì)安全性要求不高，也沒(méi)必要使用https。

參考：https的工作原理

4.輸入url后發(fā)生了什么？

1. DNS域名解析
2. 建立TCP連接（三次握手）
3. 發(fā)送HTTP請(qǐng)求
4. 服務(wù)器處理請(qǐng)求，返回響應(yīng)結(jié)果
5. 關(guān)閉TCP連接（四次揮手）
6. 瀏覽器解析HTML渲染頁(yè)面，構(gòu)建DOM樹(shù)

詳解：從輸入url到頁(yè)面加載完成發(fā)生了什么？

補(bǔ)充1：為什么url要解析

因?yàn)橛行┳址麜?huì)引起歧義，如“&”“=”，需要進(jìn)行轉(zhuǎn)義即編碼。比如http:www.baidu.com?key=value，假如我的key本身就包括等于=符號(hào)，比如ke=y=value，就會(huì)出現(xiàn)歧義，你不知道=到底是連接key和value的符號(hào)，還是說(shuō)本身key里面就有=。

補(bǔ)充2：哪些符號(hào)需要編碼

RFC3986文檔規(guī)定，URL 中只允許包含英文字母（a-zA-Z）、數(shù)字（0-9）、-_.~ 4個(gè)特殊字符以及所有保留字符（ ! * ' ( ) ; : @ & = + $ , / ? # [ ] ）。RFC3986文檔對(duì) Url 的編解碼問(wèn)題做出了詳細(xì)的建議，指出了哪些字符需要被編碼才不會(huì)引起Url語(yǔ)義的轉(zhuǎn)變，以及對(duì)為什么這些字符需要編碼做出了相應(yīng)的解釋。

不安全字符：還有一些字符，當(dāng)他們直接放在URL中的時(shí)候，可能會(huì)引起解析程序的歧義。這些字符被視為不安全字符，原因有很多。

• 空格：Url 在傳輸?shù)倪^(guò)程，或者用戶在排版的過(guò)程，或者文本處理程序在處理Url的過(guò)程，都有可能引入無(wú)關(guān)緊要的空格，或者將那些有意義的空格給去掉。
• 引號(hào)以及<>：引號(hào)和尖括號(hào)通常用于在普通文本中起到分隔Url的作用
• #：通常用于表示書(shū)簽或者錨點(diǎn)
• %：百分號(hào)本身用作對(duì)不安全字符進(jìn)行編碼時(shí)使用的特殊字符，因此本身需要編碼
• {}|\^[]`~：某一些網(wǎng)關(guān)或者傳輸代理會(huì)篡改這些字符

　　需要注意的是，對(duì)于Url中的合法字符，編碼和不編碼是等價(jià)的，但是對(duì)于上面提到的這些字符，如果不經(jīng)過(guò)編碼，那么它們有可能會(huì)造成Url語(yǔ)義的不同。因此對(duì)于Url而言，只有普通英文字符和數(shù)字，特殊字符$-_.+!*'()還有保留字符，才能出現(xiàn)在未經(jīng)編碼的Url之中。其他字符均需要經(jīng)過(guò)編碼之后才能出現(xiàn)在Url中。

參考：URL原理、URL編碼、URL特殊字符

5.TCP三次握手

第一次握手：建立連接，客戶端發(fā)送SYN包（syn=j）（是TCP/IP建立連接時(shí)使用的握手信號(hào)。），隨后客戶端進(jìn)入SYN-SENT階段，等待服務(wù)端確認(rèn)。

第二次握手：服務(wù)端收到syn包并確認(rèn)客戶的SYN，同時(shí)也發(fā)送一個(gè)自己的SYN包，隨后服務(wù)器端進(jìn)入SYN-RCVD階段。

第三次握手：客戶端接收到來(lái)自服務(wù)器端的確認(rèn)收到數(shù)據(jù)的SYN+ACK包，明確了從客戶端到服務(wù)器的數(shù)據(jù)傳輸是正常的，結(jié)束SYN-SENT階段，并向服務(wù)器發(fā)送確認(rèn)包ACK。隨后客戶端進(jìn)入ESTABLISHED階段。服務(wù)器收到來(lái)自客戶端的“確認(rèn)收到服務(wù)器數(shù)據(jù)”的TCP報(bào)文之后，明確了從服務(wù)器到客戶端的數(shù)據(jù)傳輸是正常的。完成三次握手。

為什么要進(jìn)行第三次握手？

為了防止服務(wù)器端開(kāi)啟一些無(wú)用的連接增加服務(wù)器開(kāi)銷以及防止已失效的連接請(qǐng)求報(bào)文段突然又傳送到了服務(wù)端，因而產(chǎn)生錯(cuò)誤。

由于網(wǎng)絡(luò)傳輸是有延時(shí)的(要通過(guò)網(wǎng)絡(luò)光纖和各種中間代理服務(wù)器)，在傳輸?shù)倪^(guò)程中，比如客戶端發(fā)起了SYN=1創(chuàng)建連接的請(qǐng)求(第一次握手)。如果服務(wù)器端就直接創(chuàng)建了這個(gè)連接并返回包含SYN、ACK和Seq等內(nèi)容的數(shù)據(jù)包給客戶端，這個(gè)數(shù)據(jù)包因?yàn)榫W(wǎng)絡(luò)傳輸?shù)脑騺G失了，丟失之后客戶端就一直沒(méi)有接收到服務(wù)器返回的數(shù)據(jù)包?？蛻舳丝赡茉O(shè)置了一個(gè)超時(shí)時(shí)間，時(shí)間到了就關(guān)閉了連接創(chuàng)建的請(qǐng)求。再重新發(fā)出創(chuàng)建連接的請(qǐng)求，而服務(wù)器端是不知道的，如果沒(méi)有第三次握手告訴服務(wù)器端客戶端收的到服務(wù)器端傳輸?shù)臄?shù)據(jù)的話，服務(wù)器端是不知道客戶端有沒(méi)有接收到服務(wù)器端返回的信息的。

簡(jiǎn)單來(lái)說(shuō)：得客戶端和服務(wù)端雙方都確定對(duì)方能收到請(qǐng)求，如果是兩次握手的話，服務(wù)端不知道客戶端能否收到請(qǐng)求，服務(wù)端建立好連接開(kāi)始發(fā)數(shù)據(jù)，結(jié)果發(fā)出去的包，客戶端一直沒(méi)收到，那么攻擊服務(wù)端就很容易，一直發(fā)包不接收，服務(wù)器很容易就掛掉了。

6.TCP四次揮手

• 首先客戶端想要釋放連接，向服務(wù)器端發(fā)送一段TCP報(bào)文，隨后客戶端進(jìn)入FIN-WAIT-1階段，即半關(guān)閉階段，并且停止在客戶端到服務(wù)器端方向上發(fā)送數(shù)據(jù)，但是客戶端仍然能接收從服務(wù)器端傳輸過(guò)來(lái)的數(shù)據(jù)。
• 服務(wù)器端接收到從客戶端發(fā)出的連接釋放報(bào)文之后，確認(rèn)了客戶端想要釋放連接，發(fā)出確認(rèn)報(bào)文，表示“接收到客戶端發(fā)送的釋放連接的請(qǐng)求”。

前"兩次揮手"既讓服務(wù)器端知道了客戶端想要釋放連接，也讓客戶端知道了服務(wù)器端了解了自己想要釋放連接的請(qǐng)求。于是，可以確認(rèn)關(guān)閉客戶端到服務(wù)器端方向上的連接了

• 服務(wù)器端自從發(fā)出ACK確認(rèn)報(bào)文之后，經(jīng)過(guò)CLOSED-WAIT階段，做好了釋放服務(wù)器端到客戶端方向上的連接準(zhǔn)備，向客戶端發(fā)出釋放報(bào)文，等待客戶端的確認(rèn)，隨后服務(wù)器端結(jié)束CLOSE-WAIT階段，進(jìn)入LAST-ACK階段。并且停止在服務(wù)器端到客戶端的方向上發(fā)送數(shù)據(jù)，但是服務(wù)器端仍然能夠接收從客戶端傳輸過(guò)來(lái)的數(shù)據(jù)。
• 客戶端收到服務(wù)器的連接釋放報(bào)文后，向服務(wù)器端發(fā)送確認(rèn)報(bào)文，服務(wù)器端收到從客戶端發(fā)出的TCP報(bào)文之后結(jié)束LAST-ACK階段，進(jìn)入CLOSED階段。由此正式確認(rèn)關(guān)閉服務(wù)器端到客戶端方向上的連接。

簡(jiǎn)單來(lái)說(shuō)

第一次揮手：客戶端告訴服務(wù)端我要斷開(kāi)連接了

第二次揮手：服務(wù)端告訴客戶端我知道你要斷開(kāi)連接了，并告訴客戶端你可以斷開(kāi)了

第三次揮手：服務(wù)端做好了斷開(kāi)準(zhǔn)備，并想客戶端發(fā)送斷開(kāi)請(qǐng)求，等到客戶端確認(rèn)

第四次揮手：客戶端接收到服務(wù)端的可以釋放的信號(hào)，向服務(wù)端發(fā)送確認(rèn)斷開(kāi)的信號(hào)，服務(wù)端收到后就關(guān)閉連接。

參考：詳解 TCP 連接的“ 三次握手 ”與“ 四次揮手

6.cookie、sessionStorage、localStorage的區(qū)別

相同點(diǎn)：都是在開(kāi)發(fā)中用到的臨時(shí)存儲(chǔ)客戶端會(huì)話信息或者數(shù)據(jù)的方法

不同點(diǎn)：

1.存儲(chǔ)的時(shí)間有效期不同

• cookie的有效期是可以設(shè)置的，默認(rèn)的情況下是關(guān)閉瀏覽器后失效
• sessionStorage的有效期是僅保持在當(dāng)前頁(yè)面，關(guān)閉當(dāng)前會(huì)話頁(yè)或者瀏覽器后就會(huì)失效
• localStorage的有效期是在不進(jìn)行手動(dòng)刪除的情況下是一直有效的

2.存儲(chǔ)的大小不同

• cookie的存儲(chǔ)是4kb左右，存儲(chǔ)量較小，一般頁(yè)面最多存儲(chǔ)20條左右信息
• localStorage和sessionStorage的存儲(chǔ)容量是5Mb(官方介紹，可能和瀏覽器有部分差異性)

3.與服務(wù)端的通信

• cookie會(huì)參與到與服務(wù)端的通信中，一般會(huì)攜帶在http請(qǐng)求的頭部中，例如一些關(guān)鍵密匙驗(yàn)證等。
• localStorage和sessionStorage是單純的前端存儲(chǔ)，不參與與服務(wù)端的通信

參考：cookie、localStorage和sessionStorage三者的區(qū)別

7.Vuex 和 localStorage 的區(qū)別

1. 最重要的區(qū)別：vuex 存儲(chǔ)在內(nèi)存中l(wèi)ocalstorage 則以文件的方式存儲(chǔ)在本地，只能存儲(chǔ)字符串類型的數(shù)據(jù)，存儲(chǔ)對(duì)象需要 JSON 的 stringify 和parse 方法進(jìn)行處理。讀取內(nèi)存比讀取硬盤(pán)速度要快。
2. 應(yīng)用場(chǎng)景 Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。vuex 用于組件之間的傳值。localstorage 是本地存儲(chǔ)，是將數(shù)據(jù)存儲(chǔ)到瀏覽器的方法，一般是在跨頁(yè)面?zhèn)鬟f數(shù)據(jù)時(shí)使用 。 Vuex 能做到數(shù)據(jù)的響應(yīng)式，localstorage 不能。
3. 永久性 刷新頁(yè)面時(shí) vuex 存儲(chǔ)的值會(huì)丟失，localstorage 不會(huì)。注意：對(duì)于不變的數(shù)據(jù)確實(shí)可以用 localstorage 可以代替vuex，但是當(dāng)兩個(gè)組件共用一個(gè)數(shù)據(jù)源（對(duì)象或數(shù)組）時(shí)，如果其中一個(gè)組件改變了該數(shù)據(jù)源，希望另一個(gè)組件響應(yīng)該變化時(shí)，localstorage無(wú)法做到，原因就是區(qū)別 1。

8.瀏覽器如何渲染網(wǎng)頁(yè)

1. 解析HTML生成DOM樹(shù)- 渲染引擎首先解析HTML文檔，生成DOM樹(shù)
2. 構(gòu)建Render樹(shù)- 接下來(lái)不管是內(nèi)聯(lián)式，外聯(lián)式還是嵌入式引入的CSS樣式會(huì)被解析生成CSSOM樹(shù)，根據(jù)DOM樹(shù)與CSSOM樹(shù)生成另外一棵用于渲染的樹(shù)-渲染樹(shù)(Render tree)，
3. 布局Render樹(shù)- 然后對(duì)渲染樹(shù)的每個(gè)節(jié)點(diǎn)進(jìn)行布局處理，確定其在屏幕上的顯示位置
4. 繪制Render樹(shù)- 最后遍歷渲染樹(shù)并用UI后端層將每一個(gè)節(jié)點(diǎn)繪制出來(lái)

解析HTML文件，創(chuàng)建DOM樹(shù)，自上而下，如果遇到樣式（link、style）與腳本（script）都會(huì)阻塞

補(bǔ)充1：避免JavaScript阻塞JavaScript 腳本延遲加載的方式有哪些？

1. defer 屬性：給 js 腳本添加 defer 屬性，這個(gè)屬性會(huì)讓腳本的加載與文檔的解析同步解析，然后在文檔解析完成后再執(zhí)行這個(gè)腳本文件，這樣的話就能使頁(yè)面的渲染不被阻塞。多個(gè)設(shè)置了defer屬性 14 的腳本按規(guī)范來(lái)說(shuō)最后是順序執(zhí)行的，但是在一些瀏覽器中可能不是這樣。
2. async 屬性：給 js 腳本添加 async 屬性，這個(gè)屬性會(huì)使腳本異步加載，不會(huì)阻塞頁(yè)面的解析過(guò)程，但是當(dāng)腳本加載完成后立即執(zhí)行js腳本，這個(gè)時(shí)候如果文檔沒(méi)有解析完成的話同樣會(huì)阻塞。多個(gè)async屬性的腳本的執(zhí)行順序是不可預(yù)測(cè)的，一般不會(huì)按照代碼的順序依次執(zhí)行。
3. 動(dòng)態(tài)創(chuàng)建 DOM 方式：動(dòng)態(tài)創(chuàng)建 DOM 標(biāo)簽的方式，可以對(duì)文檔的加載事件進(jìn)行監(jiān)聽(tīng)，當(dāng)文檔加載完成后再動(dòng)態(tài)的創(chuàng)建script 標(biāo)簽來(lái)引入js 腳本。
4. 使用 setTimeout 延遲方法：設(shè)置一個(gè)定時(shí)器來(lái)延遲加載js 腳本文件
5. 讓 JS 最后加載：將 js 腳本放在文檔的底部，來(lái)使js 腳本盡可能的在最后來(lái)加載執(zhí)行。

補(bǔ)充2：頁(yè)面渲染優(yōu)化

• HTML文檔結(jié)構(gòu)層次盡量少，最好不深于六層；
• 腳本盡量后放，放在前即可；
• 少量首屏樣式內(nèi)聯(lián)放在標(biāo)簽內(nèi)；
• 樣式結(jié)構(gòu)層次盡量簡(jiǎn)單；
• 在腳本中盡量減少DOM操作，盡量緩存訪問(wèn)DOM的樣式信息，避免過(guò)度觸發(fā)回流；
• 減少通過(guò)JavaScript代碼修改元素樣式，盡量使用修改class名方式操作樣式或動(dòng)畫(huà)；
• 動(dòng)畫(huà)盡量使用在絕對(duì)定位或固定定位的元素上；
• 隱藏在屏幕外，或在頁(yè)面滾動(dòng)時(shí)，盡量停止動(dòng)畫(huà)；
• 盡量緩存DOM查找，查找器盡量簡(jiǎn)潔；
• 涉及多域名的網(wǎng)站，可以開(kāi)啟域名預(yù)解析

9.重繪與重排相關(guān)

重繪與重排的區(qū)別

重排：當(dāng)渲染樹(shù)中部分或者全部元素的尺寸、結(jié)構(gòu)或者屬性發(fā)生變化時(shí)，瀏覽器會(huì)重新渲染部分或者全部文檔的過(guò)程就稱為重排/回流。

重繪：當(dāng)頁(yè)面中某些元素的樣式發(fā)生變化，但是不會(huì)影響其在文檔流中的位置時(shí)，瀏覽器就會(huì)對(duì)元素進(jìn)行重新繪制，這個(gè)過(guò)程就是重繪。

如何觸發(fā)重繪與重排

下面這些操作會(huì)導(dǎo)致重排/回流：

頁(yè)面的首次渲染 、瀏覽器的窗口大小發(fā)生變化 、元素的內(nèi)容發(fā)生變化 、元素的尺寸或者位置發(fā)生變化、 元素的字體大小發(fā)生變化、 激活 CSS 偽類、 查詢某些屬性或者調(diào)用某些方法 、添加或者刪除可見(jiàn)的 DOM 元素

在觸發(fā)回流（重排）的時(shí)候，由于瀏覽器渲染頁(yè)面是基于流式布局的，所以當(dāng)觸發(fā)回流時(shí)，會(huì)導(dǎo)致周圍的 DOM 元素重新排列，它的影響范圍有兩種： 全局范圍：從根節(jié)點(diǎn)開(kāi)始，對(duì)整個(gè)渲染樹(shù)進(jìn)行重新布局局部范圍：對(duì)渲染樹(shù)的某部分或者一個(gè)渲染對(duì)象進(jìn)行重新布局

下面這些操作會(huì)導(dǎo)致重繪：

color、background 相關(guān)屬性：background-color、background-image等 outline 相 關(guān) 屬 性 ： outline-color 、outline-width、text-decoration border-radius、visibility、box-shadow 注意： 當(dāng)觸發(fā)重排/回流時(shí)，一定會(huì)觸發(fā)重繪，但是重繪不一定會(huì)引發(fā)重排/回流。

如何避免重繪或重排

1. 用transform做形變和位移可以減少reflow
2. 避免逐個(gè)修改節(jié)點(diǎn)樣式，盡量一次性修改
3. 使用DocumentFragment將需要多次修改的DOM元素緩存，最后一次性append到真實(shí)DOM中渲染
4. 可以將需要多次修改的DOM元素設(shè)置display:none，操作完再顯示。（因?yàn)殡[藏元素不在render樹(shù)內(nèi)，因此修改隱藏元素不會(huì)觸發(fā)回流重繪）
5. 避免多次讀取某些屬性
6. 通過(guò)絕對(duì)位移將復(fù)雜的節(jié)點(diǎn)元素脫離文檔流，形成新的Render Layer，降低回流成本
7. 提升為合成層 將元素提升為合成層有以下優(yōu)點(diǎn)：
   • 合成層的位圖，會(huì)交由 GPU 合成，比 CPU 處理要快
   • 當(dāng)需要 repaint 時(shí)，只需要 repaint 本身，不會(huì)影響到其他的層
   • 對(duì)于 transform 和 opacity 效果，不會(huì)觸發(fā) layout 和 paint

提升合成層的最好方式是使用 CSS 的 will-change 屬性：

#target{
  will-change: transform;
}

網(wǎng)頁(yè)題目：前端面試八股文
當(dāng)前鏈接：http://weahome.cn/article/dsojgci.html