你觀察過么？從輸入網址到顯示網頁，這個過程究竟發生了什么？

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

關注小編私信。

點贊 + 評論（勾選 “轉發” ）。私信小編回復關鍵詞： 1024即可免費領取喲！

正文：

當輸入URL、敲下回車、最后瀏覽器頁面顯示，這里面有什么故事？鍵盤到操作系統、操作系統到瀏覽器、瀏覽器到服務器、服務器返回數據頁面渲染……

鍵盤到操作系統

回車鍵按下時，與鍵盤相關的電路閉合，通過消抖操作，鍵盤的電路系統將回車鍵轉化為鍵碼13。按鍵被按下會觸發中斷事件，回車鍵的鍵碼被編碼并通過通用串行總線(USB)傳輸到中斷請求線上(IRQ)，中斷控制器接收到IRQ上的信號后，會映射一個中斷向量。中斷描述符表將中斷向量映射到對應的處理函數上(中斷處理器)。

操作系統到瀏覽器

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

瀏覽器到服務器

處理URL

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

HSTS列表: HSTS強制客戶端使用HTTPS與服務器創建連接。若訪問的URL在HSTS列表里，則瀏覽器會把HTTP協議變為HTTPS。

編碼： 對URL進行Unicode編碼

DNS查詢

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

DNS查詢過程：

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

TCP連接

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

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

1.客戶端發送一個TCP包。設置SYN=1(請求建立連接)、Seq=X(隨機產生的序列號)2.服務器發回確認包(ACK)應答。SYN=1、ACK=1、ACK number = X+1、Seq = Y(隨機產生)3.客戶端再次發送確認包(ACK) 。SYN=0、ACK=1、ACK number= Y+1、Seq = X+1

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

1.客戶機給服務器一個FIN為1的TCP報文2.服務器返回給客戶端一個確認ACK報文3.服務器給客戶端發送一個FIN報文4.客戶機回復ACK報文

服務器動作

從瀏覽器發起請求到請求到頁面數據的過程中，可能會經過負載均衡等中間部分

負載均衡

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

請求處理

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

PLUS - 請求方法

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

瀏覽器頁面渲染

瀏覽器收到服務器返回的頁面數據后，開始對頁面進行渲染

瀏覽器進程與線程

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

瀏覽器渲染進程包含的線程：

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

瀏覽器渲染頁面過程

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

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

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

回流和重繪

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

一個水平和垂直居中的模態彈框這么一個小需求，對于我們這些前端來說，應該是常事。

在css3出來以前，我們要想讓元素既水平居中又要垂直居中只有一個辦法（我能想到的），就是通過js計算，把它們定位到屏幕中間位置。這方法比較笨，也麻煩。

推薦下我的前端群：524262608，不管你是小白還是大牛，小編我都挺歡迎，不定期分享干貨，包括我自己整理的一份最新的前端資料和零基礎入門教程，歡迎初學和進階中的小伙伴。

下面兩種方式，可以讓元素快速定位到屏幕中間。　

flex布局

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>

使用translate

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

而原本頁面長這樣：

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

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; 所以在頁面上是看不到彈窗的，這個時候就要開始寫觸發彈窗的點擊事件了，上面假定的按鈕是btn1，彈窗這塊的父級div是 tc 。
<script>
$('.btn1').on('click',function(){
$('.tc').show();
})
</script>
這樣就寫好之后點擊 btn1 就能顯示彈窗了，現在彈窗出現的效果有了，那么點擊close關閉彈窗的效果也就不遠了
<script>
$('.tc .btn2').on('click',function(){
$('.tc').hide();
})
</script>
在這里把close 的類名命名為 btn2，如上代碼就實現了點擊close按鈕關閉彈窗的功能。
將這兩個事件放在一起，節省一個script，也顯得美觀些就是這樣
<script>
$('.btn1').on('click',function(){
$('.tc').show();
})
$('.tc .btn2').on('click',function(){
$('.tc').hide();
})
</script>
到這里一個建議的點擊彈窗關閉的效果就實現了。

在線咨詢

上一篇：青島HTML5入門應怎么判斷？
下一篇：Typora輸入代碼塊、數學公式、繪制流程圖并導出為html

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商