APP
? ? 1.水平垂直居中的幾種方法
??? ? ?（1）. 水平居中
? ? ? ? ? ? ? ? ? ? ? ? ?1. inlie元素：text-align:center
???????? 2. block元素：margin:auto
? ? ? ? ? ? ? ? ? ? ? ? ?3. absolute元素：left:50%+margin-left:負(fù)的寬度的一半/translateX(-50%)
? ? ? ? ? ? （2）. 垂直居中
? ? ? ? ? ? ? ? ? ? ? ? 1.inline元素：height等于line-height?
? ? ? ? ? ? ? ? ? ? ? ? ? 2. absolute元素：top：50%，margin-top：負(fù)的高度的一半/translateY(-50%)
? ? ? ? ? ? ? ?(3). 水平垂直居中
????? ? ? ? ? ?1. 元素固定寬高
??????? ? ? ? ? ?利用定位+calc（position:absolute，top:calc(50% - 高度一半) ，left:calc(50% - 寬度一半)）
????? ? ? ? ? ? ? ? ? 利用定位+margin負(fù)值（top:50%+margin-top:負(fù)的高度的一半,left:50%+margin-left:負(fù)的寬度的一半）
????????? ? 利用定位+margin:auto(position:absolute,top:0;bottom:0;left:0;right:0;)
????????? ? 利用定位+transform:translate(-50%,-50%)??? ? ? ? ??
????????? ? flex布局：display:flex,justify-content:center align-item:center
??????? ? ? ? ? ? grid布局：display:grid,justify-content:center align-item:center
? ? ? ? 2.css三角形的制作方法
? ? ? ? ? ? ? ?1. 利用border(width和height設(shè)置為0，如果想讓哪一邊可見，就讓那個(gè)邊的對(duì)邊設(shè)置為可見的顏色，其余的設(shè)置為透明)
? ? ? ? ? ? ? ?2. 利用clip-path（clip-path: polygon(0 0, 0% 100%, 100% 50%);）
???? 3. 利用background-image：通過linear-gardient來畫三角形，background-position來調(diào)整位置，background-size來調(diào)整大小
? ? ? ?? 3. flex的各種屬性
? ? ? ? ? ? ? ? ? ?flex的屬性分為容器屬性和項(xiàng)目屬性
??????? 1.容器屬性：flex-direction(設(shè)置主軸的方向),flex-wrap(控制是否折行)，justify-content(控制主軸的對(duì)齊方式)，align-items(控制側(cè)軸的對(duì)齊方式)? align-content(控制多行情況下，副軸的對(duì)齊方式)
??????? 2.項(xiàng)目屬性：order(控制每個(gè)flex項(xiàng)目如何排序),flex-grow(控制當(dāng)容器空間不足時(shí)項(xiàng)目的擴(kuò)展比率，默認(rèn)不擴(kuò)展) flex-shrink(控制容器空間不足時(shí)項(xiàng)目的收縮比率，默認(rèn)是1也就是空間不足時(shí)會(huì)收縮)，flex-basis(定義了項(xiàng)目的默認(rèn)大小，默認(rèn)是auto即參照本身的寬和高)
???????3: 常用flex:1(1即 1 1 auto 也就是有剩余空間時(shí)會(huì)自動(dòng)擴(kuò)展 沒有剩余空間時(shí)會(huì)自動(dòng)收縮 以本身的寬和高作為伸縮基準(zhǔn))
? ? ? ? ? ?4.雙飛翼和圣杯布局
?? ? ? ? ? ? ? ? ?三欄布局，兩側(cè)固定，中間內(nèi)容隨著寬度自適應(yīng)
??????1. 使用float布局
??????2. 在兩側(cè)使用margin負(fù)值，移動(dòng)兩側(cè)的塊
??????3. 防止中間內(nèi)容被覆蓋，一個(gè)用padding另一個(gè)用margin
? ????? ? ?4. 圣杯布局用padding留空，使用margin-right移動(dòng)右邊的塊，雙飛翼使用margin留空，使用margin-left
? ? ? ? ? ? ? 5. tcp和udp，http和https
? ?1. tcp是面向連接的，udp是無連接的，tcp是可靠的無差錯(cuò)的，udp是不可靠的，tcp是端對(duì)端傳輸，udp可以一對(duì)一、一對(duì)多、多對(duì)多，tcp有擁塞控制和流量控制，udp則沒有這些機(jī)制，tcp是流式傳輸數(shù)據(jù)保證數(shù)據(jù)的順序和完整性，udp則是一個(gè)包一個(gè)包發(fā)送容易亂序和丟包
? ? ? ? ? 2.http是明文傳輸，容易被劫持。故此有了https，https就是http+ssl/tls(后者是前者的標(biāo)準(zhǔn)版本)，https的基本過程就是首先客戶端向服務(wù)端發(fā)送https請(qǐng)求，服務(wù)器先將含有公鑰的密鑰發(fā)送給客戶端，客戶端對(duì)證書進(jìn)行合法性檢測(cè)（遞歸），若不合法報(bào)https警告，若合法則在客戶端生成一個(gè)用于隨機(jī)加密的key，再用公鑰加密后發(fā)送給服務(wù)端，服務(wù)端用私鑰解密這個(gè)key，隨后用這個(gè)key進(jìn)行對(duì)稱加密傳輸。
? ?3.https的證書是為了解決中間人劫持的問題，關(guān)鍵就在于客戶端不知道是不是服務(wù)端發(fā)送的請(qǐng)求，這個(gè)時(shí)候就需要證書了，證書一般是經(jīng)過認(rèn)證的機(jī)構(gòu)頒發(fā)的。證書中含有數(shù)字簽名，數(shù)字簽名是用機(jī)構(gòu)的私鑰生成的，證書內(nèi)包含公鑰和哈希算法的實(shí)現(xiàn)，公鑰用來解密數(shù)字簽名，再用證書內(nèi)的哈希算法來對(duì)明文部分進(jìn)行哈希，結(jié)果和公鑰解密出來的一樣就說明是正確的。
6.? 瀏覽器緩存
? ? ? ?瀏覽器緩存的發(fā)展有一定的時(shí)間脈絡(luò)，從時(shí)間上看是expires、cache-control到last-modified,etag這樣，expires和cache-control是強(qiáng)制緩存，強(qiáng)制緩存的思路就是指定一個(gè)過期時(shí)間，在這個(gè)時(shí)間之前客戶端都不需要向服務(wù)器請(qǐng)求資源，expires是過期日期，但是如果指定的是日期的話會(huì)產(chǎn)生一些問題，比如客戶端和服務(wù)器時(shí)區(qū)不一樣這樣就會(huì)產(chǎn)生，實(shí)際已經(jīng)過期但是客戶端認(rèn)為沒有過期諸如此類的情況出現(xiàn)。為了解決這個(gè)問題，開始使用cache-control:max-age=xxx，規(guī)定還有多少秒過期，客戶端可以根據(jù)自己的有效時(shí)間計(jì)算過期日期，但是這也有問題，就是這個(gè)cache-control只能精確到秒級(jí)，要是在一秒內(nèi)多次改變那么就無法捕捉到，而且強(qiáng)制緩存本身也有問題，指定了過期日期但是在這之前服務(wù)器改變了資源，就無法知道，客戶端和服務(wù)端存在一段時(shí)間的資源不同步情況。為此出現(xiàn)了協(xié)商緩存機(jī)制，協(xié)商緩存通過上次修改日期last-modified和etag文件版本號(hào)這兩種，last-modified就是服務(wù)器響應(yīng)客戶端請(qǐng)求時(shí)會(huì)帶上last-modified:xxx這個(gè)字段表示文件的最后修改時(shí)間，客戶端再次請(qǐng)求時(shí)會(huì)帶上If-modified-since:xxx來驗(yàn)證自從這個(gè)時(shí)間之后有無修改文件，如果修改了返回200和新的資源，沒有修改返回304。問題是最后修改時(shí)間變了并不一定表示文件內(nèi)容有改變，而且時(shí)間也是只能精確到秒級(jí)。這樣就催生了etag的出現(xiàn)，etag就是文件的版本號(hào)，只有文件真正改變了才會(huì)改變，這樣當(dāng)?shù)谝淮慰蛻舳讼蚍?wù)器請(qǐng)求時(shí)返回etag:xxx這個(gè)字段，當(dāng)再發(fā)請(qǐng)求時(shí)就會(huì)帶上if-none-match這個(gè)字段，如果版本號(hào)不一樣說明文件修改了，返回200和新的資源，如果一樣說明沒修改，返回304。有強(qiáng)制緩存的時(shí)候用強(qiáng)制緩存，沒有才用協(xié)商緩存expires和cache-control同時(shí)存在會(huì)用cache-control，last-modified和etag同時(shí)存在則請(qǐng)求時(shí)會(huì)同時(shí)帶上if-modified-since和if-none-match。手動(dòng)刷新那么強(qiáng)制緩存失效，強(qiáng)制刷新(ctrl+f5)那么強(qiáng)制緩存和協(xié)商緩存都會(huì)失效。
? ? ? 7.從輸入url到渲染的過程
? ? 1.地址欄輸入url按下回車
? ? ? ? ? ?2.瀏覽器尋找該url是否存在緩存，并判斷是否過期
? ? ? ? ? ?3.開始進(jìn)行DNS解析，將url和ip地址對(duì)應(yīng)起來
? ? ? ? ? ?4.建立tcp連接，三次握手
? ? 5.發(fā)送http請(qǐng)求
? ? 6.瀏覽器處理服務(wù)器的響應(yīng)數(shù)據(jù)
? ? 7.瀏覽器渲染頁(yè)面
? ?8.關(guān)閉tcp連接，四次揮手
8.vue響應(yīng)式的原理
? ? ? ? vue的數(shù)據(jù)雙向綁定主要是通過Object.defineProperty()和發(fā)布訂閱模式結(jié)合實(shí)現(xiàn)的，通過劫持每個(gè)屬性的getter和setter屬性，在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者，從而調(diào)用相應(yīng)的回調(diào)來更新視圖。Object.defineProperty()會(huì)在一個(gè)對(duì)象上定義新的屬性或者修改一個(gè)屬性，第一個(gè)參數(shù)是要定義的對(duì)象，第二個(gè)參數(shù)是屬性名，第三個(gè)對(duì)象是屬性描述符。發(fā)布訂閱模式是一種設(shè)計(jì)模式，發(fā)布者有添加訂閱者和通知訂閱者兩種方法，當(dāng)時(shí)機(jī)成熟時(shí)通知調(diào)用訂閱者的回調(diào)函數(shù)以通知訂閱者。
基本的流程是
1. 給需要監(jiān)聽的數(shù)據(jù)進(jìn)行遞歸遍歷加setter和getter，這樣一旦數(shù)據(jù)變化就會(huì)觸發(fā)setter
? ? ? ? ?2. complie主要的作用是給每個(gè)指令對(duì)應(yīng)的節(jié)點(diǎn)綁定更新函數(shù)，解析模板指令將模板中的變量更換成數(shù)據(jù)
3.dep監(jiān)聽變化，一旦有變化通知watcher，wachter再重新調(diào)用重新渲染的函數(shù)
?? ? ? ? 9.簡(jiǎn)單描述一下websocket
websocket是全雙工通信，是一種持久化協(xié)議，長(zhǎng)連接通信，只需要建立一次tcp鏈接，以后的通信都通過這個(gè)連接，在握手階段采用http，服務(wù)器可以主動(dòng)向客戶端請(qǐng)求，請(qǐng)求量小。
10.三次握手，四次揮手
? ? ? ? ? ?三次握手
1. 客戶端向服務(wù)器發(fā)送SYN報(bào)文
2. 服務(wù)器回應(yīng)一個(gè)SYN+ACK報(bào)文
? ? 3. 客戶端回應(yīng)一個(gè)ACK報(bào)文
第一次確認(rèn)客戶端的發(fā)送和服務(wù)端的接收能力正常
第二次確認(rèn)服務(wù)端的發(fā)送能力正常
第三次確認(rèn)客戶端的接收能力正常
? ?四次揮手
1. 客戶端發(fā)送一個(gè)FIN報(bào)文并跟上一個(gè)序列號(hào)，進(jìn)入FIN_WAIT1狀態(tài)
2. 服務(wù)器接收到這個(gè)報(bào)文進(jìn)入CLOSE_WAIT狀態(tài)，發(fā)送ACK報(bào)文，將序列號(hào)加1代表收到了請(qǐng)求，客戶端進(jìn)入FIN_WAIT_2狀態(tài)
3. 當(dāng)服務(wù)器也想關(guān)閉時(shí)，發(fā)送一個(gè)FIN報(bào)文并跟上一個(gè)序列號(hào)，服務(wù)器進(jìn)入LAST_ACK狀態(tài)，客戶端進(jìn)入TIME_WAIT狀態(tài)
4. 客戶端發(fā)送ACK報(bào)文并將序列號(hào)加一，tcp鏈接徹底斷開，服務(wù)器進(jìn)入CLOSED狀態(tài)
?
? ? ? ? ? ? ? ???
?
本文摘自 ：https://www.cnblogs.com/
