s：小編剛整理 2020 年全套最新精品技術(shù)資料免費(fèi)發(fā)給你！ (原價最少8999元，超2000G！）

關(guān)注小編私信。

點(diǎn)贊 + 評論 （勾選 “轉(zhuǎn)發(fā)” ）。私信小編回復(fù)關(guān)鍵詞： 1024即可免費(fèi)領(lǐng)取喲！

正文：

當(dāng)輸入URL、敲下回車、最后瀏覽器頁面顯示，這里面有什么故事？鍵盤到操作系統(tǒng)、操作系統(tǒng)到瀏覽器、瀏覽器到服務(wù)器、服務(wù)器返回數(shù)據(jù)頁面渲染……

鍵盤到操作系統(tǒng)

回車鍵按下時，與鍵盤相關(guān)的電路閉合，通過消抖操作，鍵盤的電路系統(tǒng)將回車鍵轉(zhuǎn)化為鍵碼13。按鍵被按下會觸發(fā)中斷事件，回車鍵的鍵碼被編碼并通過通用串行總線(USB)傳輸?shù)街袛嗾埱缶€上(IRQ)，中斷控制器接收到IRQ上的信號后，會映射一個中斷向量。中斷描述符表將中斷向量映射到對應(yīng)的處理函數(shù)上(中斷處理器)。

操作系統(tǒng)到瀏覽器

操作系統(tǒng)通過相應(yīng)的API函數(shù)獲取到當(dāng)前的活動窗口(該瀏覽器)并獲取到當(dāng)前瀏覽器地址欄句柄，操作系統(tǒng)使用sendMessage函數(shù)將消息添加到地址欄句柄的消息隊列中，sendMessage函數(shù)參數(shù)將帶有按鍵以及按鍵的信息。然后瀏覽器地址欄句柄的消息處理函數(shù)將被調(diào)用，處理消息隊列中的消息。

瀏覽器到服務(wù)器

處理URL

關(guān)鍵字or地址：瀏覽器搜先分析地址欄的內(nèi)容是關(guān)鍵字還是URL。若地址欄的為關(guān)鍵字，則使用瀏覽器的搜索引擎搜索該關(guān)鍵字。當(dāng)把文字作為關(guān)鍵字傳遞給搜索引擎時，通常會在URL后面加上一個參數(shù)，這個參數(shù)告訴搜索引擎搜索來自哪個瀏覽器。

HSTS列表: HSTS強(qiáng)制客戶端使用HTTPS與服務(wù)器創(chuàng)建連接。若訪問的URL在HSTS列表里，則瀏覽器會把HTTP協(xié)議變?yōu)镠TTPS。

編碼： 對URL進(jìn)行Unicode編碼

DNS查詢

瀏覽器處理完URL后，將獲取要訪問的URL所在服務(wù)器的地址。這時需要進(jìn)行DNS查詢。

DNS查詢過程：

1.查詢本地DNS緩存2.查看本地host表3.查詢DNS服務(wù)器在DNS服務(wù)器上進(jìn)行查詢時，首先查詢本地DNS服務(wù)器。若本地DNS 服務(wù)器上有域名的緩存，則本地DNS服務(wù)器將對應(yīng)IP發(fā)送給查詢方。若本地DNS服務(wù)器上沒有域名的緩存，則向根域名服務(wù)器發(fā)起查詢(遞歸)。根域名服務(wù)器收到請求后，會返回下一級域名信息的DNS服務(wù)器地址。本地DNS服務(wù)器收到地址后繼續(xù)進(jìn)行查詢(迭代)，最后獲取到目標(biāo)域名的IP并發(fā)送給查詢方。

TCP連接

此時獲取到URL中域名的IP地址，通過協(xié)議可以獲取到端口(HTTP:80、HTTPS:443)，下一步該進(jìn)行瀏覽器與服務(wù)器之間的連接。瀏覽器使用socket函數(shù)來進(jìn)行TCP連接，初始化socket時參數(shù)為 AF_INET和SOCK_STREAM。

TCP建立連接過程（三次握手）：

1.客戶端發(fā)送一個TCP包。設(shè)置SYN=1(請求建立連接)、Seq=X(隨機(jī)產(chǎn)生的序列號)2.服務(wù)器發(fā)回確認(rèn)包(ACK)應(yīng)答。SYN=1、ACK=1、ACK number = X+1、Seq = Y(隨機(jī)產(chǎn)生)3.客戶端再次發(fā)送確認(rèn)包(ACK) 。SYN=0、ACK=1、ACK number= Y+1、Seq = X+1

TCP斷開連接過程（四次揮手）：

1.客戶機(jī)給服務(wù)器一個FIN為1的TCP報文2.服務(wù)器返回給客戶端一個確認(rèn)ACK報文3.服務(wù)器給客戶端發(fā)送一個FIN報文4.客戶機(jī)回復(fù)ACK報文

服務(wù)器動作

從瀏覽器發(fā)起請求到請求到頁面數(shù)據(jù)的過程中，可能會經(jīng)過負(fù)載均衡等中間部分

負(fù)載均衡

方式說明特點(diǎn)HTTP重定向?yàn)g覽器向web服務(wù)器請求某個URL后，web服務(wù)器可以通過http響應(yīng)頭信息中的Location標(biāo)記來返回一個新的URL主站點(diǎn)服務(wù)器的吞吐率平均分配到了被轉(zhuǎn)移的服務(wù)器;重定向的服務(wù)器工作量不同，實(shí)際的負(fù)載量不可估計DNS負(fù)載均衡在DNS服務(wù)器中配置多個A記錄，將這些A記錄對應(yīng)的服務(wù)器構(gòu)造成集群,，例如CDN可以根據(jù)用戶IP選擇最近的服務(wù)器，無法記錄HTTP請求上下文反向代理轉(zhuǎn)發(fā)http請求(應(yīng)用層)，常用nginx所有HTTP請求都必須經(jīng)過代理，可以為不同的實(shí)際服務(wù)器設(shè)置不同的權(quán)重，要求并發(fā)處理能力要求高，可以可以監(jiān)控后端服務(wù)器IP負(fù)載均衡網(wǎng)絡(luò)層通過修改請求目標(biāo)地址進(jìn)行負(fù)載均衡(網(wǎng)絡(luò)層)吞吐率高，要求網(wǎng)絡(luò)帶寬大

請求處理

1.服務(wù)器收到請求后將請求解析為：請求方法、域名、請求路徑2.服務(wù)器找到該域名對應(yīng)的虛擬主機(jī)，并驗(yàn)證該虛擬主機(jī)是否可以使用該請求方法3.服務(wù)器獲取請求路徑對應(yīng)的內(nèi)容，并根據(jù)內(nèi)容使用指定的程序來處理(e.g.使用不同的程序解析PHP、JSP等文件)，將輸出的結(jié)果發(fā)送給瀏覽器

PLUS - 請求方法

方法描述GET請求指定的頁面信息，并返回實(shí)體主體。POST向指定資源提交數(shù)據(jù)進(jìn)行處理請求(例如提交表單或者上傳文件)PUT從客戶端向服務(wù)器傳送的數(shù)據(jù)取代指定的文檔的內(nèi)容HEAD與get類似，不過返回的響應(yīng)中沒有具體的內(nèi)容，用于獲取報頭DELETE請求服務(wù)器刪除指定的頁面OPTIONS返回服務(wù)器針對特定資源所支持的HTTP請求方法TRACE回顯服務(wù)器收到的請求，主要用于測試或診斷CONNECTHTTP/1.1協(xié)議中預(yù)留給能夠?qū)⑦B接改為管道方式的代理服務(wù)器

瀏覽器頁面渲染

瀏覽器收到服務(wù)器返回的頁面數(shù)據(jù)后，開始對頁面進(jìn)行渲染

瀏覽器進(jìn)程與線程

瀏覽器是多進(jìn)程的，用于頁面顯示的有Browser進(jìn)程、第三方插件進(jìn)程、GPU進(jìn)程(3D繪制等)、瀏覽器渲染進(jìn)程(瀏覽器內(nèi)核，每個Tab頁面都有一個渲染進(jìn)程)。

瀏覽器渲染進(jìn)程包含的線程：

GUI渲染線程JS引擎線程事件觸發(fā)線程定時器觸發(fā)器線程異步http請求線程注意： JavaScript可以操作DOM，如果修改元素的時候同時渲染頁面，就可能出現(xiàn)不可預(yù)料的結(jié)果，所以GUI渲染線程與JS引擎線程是互斥的

瀏覽器渲染頁面過程

1.解析HTML建立dom樹2.解析css構(gòu)建render樹（將CSS代碼解析成樹形的數(shù)據(jù)結(jié)構(gòu)，然后結(jié)合DOM合并成render樹）3.布局render樹（確定每個節(jié)點(diǎn)在屏幕上的位置）4.繪制render樹（遍歷render樹，并使用UI后端層繪制每個節(jié)點(diǎn)）

CSS加載是否會阻塞dom樹渲染？

css加載不會阻塞DOM樹解析css加載會阻塞render樹渲染

回流和重繪

回流：瀏覽器重新渲染部分或全部文檔的過程重繪：元素改變的樣式不影響元素位置時，瀏覽器將新樣式賦予給元素并重新繪制它的過程

1 <style> 
2 .flex-mask { 
3 display: flex; 
4 position: fixed; 
5 z-index: 1; 
6 top: 0; 
7 left: 0; 
8 bottom: 0; 
9 right: 0;
10 align-items: center;　　// 垂直居中
11 justify-content: center;　　// 水平居中
12 background: rgba(0,0,0,.5);
13 }
14 .flex-box {
15 width: 500px;
16 height: 300px;
17 background-color: #fff;
18 border-radius: 10px;
19 }
20 </style>
21 
22 <!-- 元素 -->
23 <div class="flex-mask">
24 <div class="flex-box"></div>
25 </div>

時瀏覽網(wǎng)站的時候經(jīng)常會遇到點(diǎn)擊某些按鈕會彈出登錄提示或者注意事項提示的彈窗。那么這種彈窗是怎么實(shí)現(xiàn)的呢。實(shí)現(xiàn)方法有很多，不外乎就是點(diǎn)擊事件觸發(fā)相應(yīng)的彈窗事件。
在這里介紹一個簡易實(shí)現(xiàn)的方法。
首先，這里的彈窗長這樣：

而原本頁面長這樣：

這里假定圖中深綠色的按鈕作為觸發(fā)彈窗事件的按鈕，在這里命名為btn1，然后就是彈窗的制作：
由圖可看出，彈窗是基于整個屏幕的，有個灰色背景遮罩，中間有一塊白色底帶有圖標(biāo)文字說明的內(nèi)容提示區(qū)，下面還有兩個按鈕，close是關(guān)閉彈窗的作用。了解了這些，就開始制作彈窗了：
1、html結(jié)構(gòu)如下：

1. css樣式如下：

.tc{
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
z-index: 9;
background: rgba(0,0,0,.5);
display: none;
}
.tc .box{
width: 670px;
height: 404px;
background: #fff;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
box-sizing: border-box;
padding-top: 54px;
}
.tc .box .icon{
width: 110px;
height: 110px;
margin: auto;
}
.tc .box .t1{
font-size: 18px;
line-height: 28px;
color: #333;
text-align: center;
box-sizing: border-box;
padding: 0 70px;
margin-top: 38px;
}
.tc .box .t2{
display: flex;
justify-content: center;
margin-top: 48px;
}
.tc .box .t2 .btn1{
width: 195px;
height: 40px;
border: none;
background: #1296db;
color: #fff;
font-size: 18px;
display: block;
cursor: pointer;
}
.tc .box .t2 .btn2{
width: 128px;
height: 40px;
border: none;
background: #295965;
color: #fff;
font-size: 18px;
display: block;
margin-left: 16px;
cursor: pointer;
}
由于在整個彈窗的父級div里加了隱藏屬性：display:none; 所以在頁面上是看不到彈窗的，這個時候就要開始寫觸發(fā)彈窗的點(diǎn)擊事件了，上面假定的按鈕是btn1，彈窗這塊的父級div是 tc 。
<script>
$('.btn1').on('click',function(){
$('.tc').show();
})
</script>
這樣就寫好之后點(diǎn)擊 btn1 就能顯示彈窗了，現(xiàn)在彈窗出現(xiàn)的效果有了，那么點(diǎn)擊close關(guān)閉彈窗的效果也就不遠(yuǎn)了
<script>
$('.tc .btn2').on('click',function(){
$('.tc').hide();
})
</script>
在這里把close 的類名命名為 btn2， 如上代碼就實(shí)現(xiàn)了點(diǎn)擊close按鈕關(guān)閉彈窗的功能。
將這兩個事件放在一起，節(jié)省一個script，也顯得美觀些就是這樣
<script>
$('.btn1').on('click',function(){
$('.tc').show();
})
$('.tc .btn2').on('click',function(){
$('.tc').hide();
})
</script>
到這里一個建議的點(diǎn)擊彈窗關(guān)閉的效果就實(shí)現(xiàn)了。